駆け出しのエンジニア日記

プログラミング言語勉強中の独身男性の奮闘日記。日常の投稿もゆる〜く発信します

JavaScriptのswitch文

switch文も条件分岐の一種で、一つの値を起点とした場合分けに特化しています。

switch文で記述したものはif文でも記述できますが、if文の場合だと分岐が多くなってしまうと読みづらくなってきます。そのためswitch文の方が意図を伝えやすいコードになり、可読性も上がることがあります。

 

基本構文は以下の通りです。

switch (){
case 値1
=== 値1 の時に実行する処理;
break;
case 値2:
=== 値2 の時に実行する処理;
break;
case 値3:
=== 値3 の時に実行する処理;
break;
default:
式がいずれの値とも一致しないときに実行する処理;
}

 

例えば、「変数に入っている数字に対して該当する曜日を持ってくる。」ということをやってみます。(イメージしづらいので下記コード確認して下さい)

if文の場合

const day = 2;
if (day === 1) {
console.log('月曜日');
} else if (day === 2) {
console.log('火曜日');
} else if (day === 3) {
console.log('水曜日');
} else if (day === 4) {
console.log('木曜日');
} else if (day === 5) {
console.log('金曜日');
}

このように記述ができます。

「 day =  2」 の時は「火曜日」が出力されます。

これをswitch文で記述してみると、、、

const day = 1;
switch (day) {
case 1:
console.log('月曜日');
break;
case 2:
console.log('火曜日');
break;
case 3:
console.log('水曜日');
break;
case 4:
console.log('木曜日');
break;
case 5:
console.log('金曜日');
break;
case 6:
case 7:
console.log('週末');
break;
default:
console.log('無効な数字です');
}

上記のようになります。

switch 文では case 句ごとにブロックを記述しません。値が一致する case 句が見つかった場合、その次の文から switch 文の最後または break まで順に処理が実行されます。

もしcase 句ごとの出力が同じだった場合は、case 6・case 7のようにまとめることができます。

そして、break は条件を満たしたら処理をそこで中止する意味合いがあリます。もしbreak を書き忘れると、値が一致したところから順に処理が行われ、 switch 文の最後まで順に実行されてしまい、バグってしまうことがあるので注意してください。

また、いずれの値とも一致しなかった場合は default 句の後に記述されている処理を実行します。 default 句は不要であれば省略することができます。

 

JavaScript で条件分岐を行う方法のひとつである switch 文の使い方について紹介でした。

JavaScriptの論理演算子

JavaScriptの論理演算子

・AND( && )

・OR( || )

・NOT( ! )

の3種類あります。

 

・AND( && )

両サイドが true の場合のみ true となります。

サンプルを書いてみます。

 1 <= 4 && 's' === 's'; //true
 9 > 10 && 5 >= 5; //false
 'abc'.length === 3 && 5 + 3 === 10; //false

上記のように、片方だけ式が成立していても true にはなりません。

もう一つ例を見てみます。

パスワードの設定で、「6文字以上かつ空白を含まない」ものにしたいとします。

const password = prompt('パスワードを入力してください');
if (password.length >= 6 && password.indexOf(' ') === -1) {
console.log('パスワード成立');
} else {
console.log('パスワードのフォーマットが無効です。'); }

ポップアップが表示され、条件に該当する文字を入力すると、コンソールで「パスワード成立」と出力されています。

 

・OR( || )

片方が true なら true となります。

( || ) は英語小文字の「 l 」でも、大文字の「 I 」ではありません!

キーボードでは右上に位置する「 ¥マーク+shift 」で入力できます。

サンプルを書いてみます。

 1 !== 1 || 10 === 10; //true
 10 / 2 === 5 || null; //true
 0 || undefined; //false

もう一つ例を挙げて、前回の映画チケットの条件分岐を使ってみます。

 // 0-5 無料
 // 5-10 子供料金
 // 10-65 大人料金
/ / 65+ 無料
const age = 8;
if *1 {
console.log('無料です');
}

上記の文章、0~5歳または65歳以上が「無料」となっていますが、有料な人にだけ知らせたい場合は、

const age = 8;
if (!(age >= 0 && age < 5 || age >= 65)) {
console.log('有料です');
}

このように「!」を付け加えてあげればOKです。

 

論理演算子は使用率も高いので覚えておきましょう。

*1:age >= 0 && age < 5) || age >= 65) {

console.log('無料です');
} else if (age >= 5 && age < 10) {
console.log('子供料金です');
} else if (age >= 10 && age < 65) {
console.log('大人料金です');
} else {
console.log('無効な年齢です');
}

変数 age に0以上の数字を代入すれば見合ったコンソールが出力されます。

 

・NOT( ! )

!は true と false を反転させます。

!null; //true
!(2 === 2); //false
!(10 <= 50); //false

例えば、

