JavaScript - 条件分岐の基本 - if 文の書き方と true, false の意味
if 文は、「もし〇〇ならAをする、そうじゃなかったらBをする」のように、条件によって処理を分岐させるための文です。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 型です。
if 文では、() 内の条件を true または false のどちらかに変換してから、指定したコードを実行するかしないかを決定します。
条件が成立するなら true、成立しないなら false
if 文での条件分岐をもう少し詳しく説明すると、次のようになります。
- まず、
()内の条件が「成立するか」「成立しないか」を評価します。 - そして、その評価結果を
trueまたはfalseのどちらかの値で返します。条件が成立する場合はtrue、成立しない場合はfalseです。 - 条件が
trueであるならば、指定したコードが実行されます。 elseで指定されているコードがあれば、条件がfalseの場合に実行されます。
この条件は 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を除くすべての値。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
この記事をシェアしてくれると嬉しいです！
関連記事
