条件分岐は「制御構文」のひとつで、特定の条件に応じて異なる処理を実行するための構文です。
条件分岐により、プログラムは状況に応じて柔軟に振る舞うことができます。
本記事では、基本的な構文である、if～else文について詳しく説明します。
また、三項演算についても簡単に紹介します。
条件分岐には if、三項演算 の他に、switch～case文もあるので、それらについては別の記事で紹介していきます。
目次
if 文
条件分岐の中でも最もシンプルでポピュラー、そして人間の思考にも近しいものがif文での条件分岐です。
もしも〇〇がXXだったら、△△する。
👆このような状況をプログラムすることができます。
早速、具体的な例を元にしたサンプルプログラムを作って確認してみましょう。
もしも来客がジェダイだったら、「Welcome!」とコンソールに表示する。
const guest = "Jedi";
if ( guest == "Jedi" ) {
console.log( "Welcome!" );
}> Welcome!日本語の文章と、プログラムの文章を読み比べてみましょう。
やりたいことが日本語からプログラミング言語に翻訳されていることが分かります。
このように、プログラミング言語は、記号が混ざった英語とほとんど変わりません。
やりたいことを明確に母国語で表現できれば、それを英語（とそっくりな言語）に翻訳していくだけです。
念のため、客（guest）がジェダイ以外の場合も試してみましょう。
const guest = "Sith";
if ( guest == "Jedi" ) {
console.log( "Welcome!" );
}> 👆何も表示されておらず、プログラム通りに動作しています。
if～else
前項の if 文を使った例では、客（guest）がジェダイだった場合は歓迎の挨拶が表示されますが、それ以外の客の場合、何も起きません。
ジェダイ以外だった場合にも何らかの処理を動かせるよう、プログラムを改変してみましょう。
もしも来客がジェダイだったら、「Welcome!」とコンソールに表示する。そうでなければ「Good bye」とコンソールに表示する。
const guest = "Jedi";
if ( guest == "Jedi" ) {
console.log( "Welcome!" );
} else {
console.log( "Good bye" );
}> Welcome!続いて、客（guest）書き換えたパターン。
const guest = "Sith";
if ( guest == "Jedi" ) { // もしも…
console.log( "Welcome!" );
} else { // そうでなければ…
console.log( "Good bye" );
}> Good byeif～else if～else
もっと細かく条件指定したい場合には、else if を使用します。
時刻を条件にして、コンソールに表示するメッセージを切り替える例題です。
もしも時刻が9時だったら「勉強する」とコンソールに表示する。
そうでなくて、もし時刻が12時だったら「昼休憩」とコンソールに表示する。
それ以外は「遊ぶ」とコンソールに表示する。
const time = 9;
if ( time == 9 ) { // もしも…
console.log( "勉強する" );
} else if ( time == 12 ) { // そうでなくて、もし…
console.log( "昼休憩" );
} else { // それ以外…
console.log( "遊ぶ" );
}if の入れ子（ネスト）
if 文は入れ子（ネスト）にできます。
if のネストは、複数の条件を満たした場合に特定の処理を実行させることができます。
例を示します。
時間が9時以降で、且つ12時までだったら「勉強する」とコンソールに表示する。
const time = 10;
if ( time >= 9 ) {
if (time <= 12 ) {
console.log( "勉強する" );
}
}論理演算を使った条件分岐
複数の条件を指定して処理を分岐させる方法は、入れ子（ネスト）だけではありません。
論理演算を使うことで、入れ子（ネスト）させることなく記述できます。
前項のサンプルプログラムを、論理演算を使ったコードに書き換えてみましょう。
論理積（AND）を使った例
時間が9時以降で、且つ12時までだったら「勉強する」とコンソールに表示する。
const time = 10;
if ( time >= 9 && time <= 12 ) {
console.log( "勉強する" );
}👆「&&」は、論理積（AND）の演算子で、「且つ」を意味しますね。
忘れてしまった方は、記事『JavaScriptの演算』の「論理演算子」をご確認ください。
論理和（OR）を使った例
次は、論理和を使った複数条件（OR）での分岐サンプルを作ってみましょう。
天候が雨天か、あるいは参加人数が3人未満だったら「イベント延期」とコンソールに表示する。
const weather = "雨天";
const join = "2";
if ( weather == "雨天" && join = 3 ) {
console.log( "イベント延期" );
}👆 天候（wearther）と参加人数（join）の値を書き換えて、色々なパターンを試してみてください。
三項演算子
条件が少なくシンプルな場合、「三項演算子」を使用することにより1行（ワンライナー）で条件分岐を記述することができます。
三項演算子の構文は次の通りで、クエスチョンマーク「?」とコロン「:」を使います。
条件 ? 式1 : 式2
この構文は、条件 が真（true）である場合に 式1 が評価され、偽（false）である場合に 式2 が評価される、という動作をします。
文章だけでは分かりづらいかと思いますので、サンプルコードで確認してみましょう。
黄色マーカーの箇所が三項演算です。
let age = 18;
let message = age >= 18 ? "成人" : "未成年";
console.log( message );age >= 18 ? “成人” : “未成年”
👇
条件：年齢が18以上？ 「はい（true）」なら”成人”を年齢に設定し：「いいえ（false）」なら”未成年”を年齢に設定します。
参考演算子の使用上の注意
三項演算子は、if-else同様に入れ子に（ネスト）することもできます。ただし、ネストが多くなるにつれ可読性は低下します。
条件が多い、あるいは複雑な場合は if-else や switch-case の使用をお勧めします。
三項演算のネストが多いサンプルを以下に示します。
let score = 85;
let grade = score >= 90 ? "A" : score >= 80 ? "B" : score >= 70 ? "C" : score >= 60 ? "D" : "F";
console.log(grade);いかがでしょうか。結果がどうなるか、容易に判断しづらいですよね。
これを if-else で書き直すと次のようになります。
let score = 85;
if (score >= 90) {
console.log("A");
} else if (score >= 80) {
console.log("B");
} else if (score >= 70) {
console.log("C");
} else if (score >= 60) {
console.log("D");
} else {
console.log("F");
}最後に
本記事では、if ～ else 文の基本的な使い方から、ネストされた条件分岐や三項演算子を用いた簡潔な条件分岐の方法についても紹介しました。これらのテクニックを理解し、適切に活用することで、より効率的で読みやすいコードを書くことができるようになります。
条件分岐をマスターすることは、複雑なロジックをシンプルに表現し、バグの少ない健全なプログラムを作成するための第一歩です。ぜひ、実際のプロジェクトで積極的にif-else文を活用してみてください。
次に学習するのは『JavaScriptの switch-case による条件分岐』です。
本記事についての質問、誤りの指摘、ご意見ご感想などありましたら、ぜひコメント頂ければ幸いです。
最後までお読みいただき、ありがとうございました。
コメント