JavaScript - 条件分岐の基本 - if 文の書き方と true, false の意味

条件分岐とは？

条件分岐とは、与えられた条件を満たすかどうかによって、やることを分けることです。

例えば、

「もし熱があったら、学校を休む。」
「もし明日の天気が大雨なら、サッカーの試合は中止。そうでなければサッカーの試合をやる。」

など、私たちは普段から、様々な条件によってやることを分けていますよね。プログラミングでもこのように、条件を指定して実行する処理を分けることがよくあります。

条件を分岐するコードを「条件文」と言い、JavaScript の条件文には if と switch の二つがあります。

今回紹介するのは、if、if...else、if...else if の書き方です。記事の後半では、条件文を学ぶときに知っておきたい true と false の意味について解説します。

if「もし〜なら」

条件文の if 文（イフぶん）は、実行する処理を分けるために使われます。() の中に条件を書き、その条件が「成立する場合」に実行するコードを波括弧 {} の中に書きます。

構文：

if (条件) {

  // 条件が成立する場合に実行する処理
  // …

}

{} の中に書くコードは、それぞれの文の終わりにセミコロン ; をつけるのを忘れないようにしましょう。また、{} は文をグループ化するため使われるものなので、} のあとには ; はつけない、ということに注意してくださいね。

サンプルコード - if

if 文を使った例を見てみましょう。二人の年齢を比べて、条件が成立する場合にポップアップメッセージを表示するプログラムです。

let myAge = 20;
let yourAge = 22;

if (myAge < yourAge) { 
  alert('私はあなたより年下です。');
}

この場合、myAge は yourAge より小さいですね。if で指定した myAge < yourAge の条件が成立するので、「私はあなたより年下です。」とメッセージが表示されます。

実行結果

では不等号の向きを変えて、条件を myAge < yourAge から myAge > yourAge にしたらどうなるでしょうか？

let myAge = 20;
let yourAge = 22;

if (myAge > yourAge) { 
  alert('私はあなたより年上です。');
}

この場合は、条件が成立しないのでコードは実行されず、メッセージは表示されません。

if...else「もし〜なら、でなければ」

if で指定した条件が「成立する場合」と「成立しない場合」で実行する処理を分けるときは、else（エルス）を追加します。

構文：

if (条件) {

  // 条件が成立する場合に実行する処理
  // …

} else {

  // 条件が成立しない場合に実行する処理
  // …

}

サンプルコード - if...else

else を使った例を見てみましょう。二人の年齢を比べて、条件が「成立する場合」と「成立しない場合」で、違うメッセージを表示するプログラムです。

let myAge = 20;
let yourAge = 22;

if (myAge === yourAge) {
  alert('私とあなたは同い年です。');
} else {
  alert('私とあなたは年が違います。');
}

この場合、if で指定した myAge === yourAge の条件が成立しないので、else で指定されたコードが実行され、「私とあなたは年が違います。」とメッセージが表示されます。

実行結果

if...else if「もし〜なら、でなければもし〜なら」

if で指定した初めの条件が成立しなかった場合に、新たに条件を追加して処理を分けたいときは、if のあとに else if（エルスイフ）を追加します。

else if はいくつも追加することができますよ。最後の else は任意です。どの条件も成立しない場合に実行する処理がなければ、else は書きません。

構文：

if (条件1) {

  // 条件1が成立する場合に実行する処理
  // …

} else if (条件2) {
  
  // 条件1が成立せず、条件2が成立する場合に実行する処理
  // …

} else {

  // どの条件も成立しない場合に実行する処理
  // …
  
}

サンプルコード - if...else if

else if を使った例を見てみましょう。これまでのサンプルと同じように、二人の年齢を比べて、メッセージを表示するかどうかを分けるプログラムです。

let myAge = 20;
let yourAge = 22;

if (myAge === yourAge) {
  alert('私とあなたは同い年です。');
} else if (myAge < yourAge) {
  alert('私はあなたより年下です。');
} else {
  alert('私はあなたより年上です。');
}

この場合は、if で指定した条件は成立せず、else if で指定した条件は成立するので、else if で指定されたコードが実行されます。

実行結果

if 文を学習していると、true（トゥルー）、false（フォルス）という用語に出会うことがよくありますよね。次のセクションからは、データ型について簡単に紹介し、true と false の意味を説明します。

