<CodeLearn/>
JavaScript レッスン2

条件分岐

条件によって異なる処理を実行する方法を学ぼう

条件分岐とは

条件分岐は、ある条件が真(true)か偽(false)かによって実行する処理を切り替える仕組みです。 プログラムに「判断力」を持たせる最も基本的な制御構文です。

比較演算子

条件式で使う比較演算子を確認しましょう:

  • === - 厳密等価(値と型が同じ)
  • !== - 厳密不等価
  • > / < - より大きい / より小さい
  • >= / <= - 以上 / 以下
  • && - AND(両方true)
  • || - OR(どちらかtrue)
  • ! - NOT(反転)

if / else 文

script.jslazy
40 lines0 issues

Monaco Editor を準備しています

表示領域に入った時点で Monaco と Shiki を初期化します。

preview.local
Live Preview
Console

console.log / warn / error の出力がここに表示されます。

switch 文

1つの値に対して複数の分岐がある場合、switch文が見やすくなります。

script.jslazy
54 lines0 issues

Monaco Editor を準備しています

表示領域に入った時点で Monaco と Shiki を初期化します。

preview.local
Live Preview
Console

console.log / warn / error の出力がここに表示されます。

三項演算子

単純な条件分岐は三項演算子でコンパクトに書けます。

script.jslazy
29 lines0 issues

Monaco Editor を準備しています

表示領域に入った時点で Monaco と Shiki を初期化します。

preview.local
Live Preview
Console

console.log / warn / error の出力がここに表示されます。

truthy と falsy

JavaScriptでは、boolean以外の値も条件式で使えます。false とみなされる値(falsy)と、true とみなされる値(truthy)があります。

  • falsy値: false, 0, ""(空文字), null, undefined, NaN
  • truthy値: falsy以外のすべて("hello", 42, [], など)

truthy / falsy を試してみよう

script.jslazy
23 lines0 issues

Monaco Editor を準備しています

表示領域に入った時点で Monaco と Shiki を初期化します。

preview.local
Live Preview
Console

console.log / warn / error の出力がここに表示されます。

まとめ

  • if / else if / else で条件ごとに処理を切り替える
  • switch は1つの値に対して複数分岐するとき便利
  • 三項演算子 条件 ? A : B で簡潔な条件分岐が書ける
  • ===!== を使って厳密に比較する
  • truthy / falsy を理解すると、簡潔な条件チェックが書ける