【JavaScript】switch 文を簡単解説。+「&&(かつ)||(または)」も説明します。

JavaScript プログラミング

daiki

こんにちは、daikiです。

今回は、Progate の Javascript で学んだことを共有します。
前半に switch 文の解説をして、後半に「&&(かつ)||(または)」を説明します。

前回がこちらでしたね。↓

【JavaScript】条件が成り立たない場合の別の処理 else 。if を深堀して解説。

次は switch 文と「&& と ||」について。
これは簡単ですよ。

Javascript を進めてきた人なら余裕で出来るはずです。

switch 文は「ある値によって処理を分岐する」場合に用いられる。
&& と || は「~かつ」「~または」という意味。

こちらを深堀です😌

switch 文を詳しく解説


switch 文は「ある値によって処理を分岐する」という場合で用いられます。
言葉だけだと分かりづらいですね。

実際に書いてみます。

switch(条件の値){
  :
}

こちらが公式です。↑
const を加えます。

const color = "赤";
switch(条件の値){
  :
}

こんな感じですね。

ただ、これだけだと if 文と一緒な気がしますね。
なので、さらに追加。

case を加える

switch 文には case を加えて書いていきます。
case を加えることで処理を分けることが可能になります。

case を用いた公式。

switch(条件の値){
  case 値1:
    「条件の値」が「値1」と等しい時の処理
    break;
}

↑これですね。

※補足: break とは case の処理を終了するという意味。

実際に書き込むと。

const color = "赤";
switch(color){
  case "赤":
    console.log("ストップ!");
    break;
}

上を表示させます。

ストップ!

case で指定した文字が出力されています。

switch 文をさらに詳しく

一つだけの指定だと、switch 文を活かしきれていないですね。
なので、二つ以上でやってみます。

switch(条件の値){
  case 値1:
    「条件の値」が「値1」と等しい時の処理
    break;
  case 値2:
    「条件の値」が「値2」と等しい時の処理
    break;
}

上が公式です。
こちらを実際に書いてみます。

const color = "赤";
switch(color){
  case "赤":
    console.log("ストップ!");
    break;
  case "黄":
    console.log("要注意");
    break;
}

表示させてみます。

ストップ!

どうでしょう?
理解できたのではないでしょうか。

case で指定した「赤」の部分だけ出力されて、「黄」の部分は出力されていません。
これが switch 文です。

さらにさらに深堀。default

switch 文をさらに深堀です。
次は default を学んでいきましょう。

default は if 文の else と同じような役割です。
詳しくはこちらをどうぞ↓

【JavaScript】条件が成り立たない場合の別の処理 else 。if を深堀して解説。

switch(条件の値){
  case 値1:
    「条件の値」が「値1」と等しい時の処理
    break;
  case 値2:
    「条件の値」が「値2」と等しい時の処理
    break;
  default:
    処理
    break;
}

こちらが公式。
では公式に沿ってあてはめます。

const color = "青";
switch(color){
  case "赤":
    console.log("ストップ!");
    break;
  case "黄":
    console.log("要注意");
    break;
  default:
    console.log("指定の色はありません");
    break;
}

これを出力すると。

指定の色はありません

指定の色が「青」になっているので、case で設定しているものと合わない。
なので、default で設定している文字が表示される。

これが default の活用ですね。
以上が switch 文の解説。

&&(かつ)||(または)を詳しく解説


switch 文の解説は終わったので、次は &&(かつ) ||(または)について学んでいきましょう。
こちらは簡単なんで、気軽にどうぞ。

すみません🙇
先に誤っておきます。

順序が逆でしたね。
先にこちらを書くべきでした。

申し訳ないですが、if 文に戻ります。
なぜなら、&& と || は if 文で用いるものなので、、。

&&(かつ)を深堀

まずは && について学んでいきましょう。
&& は「かつ」という意味です。

「○○かつ○○」と言ったときに使用します。
公式は簡単。

(条件1 && 条件2)

実際に使ってみます。

const number = 31;
if (number <= 10 && number  < 100) {
  console.log("number は2桁です");
}

こちらを表示させる。

number は2桁です

となります。
ただ、条件式が合わない場合はエラーになるので注意。

true と false については別記事に書いているのでそちらを参照。

【JavaScript】条件分岐 if 文を簡単に解説。ついでに真偽値と比較演算子も。

||(または)を深堀

次は「または」という意味を指示するときのやり方を解説します。
それが || です。

この縦棒なんて読むんですかね?
調べてみてもでてきませんでした。

キーボードの右上にあるやつです。

こちらを使用すると「~または」という意味を指定できます。

(条件1 || 条件2)

こちらが公式。
先ほどの && を || に変えただけです。

これで、「条件1または条件2に指示を与える」という感じになります。

そして実際にコードを書く場合もやり方は同じ。
なので、説明は不要ですね。

再度、復習です

解説も終わったので、再度復習しましょう。

switch は 「ある値によって処理を分岐する」という意味で用いられ、case 指定し、console.log で出力することができました。

これで、自分が指定したい条件を選ぶことができます

&& は「かつ」という意味で、「条件1かつ条件2」という指定ができる。
これに類似しているのが ||(または)という事。

簡単にまとめるとこんな感じですね。

では、そろそろお時間です😌