JavaScript レッスン2
条件分岐
条件によって異なる処理を実行する方法を学ぼう
条件分岐とは
条件分岐は、ある条件が真(true)か偽(false)かによって実行する処理を切り替える仕組みです。 プログラムに「判断力」を持たせる最も基本的な制御構文です。
比較演算子
条件式で使う比較演算子を確認しましょう:
===- 厳密等価(値と型が同じ)!==- 厳密不等価>/<- より大きい / より小さい>=/<=- 以上 / 以下&&- AND(両方true)||- OR(どちらかtrue)!- NOT(反転)
if / else 文
Monaco + Shiki / Tab でインデント / Ctrl(Cmd)+Enter で再実行
script.jslazy
40 lines0 issues
Monaco Editor を準備しています
表示領域に入った時点で Monaco と Shiki を初期化します。
preview.local
Live PreviewConsole
console.log / warn / error の出力がここに表示されます。
switch 文
1つの値に対して複数の分岐がある場合、switch文が見やすくなります。
Monaco + Shiki / Tab でインデント / Ctrl(Cmd)+Enter で再実行
script.jslazy
54 lines0 issues
Monaco Editor を準備しています
表示領域に入った時点で Monaco と Shiki を初期化します。
preview.local
Live PreviewConsole
console.log / warn / error の出力がここに表示されます。
三項演算子
単純な条件分岐は三項演算子でコンパクトに書けます。
Monaco + Shiki / Tab でインデント / Ctrl(Cmd)+Enter で再実行
script.jslazy
29 lines0 issues
Monaco Editor を準備しています
表示領域に入った時点で Monaco と Shiki を初期化します。
preview.local
Live PreviewConsole
console.log / warn / error の出力がここに表示されます。
truthy と falsy
JavaScriptでは、boolean以外の値も条件式で使えます。false とみなされる値(falsy)と、true とみなされる値(truthy)があります。
- falsy値:
false,0,""(空文字),null,undefined,NaN - truthy値: falsy以外のすべて(
"hello",42,[],など)
truthy / falsy を試してみよう
Monaco + Shiki / Tab でインデント / Ctrl(Cmd)+Enter で再実行
script.jslazy
23 lines0 issues
Monaco Editor を準備しています
表示領域に入った時点で Monaco と Shiki を初期化します。
preview.local
Live PreviewConsole
console.log / warn / error の出力がここに表示されます。
まとめ
if / else if / elseで条件ごとに処理を切り替えるswitchは1つの値に対して複数分岐するとき便利- 三項演算子
条件 ? A : Bで簡潔な条件分岐が書ける ===と!==を使って厳密に比較する- truthy / falsy を理解すると、簡潔な条件チェックが書ける