const age = 8;
if ((age >= 0 && age < 5 || age >= 65

JavaScriptのif文

if文〜条件分岐〜

条件がtrueの場合に処理を行います。

 

例えば、jsファイル上で

let random = Math.random()
if (random < 0.5) {
 console.log('数字は0.5より小さい!');
 }

このように記述します。

コンソールでは、変数 random が0.5より小さい場合は true になり、「 数字は0.5より小さい! 」が表示されます。false の場合は何も表示されません。

if文は増やすことができるので連続してif文を記述することもできますが、

記述量が多くなったり、読みにくくなってくる可能性もあります。

そこで if と一緒に使うことができる、else if というものがあります。(条件を増やすことができます)

サンプルとして下記の条件分岐があったとします。

const dayOfWeek = 'monday';
if (dayOfWeek === 'monday') {
console.log('月曜日は憂鬱');
} else if (dayOfWeek === 'saturday') {
console.log('土曜日は最高');
}

変数を monday と定義した場合は「 月曜日は憂鬱 」と出力され、

saturday と 定義した際は、「 土曜日は最高 」と出力されます。

またelse if も下記のように映画チケットの条件分岐を続けて記述できます。

 // 0-5 無料
 // 5-10 子供料金
 // 10-65 大人料金
const age = 25;
if (age < 5) {
console.log('無料になります');
} else if (age < 10) {
console.log('子供料金なので1000円になります');
} else if (age < 65) {
console.log('大人料金なので2000円になります');
}

 

最後にif や else if を使用して何も true ではなかった場合の条件分岐の仕方を紹介します。

else というものを使用します。

先ほどの曜日の例で書いてみます。

const dayOfWeek = prompt('英語で曜日を入力してください');
if (dayOfWeek === 'monday') {
console.log('月曜日は憂鬱');
} else if (dayOfWeek === 'saturday') {
console.log('土曜日は最高');
} else if (dayOfWeek === 'friday') {
console.log('仕事が終わってからの花金は最高');
} else {
console.log('はぁ。。。');
}

月曜・土曜・金曜に該当しないものは else 以降の処理が行われます。

※  promptの使い方を解説します。

promptはダイアログで表示させたい文字列を引数に指定します。

promptの戻り値は入力された文字列になります。

prompt を使うことで下記のようにポップアップが出現します。

ここに曜日を英語で入力することで、条件分岐がされ、出力内容が変わってきます。

 

上記のサンプルコードはあくまで、if文などをわかりやすく説明するために書いたものなので至らないところあるかと思いますが、ご了承ください、、

 

今後条件分岐は多く使うことになるので覚えておきましょう。

ファイルからJavaScriptを実行

今までコンソールで記述してきましたが、ブラウザを閉じたりするとその履歴がなくなってしまい、すぐに消えてしまうので、コンソール上でWEBアプリを動かすためのJavaScriptを記述していくのは非現実的です。

コンソールでの確認は問題が起きた時に原因を追究する時に便利なツールなのでこれからも使っていくことはあると思います。

JavaScriptの記述はVSCodeなどのエディターを使用していきます。(自分の環境がVSCodeです。)

 

JavaScriptファイルに記述していくことになるのでまずはJavaScriptファイルを作成します。

VSCodeの左側にファイル作成する箇所があるので、そこで、「 ○○.js 」というファイルを作成します。

ファイル名はなんでも大丈夫ですが、最後を「 .js 」で終わらせるようにしてください。

 

app.js上で

 1 + 3;

を記述しても実行はされますが、どこにも表示はされません。

コンソールに出したのであれば、

console.log('はじめてのJavaScriptファイル!');
console.log();
このメソッドは主に、渡された値をコンソールに表示するために使用します。
log()の引数は、String(文字列)、Array(配列)、Object(オブジェクト)、
Boolean(真偽値)など、どのような型でも使用できます。

このように記述します。

そして、「 index.html 」ファイルから「 app.js 」のJavaScriptを呼ぶ必要があります。

どのように記述するかというと、

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>はじめてのscript</h1>

<script src="app.js"></script>
</body>
</html>

script タグを用い  src に先ほど作成した「 app.js 」を記述します。

記述位置はbody タグの一番下に 書きましょう。

上記のものを読み込むと、、

console.log();のおかげで、「はじめてのJavaScriptファイル!」も出力がされています。

 

また、下記のように「 app.js 」に変数を記述しても

console.log('はじめてのJavaScriptファイル!');
let sum = 1 + 3;
console.log('GOODBYE!!!!');

表示はされませんが、コンソールで変数「 sum 」を入力すると、代入した値が出力されているので、JavaScriptが実行されていることがわかると思います。

 

以上、ファイルからJavaScriptを実行についてまとめてみました。

JavaScriptの比較演算子

比較演算子・・・

if文やfor文・while文などのループ処理の条件式に使われることが多く、2つの値を比較するに使用します。

 

比較演算子には種類があります。まずは「 <> 」系の上4つを見ていきます。

  > //より大きい
  < //より小さい
  >= //以上
  <= //以下
  == //等価
  != //不等価
  === //厳密な等価
  !== //厳密な不等価

 10 > 1; // true
 0.2 > 0.3; //false
 -10 < 0; //true
 50.7 < 5; //false
 2.5 <= 2.5; //true
 80 >= 5; //false
 99 >= 99; //true

2つの値を比較し、「 true/false 」を返してくれます。

変数に入れて使うことも可能です。

 let age = 30;
 age >= 18; //true

変数「age」が18歳以上なのかどうか知りたかったとします。

上記のように、比較演算子で比べて見ると、31歳は18歳より大きいので「 true 」を返すことがわかります。これを用いて、if文などで条件分岐させることができます。

 

次に下4つ「==など」について見ていきます。

==(ダブルイコール)

・値が等しいか判断するが、型は気にしない

・値の型が異なる場合、型の変換を試みてから比較を行う

(これのせいで意図しない結果になる場合もあります・・・)

  1 == 1; //true
  1 == '1'; //true
 'c' == 'e'; //false
  0 == ''; //true
  0 == false; //true
 null == undefined; //true
 true == false; //false

これに対し、

===(トリプルイコール)

・値と型の両方が一致しているか判断します。

10 === 10; //true
2 === '2'; //false
3 === 6; //false
0 === false; //false

 

最後に

!==(!=) ノットイコール

「 ! 」は反対にするの意味

1 != 2; //true
1 != '6'; //true
3 != '3'; //false
1 !== '1'; //true

このように記述できます。

ノットイコールに関しては少しややこしいですが、

覚えておくべきことは、比較する時は、「 === 」系を使うことです。

 

以上、比較演算子についてまとめてみました。

 

JavaScriptでランダムな数字を作る

今回は、JavaScriptでランダムな数字の作り方を学習します。

Math オブジェクト・・・

数学的な定数と関数を提供するプロパティとメソッドをもつ組み込みのオブジェクト

 

JavaScriptで乱数を作るには、「Math」オブジェクトの「random()」メソッドを使用します。

  Math.random();
// 0以上1未満のランダムな数字を返す

コンソールで確認してみます。

 上記のように毎回違う数字が生成されます。

先ほどの構文をベースにして、さまざまな種類の乱数を作っていくので覚えておきましょう。

 

上記の構文を用いて、サンプルとして1〜10の間の整数を作ってみましょう。

  Math.random();
  // 0~1のランダムな数字が作られます。
  Math.random() * 10;
  // Math.random();には0~1のランダムな数字が入っているため、
  10を掛けることで、10にはならないが10までの数字がランダムに作られます。
  Math.floor(Math.random() * 10);
  // floor()メソッドは小数点以下を切り下げるメソッド
  Math.floor(Math.random() * 10) + 1;
  // Math.floor(Math.random() * 10); は0から始まってしまうので、
  1から始まるようにしたいため、最後に1を足してあげる

書いてみる

このように表すことができます。

 

式で表すと

   Math.random() * (最大値 - 最小値) + 最小値;

となります。

例えば、20〜22のランダムな数字ならどうでしょう。

上の式を使うと、

   Math.floor(Math.random() * 3) + 20;

となります。

 

今後使うことになるかもしれないので頭の片隅に入れておきましょう。

便利なテンプレートリテラル

テンプレートリテラルを使わない記述の場合

let name = 'チョコレート';
let price = 100;
let quantity = 5;
'チョコレートを5個買って500円だった'
'チョコレートを5個買って500円だった'
この文章を今までの知識で記述しようとすると、
name + 'を' + quantity + '個買って' + price * quantity +'円だった'
上記のようになります。しかしこれだと記号も多いし、入力ミスをしてしまう可能性もありますよね、、
そんな時に便利なのが、「テンプレートリテラルという構文です。
改行文字をそのまま改行として入力できるほかに文字列の中に式や変数の値を埋め込むことができます。
テンプレートリテラルは文字列を表す方法のひとつで文字の並びをバッククォーテーション(`)で囲って記述します。
※日本語キーボードならShiftキー+@
 
let msg = `こんにちは。今日は天気がいいですね。`;
上記のようにメッセージを入れることが可能です。
またもう一つの特徴が文字列の中に式を埋め込めることができます。
` `の中に下記の式を入れて記述します。
${ }
 
実際に先ほどのチョコレートの文章をテンプレートリテラルを使って書き直します。
`${name}${quantity}個買って${price * quantity}円だった`
name + 'を' + quantity + '個買って' + price * quantity + '円だった'
下のテンプレートリテラルを使わない文章より見やすくなり、記述もラクになりますよね。
`${name.slice(0,3)}${quantity}個買って${price * quantity}円だった`
'チョコを5個買って500円だった'
また上記のようにメソッドも入れることが可能です。
 
他の文字列の場合でも文字列の連結を使うことで文字列と変数の値を結合して文字列を作成することができましたが、テンプレートリテラルを使えばより直感的に文字列の中に変数や式を埋め混むことができます。
 
これから頻繁に使っていくことになると思うので、ぜひ覚えておきましょう。