こんにちは、Reiです。
前回は「何が真（Truthy）で、何が偽（Falsy）か」という、
JavaScriptが値をどのように判断しているかを整理しました。
今回はその知識を使って、
条件によって処理を変える仕組みを見ていきます。
たとえば、
- もし条件を満たしていたらAを実行する
- そうでなければBを実行する
といったように、
状況に応じてプログラムの動きを変えることができるようになります。
これが、JavaScriptの「条件分岐」です。
プログラムがどのように判断し、
どの処理を実行しているのか。
基本の書き方から、順番に整理していきましょう！
条件分岐の基本の形「 if文 」
もっとも基本となる分岐が if 文です。
if文は、
「もし〜なら処理を実行する」
という動きを作るための書き方です。
if 文は次の形で書きます。
if (条件) {
条件がtrueのときの処理
} else {
条件がfalseのときの処理
}
カッコ ( ) の中に書いた条件を判断し、
その結果によって実行する処理が決まります。
この条件が true（真） のときだけ、
波かっこ { } の中の処理が実行されます。
else は「そうでなければ」 という意味で、
条件に当てはまらなかった場合の処理を書くときに使います。
コードサンプルで理解を深める
const score = 80;
if (score >= 70) {
console.log("合格です！");
} else {
console.log("不合格です。");
}
このコードでは、score の値は 80 です。
そのため、
score >= 70
が true になり、「合格です！」が表示されます。
もし score が 70未満だった場合は、else 側の「不合格です。」が表示されます。
if は単体でも使える
必ずしも else が必要なわけではありません。
「条件を満たしたときだけ実行したい」
という場合は、ifだけで書くこともできます。
if (score >= 70) {
console.log("合格です！");
}
処理が1行だけの場合は、
波かっこ { } を省略することもできます。
if (score >= 70) console.log("合格です！");
ただし、実際の開発では
あとから処理を追加することも多いため、
最初から { } を付けて書く習慣をつけておくと安心です！
条件を増やす「 else if」
2択だけでなく、
複数のパターンに分けたいときは else if を使います。
if 文は次の形で書きます。
if (条件A) {
条件Aがtrueのときの処理
} else if (条件B) {
条件Bがtrueのときの処理
} else {
どの条件にも当てはまらないときの処理
}
if 文は、上から順番に条件を確認していきます。
まず最初の if の条件を判断し、
当てはまらなければ else if の条件を確認します。
それでも当てはまらなかった場合、
最後に else の処理が実行されます。
コードサンプルで理解を深める
const value = 15;
if (value === 10) {
console.log("値は10です");
} else if (value === 15) {
console.log("値は15です");
} else {
console.log("それ以外の数字です");
}
このコードでは、value の値は 15 です。
そのため、
value === 10
は false になり、次の条件が確認されます。
次に、
value === 15
が true になるため、
「値は15です」が表示されます。
一度条件が成立すると、
それ以降の else if や else は実行されません。
そのため、
条件を書く順番も大切なポイントになります！
特定の値で分ける「 switch文」
ひとつの値を基準に
多くの選択肢へ分けたい場合は switch 文が便利です。
switch は、ひとつの値を基準に
複数のパターンへ分岐するときに使う書き方です。
switch 文は次の形で書きます。
switch (調べる変数) {
case 値A:
値Aだったときの処理
break;
case 値B:
値Bだったときの処理
break;
default:
どれにも当てはまらないときの処理
}switch( ) の中に書いた値をcase の値と順番に比較していきます。
case は「この値だった場合」という意味です。
switch の値と一致した case の処理が実行されます。
コードサンプルで理解を深める
const fruit = "apple";
switch (fruit) {
case "apple":
console.log("りんごですね");
break;
case "orange":
console.log("オレンジですね");
break;
default:
console.log("知らないフルーツです");
}このコードでは、fruit の値は “apple” です。
そのため、
case "apple"
と一致し、「りんごですね」が表示されます。
break を忘れない
switch文では、
break というキーワードがよく登場します。
break は
「ここで処理を終了する」
という意味です。
もし break を書き忘れると、
次の case まで続けて実行されてしまいます💦
switch (fruit) {
case "apple":
console.log("りんごですね");
case "orange":
console.log("オレンジですね");
}
この場合、
fruit が "apple" でも
りんごですね
オレンジですね
両方が表示されてしまいます💦 この動きを フォールスルー と呼びます。
通常は、
caseごとに break を書くと覚えておくと安心です。
また、case は連続して書くこともできます。
switch (fruit) {
case "apple":
case "orange":
console.log("りんごかオレンジです");
break;
}
このように書くと、
fruitの値が “apple” または “orange” のどちらでも
同じ処理を実行できます。
条件分岐を1行で書く「 三項演算子」
短い条件分岐なら、
1行で書く方法もあります。
それが 三項（さんこう）演算子 です。
三項演算子は次の形で書きます。
条件 ? 真のとき : 偽のとき
条件が true か false かを判断し、
結果によって返される値が決まります。
条件が true の場合は「真のとき」の値が使われ、
false の場合は「偽のとき」の値が使われます。
const score = 80;
const result = score >= 70 ? "合格！" : "不合格...";
このコードでは、
score の値は 80 です。
そのため、
score >= 70
が true になり、
"合格！"
が result に代入されます。
もし score が 70 未満だった場合は、
"不合格..."
が result に代入されます。
この三項演算子は、
次の if 文と同じ意味になります。
if (score >= 70) {
result = "合格！";
} else {
result = "不合格...";
}
シンプルな条件であれば、
コードをすっきり書けるのが特徴です。
ただし、「真のときだけ処理したい」
という場合には向いていません。
三項演算子は、
必ず「偽のとき」の値もセットで書く必要があります。
そのため、真のときだけ処理したい場合は
if 文を使って書きましょう！
論理演算子のもう一つの使い方
論理演算子は、
条件を組み合わせるだけでなく、
値そのものを返すこともできます。
この仕組みを使うと、
条件によって使う値を切り替えるような書き方ができます。
Truthy のとき値を返す 「 && 」
&& は、
左の条件が成立したときだけ右の値を使う演算子です。
&& は次の形で使います。
左の値 && 右の値
まず左の値を確認し、
その値が Truthy（真として扱われる値） の場合、
右側の値が結果として返されます。
コードサンプルで理解を深める
const isCompleted = true;
const message = isCompleted && "完了！";
このコードでは、isCompleted の値は true です。
true は Truthy なので、
右側の "完了！" が返されます。
結果として
"完了！"
が message に代入されます。
Falsy のとき代わりの値を返す 「 || 」
|| は、
左の値が使えないときに右の値を使う演算子です。
|| は次の形で使います。
左の値 || 右の値
まず左の値を確認し、
その値が Falsy（偽として扱われる値） の場合、
右側の値が結果として返されます。
コードサンプルで理解を深める
const userName = "";
const name = userName || "名無しさん";
このコードでは、userName の値は “”(空文字) です。
“”(空文字)は Falsy として扱われるため、
右側の "名無しさん" が返されます。
結果として、
"名無しさん"
が name に代入されます。
このように、
|| は「左が成立しなければ右を見る」
&& は「左が成立したら右を見る」
という動きをします。
この仕組みを 短絡評価（ショートサーキット） と呼びます。
まとめ
ここまで、JavaScriptの条件分岐の基本を見てきました。
＼＼ 今回のまとめ ／／
・ if文は「もし〜なら」を実現する基本の書き方
・ else if で分岐を増やせる
・ switch文は1つの値を基準に分けるときに便利
・ 三項演算子は1行で書けるシンプルな分岐
・ 論理演算子は値を切り替える書き方にも使える
条件分岐を理解すると、
プログラムの動きが一気に広がります。
「どんなときに、どの処理を実行するのか」
それをコントロールできるようになることが、
プログラミングの大きな一歩です！
これからコードを書く中で、条件分岐は何度も登場します。
少しずつ慣れていきながら、
JavaScriptの動きをつかんでいきましょう！
コメント