データ型 - boolean 型（論理型）

データ型は、データ（値）がどんな種類のものなのかを示します。 JavaScript には様々なデータ型があり、プログラムで扱う値は特定の型に属しています。例えば、「数値」や「文字列」などです。

では、if 文で使われるデータ型は何かと言うと、 boolean 型（ブーリアン型）というものです。論理型とも言われます。boolean 型は、真理値（真偽値）という値を扱います。

真理値 - true, false

真理値は、true（真）または false（偽）という２つの値で表されます。必ず true か falseどちらか一つの値を取るのがboolean 型です。

true または false

if 文では、() 内の条件を true または false のどちらかに変換してから、指定したコードを実行するかしないかを決定します。

条件が成立するなら true、成立しないなら false

if 文での条件分岐をもう少し詳しく説明すると、次のようになります。

まず、() 内の条件が「成立するか」「成立しないか」を評価します。
そして、その評価結果を true または false のどちらかの値で返します。条件が成立する場合は true、成立しない場合は false です。
条件が true であるならば、指定したコードが実行されます。
else で指定されているコードがあれば、条件が false の場合に実行されます。

if 文のフローチャート

この条件は true ? それとも false ?

では突然ですがここで、真理値についての問題です。下にあるコード例を見てください。次のような条件の場合、ポップアップメッセージは表示されるでしょうか、されないでしょうか？

コード例１：

if (0 < 1) { 
  alert('hello');
}

コード例２：

if (1) { 
  alert('hello');
}

答えは、両方とも「ポップアップメッセージは表示される」です。

例１の条件は、大きさを比べる「式」になっているので分かりやすいですね。0 < 1 は成立するので true となり、 hello と表示されます。

例２の条件は式になっておらず、1 です。単なる「数値」の 1 が、条件が成立する、true と評価されるのはなぜでしょうか？

boolean 型でなくても true, false になるのはなぜ？

JavaScript は、値を自動的に正しい型に変換する「型変換」を行います。if 文で、boolean 型ではない値、例えば数値や文字列などが使われた場合でも、型変換によって true または false が返されるようになるのです。

上の例２で言うと、数値の 1 は、条件として使用されると true と評価されます。false ではなく true と評価される理由は、「1 は truthy な値であるから」です。

truthy, falsy とは？

truthy（トゥルーシー）とは、条件として使われたときにtrue と評価される値のことです。一方、false と評価される値はfalsy（フォルシー）と言われます。if 文では、 true または false を返すために、条件として与えられた値がtruthy であるか、falsy であるかを評価します。

truthy または falsy

truthy となる値、falsy となる値は次のとおりです。

truthy：falsy を除くすべての値。
falsy：false, null, undefined, 空文字列 '', NaN, 0, -0, 0n

この条件は truthy ? それとも falsy ?

さて、ここで再び問題です。次のような条件の場合、ポップアップメッセージは表示されるでしょうか、されないでしょうか？

コード例１：

let message;

if (message) {
  alert('hello');
}

例１の答えは、「表示されない」です。変数 message は宣言はされていますが、値が代入されていません。このように初期化されていない変数の値は undefined となります。undefined は falsy な値なので、指定したコードは実行されません。

では、次のような条件ではどうでしょう？

コード例２：

let myAge = 20;

if (myAge) { 
  alert(myAge);
}

例２の答えは、「表示される」です。条件の myAge は truthy な値です。truthy な値は true と評価されるので、ポップアップメッセージは 20 と表示されます。

falsy な値はごく一部に限られているので、それらを除くすべては truthy な値となり指定したコードは実行される、と覚えておきましょう。

まとめ

今回は、JavaScript の条件文である if 文の書き方と、真理値 true と false について紹介しました。

if 文を使うと、条件ごとに実行する処理を分岐することができます。() の中が式になっていて、「成立するか、成立しないか」、「true か false か」が明確に分かる条件以外にも、truthy な値や falsy な値が条件として指定されることもあります。そのようなコードに出会ったときは、与えられた値が「falsy な値か、そうではないか」で判断するといいですよ。

最後まで読んでいただき、ありがとうございます。記事に関するコメントはこちらにお寄せください。Twitter @pyxofy・LinkedIn・Mastodon・Facebook

この記事をシェアしてくれると嬉しいです！