JavaScriptのelseifとは？条件分岐の使い方を初心者向けに解説

はい、承知いたしました。JavaScriptのif、else if、elseを使った条件分岐について、初心者向けに約5000語の詳細な解説記事を作成します。

---

JavaScriptのif、else if、elseとは？ 条件分岐の使い方を初心者向けに徹底解説！

プログラミングの世界へようこそ！ プログラムは、ただ書かれた順番に処理を実行していくだけではありません。状況に応じて異なる判断を下し、進むべき道を変える必要があります。この「状況に応じた判断」を行うために欠かせないのが、「条件分岐」と呼ばれる仕組みです。

JavaScriptにも、この条件分岐を実現するための強力なツールがあります。それが、今回主役となるif、else if、そしてelseです。これらを使いこなせるようになれば、あなたのプログラムは格段に賢く、柔軟になります。

この記事では、プログラミングが全く初めての方でも理解できるように、if、else if、elseの基本的な使い方から、条件式の作り方、さらには実践的な応用例まで、とことん詳しく解説していきます。約5000語というボリュームで、まるでマンツーマンレッスンを受けているかのように、一つ一つ丁寧に紐解いていきましょう。

さあ、JavaScriptの「判断力」の秘密に迫る旅を始めましょう！

目次

1. なぜ条件分岐が必要なのか？

   • 日常生活での「もしも」
   • プログラムにおける「もしも」
   • if、else if、elseの役割

2. 基本中の基本：if文

   • if文の仕組みと考え方
   • if文の基本的な書き方（構文）
   • if文の動作フロー
   • シンプルなif文の例
   • 条件が偽（false）の場合

3. 「そうでなければ」の処理：else文

   • else文の仕組みと考え方
   • if文とelse文を組み合わせる
   • if/else文の基本的な書き方（構文）
   • if/else文の動作フロー
   • if/else文の例

4. 複数の条件を扱う：else if文

   • なぜelse ifが必要なのか？
   • else if文の仕組みと考え方
   • if、else if、elseを組み合わせる
   • if/else if/else文の基本的な書き方（構文）
   • if/else if/else文の動作フロー：上から順番に評価される仕組みが重要！
   • if/else if/else文の例（段階的な条件）
   • else ifはいくつでも使える
   • 最後のelseは必須ではない

5. 条件式の作り方：比較演算子を使いこなす

   • 条件式とは？
   • 真（true）と偽（false）
   • 代表的な比較演算子
     • == 等しい（抽象的な比較）
     • != 等しくない（抽象的な比較）
     • === 厳密に等しい（厳密な比較）
     • !== 厳密に等しくない（厳密な比較）
     • > より大きい
     • < より小さい
     • >= より大きい、または等しい
     • <= より小さい、または等しい
   • 重要！ == と === の違い：型変換の落とし穴
   • 比較演算子の例

6. 複数の条件を組み合わせる：論理演算子

   • 論理演算子とは？
   • 代表的な論理演算子
     • && (AND) 論理積：すべての条件が真の場合
     • || (OR) 論理和：いずれか１つの条件が真の場合
     • ! (NOT) 論理否定：真と偽を反転する
   • 論理演算子の組み合わせ例
   • 括弧 () を使って条件の優先順位を明確にする

7. 条件分岐の応用テクニック

   • ブロック文 {} の重要性：複数行の処理
   • 単一行の処理における {} の省略（非推奨）
   • 条件分岐のネスト（入れ子構造）
   • Truthy（真とみなされる値）と Falsy（偽とみなされる値）
   • 簡単な条件分岐の別表現：三項演算子 ? :
   • 複数の厳密な等価比較には switch文も検討する（if/else ifとの比較）

8. 実践的な例で理解を深める

   • 例1：時間帯に応じた挨拶の表示
   • 例2：ユーザーの年齢によるアクセス制限
   • 例3：商品の割引率計算

9. if、else if、elseを使う上での注意点とベストプラクティス

   • インデント（字下げ）を適切に行う
   • 常にブロック文 {} を使う
   • === と !== を優先的に使う
   • else ifの条件の記述順序に注意する
   • 最後のelseで想定外のケースを捕捉する
   • 複雑すぎる条件分岐は避ける（関数に切り出すなど）

10. まとめ：条件分岐はプログラミングの必須スキル

---

1. なぜ条件分岐が必要なのか？

プログラミングにおける条件分岐の役割を理解するために、まずは日常生活を考えてみましょう。

日常生活での「もしも」

私たちは、無意識のうちに毎日たくさんの「もしも」を判断しています。

• 「もしも 雨が降っていたら、傘を持っていく」
• 「もしも 電車に間に合いそうなら、走らない」
• 「もしも お腹が空いていたら、何か食べる」
• 「もしも 試験で80点以上取れたら、自分にご褒美をあげる」

このように、「ある条件が満たされているか？」を判断し、それに応じて行動を変えていますよね。

プログラムにおける「もしも」

プログラムもこれと同じです。人間が日常生活で判断を行うように、プログラムも状況に応じて異なる処理を行う必要があります。

例えば、ウェブサイトでユーザーがログインしようとしたときを考えます。

• ユーザーが入力したパスワードが、登録されているパスワードと「もしも 一致していたら」 → ログイン成功、会員限定ページへ案内する
• ユーザーが入力したパスワードが、登録されているパスワードと「もしも 一致していなかったら」 → ログイン失敗、エラーメッセージを表示する

ショッピングサイトで商品をカートに入れたとき。

• カートに入っている商品の合計金額が「もしも 5000円以上なら」 → 送料を無料にする
• カートに入っている商品の合計金額が「もしも 5000円未満なら」 → 送料を加算する

ゲームであれば。

• キャラクターのHPが「もしも 0になったら」 → ゲームオーバーにする

このように、プログラムが現実世界やユーザーの操作、データの内容などに応じて適切な振る舞いをするためには、「条件分岐」の仕組みが不可欠なのです。

if、else if、elseの役割

JavaScriptでは、この条件分岐を実現するために主に以下のキーワード（構文）を使います。

• if: 「もしも、〜という条件が真（true）ならば、この処理を実行しなさい」と指示します。最も基本的な形です。
• else: ifの条件が偽（false）だった場合に、「そうでなければ、この処理を実行しなさい」と指示します。if文とセットで使います。
• else if: ifの条件が偽（false）だったが、さらに別の「もしも、〜という条件が真（true）ならば、この処理を実行しなさい」と指示します。複数の条件を順番にチェックしていくために使います。if文の後にいくつでも繋げることができ、最後にelseを続けることもできます。

これらのキーワードを組み合わせることで、プログラムに様々な判断をさせることができるようになります。

2. 基本中の基本：if文

まずは、条件分岐の最もシンプルな形であるif文から見ていきましょう。

if文の仕組みと考え方

if文は、「もし、ある条件が満たされていたら、特定の処理を実行する」という指示をプログラムに与えます。条件が満たされていなければ、その特定の処理はスキップされます。

これを日常生活に例えるなら、「もし雨が降っていたら、傘を持っていく」という状況です。雨が降っていなければ（条件が満たされていなければ）、傘は持っていきません。

if文の基本的な書き方（構文）

if文の構文は以下のようになります。

javascript
if (条件式) {
// 条件式が真（true）だった場合に実行される処理
}

• if: これはJavaScriptのキーワードです。「もしも」という意味を持ちます。
• (条件式): 括弧 () の中に、判断したい「条件」を書きます。この条件式は、最終的に真（true）または偽（false）のどちらかの値になる必要があります。（後述する「条件式の作り方」で詳しく解説します。）
• {}: 波括弧 {} で囲まれた部分を「ブロック」と呼びます。このブロックの中に、条件式が真（true）だった場合に実行したい処理（一つ以上のJavaScriptの文）を書きます。ブロックは、一連の処理をひとまとめにする役割があります。

if文の動作フロー

if文の動作の流れを単純化すると、以下のようになります。

1. プログラムがif文に到達する。
2. (条件式) の中の式を評価する。
3. 評価結果が 真（true） か 偽（false） かを判断する。
4. 真（true） だった場合：{} ブロックの中の処理を実行する。{} の中の処理が終わったら、if文の次の行に進む。
5. 偽（false） だった場合：{} ブロックの中の処理をスキップする。そのままif文の次の行に進む。

これは、フローチャートで描くと以下のようになります。

mermaid
graph TD
A[プログラム開始] --> B{条件式は真か？};
B -- 真 --> C[条件が真の場合の処理];
C --> D[if文の次へ];
B -- 偽 --> D;
D[処理終了];

シンプルなif文の例

実際のコードを見てみましょう。

“`javascript
let temperature = 30; // 温度を30度に設定

if (temperature > 25) {
// 条件式: temperature > 25 (温度が25度より大きいか？)
// temperatureは30なので、30 > 25 は真（true）です。
console.log(“今日は暑いですね！”); // この行が実行されます。
}

console.log(“天気の話でした。”); // この行は条件に関わらず実行されます。
“`

このコードを実行すると、コンソールには以下のように表示されます。

今日は暑いですね！
天気の話でした。

なぜなら、temperatureが30なので、temperature > 25という条件式はtrueとなり、ifブロックの中のconsole.log("今日は暑いですね！");が実行されたからです。

条件が偽（false）の場合

では、条件が偽（false）だった場合はどうなるでしょう？

“`javascript
let temperature = 20; // 温度を20度に設定

if (temperature > 25) {
// 条件式: temperature > 25 (温度が25度より大きいか？)
// temperatureは20なので、20 > 25 は偽（false）です。
console.log(“今日は暑いですね！”); // この行は実行されません。
}

console.log(“天気の話でした。”); // この行は条件に関わらず実行されます。
“`

このコードを実行すると、コンソールには以下のように表示されます。

天気の話でした。

temperatureが20なので、temperature > 25という条件式はfalseとなります。そのため、ifブロックの中のconsole.log("今日は暑いですね！");はスキップされ、if文の次の行から処理が再開されたのがわかります。

これがif文の基本的な仕組みです。「条件が満たされたらだけ何かをする」という場合にif文を使います。

3. 「そうでなければ」の処理：else文

if文だけでは、「条件が真だった場合」の処理しか記述できません。しかし多くの場合、「条件が真だった場合」と「条件が偽だった場合」で、それぞれ異なる処理を行いたいことがあります。

このような「そうでなければ（＝条件が偽だった場合）」の処理を指定するためにelse文を使います。

else文の仕組みと考え方

else文は単独では使えません。必ず直前のif文（またはelse if文）とセットで使われます。

考え方としては、「もし〜ならAの処理、そうでなければBの処理」となります。

日常生活では、「もし雨が降っていたら、傘を持っていく。そうでなければ、日傘を持っていく（または何も持っていかない）」といった判断に相当します。

if文とelse文を組み合わせる

if文とelse文を組み合わせることで、「二者択一」の条件分岐を作成できます。条件式が真であればifブロックの処理が実行され、条件式が偽であればelseブロックの処理が実行されます。どちらか一方のブロックのみが実行されます。

if/else文の基本的な書き方（構文）

if文とelse文を組み合わせた構文は以下のようになります。

javascript
if (条件式) {
// 条件式が真（true）だった場合に実行される処理
} else {
// 条件式が偽（false）だった場合に実行される処理
}

• if (条件式) { ... }: これは先ほど学んだif文と同じです。
• else: ifブロックの直後にelseキーワードを記述します。
• {}: elseキーワードの後のブロックです。このブロックの中には、ifの条件式が偽（false）だった場合に実行したい処理を書きます。

if/else文の動作フロー

if/else文の動作の流れは以下のようになります。

1. プログラムがif/else文に到達する。
2. (条件式) の中の式を評価する。
3. 評価結果が 真（true） か 偽（false） かを判断する。
4. 真（true） だった場合：ifブロックの中の処理を実行する。elseブロックの中の処理はスキップされる。
5. 偽（false） だった場合：ifブロックの中の処理はスキップされる。elseブロックの中の処理を実行する。
6. どちらかのブロックの処理が終わったら、if/else文全体の次の行に進む。

フローチャートで描くと以下のようになります。

mermaid
graph TD
A[プログラム開始] --> B{条件式は真か？};
B -- 真 --> C[条件が真の場合の処理];
C --> D[if/else文の次へ];
B -- 偽 --> E[条件が偽の場合の処理];
E --> D;
D[処理終了];

if/else文の例

ユーザーのログイン状態をチェックする例を見てみましょう。

“`javascript
let isLoggedIn = true; // ログイン状態を示す変数。今回はtrue（ログイン済み）とします。

if (isLoggedIn) {
// 条件式: isLoggedIn (isLoggedInがtrueか？)
// isLoggedInはtrueなので、この条件式は真（true）です。
console.log(“ようこそ、会員限定ページへ！”); // この行が実行されます。
} else {
// isLoggedInがfalseだった場合に実行される処理
console.log(“ログインしてください。”); // この行は実行されません。
}

console.log(“処理が終了しました。”); // この行は条件に関わらず実行されます。
“`

このコードを実行すると、コンソールには以下のように表示されます。

ようこそ、会員限定ページへ！
処理が終了しました。

isLoggedInがtrueなので、ifブロックが実行されました。

次に、isLoggedInをfalseに変えてみましょう。

“`javascript
let isLoggedIn = false; // ログイン状態を示す変数。今回はfalse（未ログイン）とします。

if (isLoggedIn) {
// 条件式: isLoggedIn (isLoggedInがtrueか？)
// isLoggedInはfalseなので、この条件式は偽（false）です。
console.log(“ようこそ、会員限定ページへ！”); // この行は実行されません。
} else {
// isLoggedInがfalseだった場合に実行される処理
console.log(“ログインしてください。”); // この行が実行されます。
}

console.log(“処理が終了しました。”); // この行は条件に関わらず実行されます。
“`

このコードを実行すると、コンソールには以下のように表示されます。

ログインしてください。
処理が終了しました。

isLoggedInがfalseなので、ifブロックはスキップされ、elseブロックが実行されたのがわかります。

このように、ifとelseを使うことで、「〜ならばA、そうでなければB」という二者択一の判断をプログラムにさせることができます。

4. 複数の条件を扱う：else if文

if文は単一の条件、if/else文は二者択一の条件分岐を扱えました。しかし、現実世界では条件が3つ以上ある場合も頻繁に起こります。

例えば、テストの点数に応じて評価を変える場合：

• 90点以上なら「優」
• 80点以上90点未満なら「良」
• 70点以上80点未満なら「可」
• それ未満なら「不可」

このような複数の条件を順番にチェックし、最初に一致した条件に対応する処理を実行したい場合にelse if文を使います。

なぜelse ifが必要なのか？

ifとelseだけでは、上記のような複数の段階的な条件を効率的に表現できません。もしelse ifがないと、if文をネスト（入れ子）にするか、複数の独立したif文を使うことになります。

ネストの例（ちょっと複雑で見にくい）:
javascript
let score = 85;
if (score >= 90) {
console.log("優");
} else { // 90点未満の場合
if (score >= 80) {
console.log("良"); // 80点以上90点未満の場合
} else { // 80点未満の場合
if (score >= 70) {
console.log("可"); // 70点以上80点未満の場合
} else { // 70点未満の場合
console.log("不可");
}
}
}
このように、ネストが深くなるとコードが読みにくく、間違いやすくなります。

独立したif文の例（無駄なチェックが発生する可能性）:
javascript
let score = 85;
if (score >= 90) { // 評価1
console.log("優");
}
if (score >= 80 && score < 90) { // 評価2
console.log("良"); // この条件は真になる
}
if (score >= 70 && score < 80) { // 評価3
console.log("可"); // この条件は偽になる
}
if (score < 70) { // 評価4
console.log("不可"); // この条件は偽になる
}
この書き方でも意図した結果を得られる場合もありますが、効率的ではありません。特に、ある条件が満たされたら他の条件はチェックする必要がない、というケースで無駄なチェックが発生します。また、もし条件が重複していたり、漏れがあったりすると、複数の結果が表示されたり、何も表示されなかったりする可能性があります。

else ifを使うと、これらの問題を解決し、複数の条件をより構造的に、効率的に記述できます。

else if文の仕組みと考え方

else ifは、「直前のifやelse ifの条件がすべて偽だった場合、もしも、この新しい条件が真ならば、この処理を実行しなさい」と指示します。

これは、「もしAならば処理1。そうでなくて、もしBならば処理2。そうでなくて、もしCならば処理3。…そして、これまでのどの条件も真でなかったならば、最後の処理Z」という判断の流れに相当します。

if、else if、elseを組み合わせる

else ifは、最初のif文の後にいくつでも繋げることができます。そして、最後にelse文（オプション）を付けることで、どの条件にも当てはまらなかった場合の「その他の場合」の処理を指定できます。

構文は以下のようになります。

javascript
if (条件式1) {
// 条件式1が真の場合に実行される処理
} else if (条件式2) {
// 条件式1が偽で、かつ条件式2が真の場合に実行される処理
} else if (条件式3) {
// 条件式1と2が偽で、かつ条件式3が真の場合に実行される処理
// ... 必要なだけ else if を続ける ...
} else {
// 上記すべての条件式が偽だった場合に実行される処理
}

• 最初のifは必須です。
• else ifは0個以上記述できます。
• 最後のelseはオプションです（省略可能です）。最後のelseがない場合、どの条件にも当てはまらなかったときは何も処理が実行されず、文全体の次の行に進みます。

if/else if/else文の動作フロー：上から順番に評価される仕組みが重要！

if/else if/else文の動作フローは非常に重要です。

1. プログラムがif/else if/else文の先頭に到達する。
2. 最初の(条件式1)を評価する。
3. 真（true） だった場合：ifブロックの処理を実行する。他のelse ifやelseの条件式は一切評価されず、対応するブロックの処理もスキップされる。 if文全体の次の行に進む。
4. 偽（false） だった場合：最初のifブロックの処理はスキップされる。次の(条件式2)を評価する。
5. (条件式2)が 真（true） だった場合：else if (条件式2)のブロックの処理を実行する。他の以降のelse ifやelseの条件式は一切評価されず、対応するブロックの処理もスキップされる。 if文全体の次の行に進む。
6. (条件式2)が 偽（false） だった場合：else if (条件式2)のブロックの処理はスキップされる。さらに次の(条件式3)を評価する。（以降、この繰り返し）
7. すべてのifおよびelse ifの条件式が偽（false）だった場合、そして最後にelseブロックが存在する場合：elseブロックの処理を実行する。if文全体の次の行に進む。
8. すべてのifおよびelse ifの条件式が偽（false）だった場合、そして最後にelseブロックが存在しない場合：何も処理が実行されず、if文全体の次の行に進む。

重要なのは、条件式は上から順番に評価され、最初に真（true）になった条件に対応するブロックだけが実行され、その時点で条件分岐の処理全体が終了するという点です。

フローチャートで描くと以下のようになります。

mermaid
graph TD
A[プログラム開始] --> B{条件式1は真か？};
B -- 真 --> C[条件1の処理];
C --> G[if/else if/else文の次へ];
B -- 偽 --> D{条件式2は真か？};
D -- 真 --> E[条件2の処理];
E --> G;
D -- 偽 --> F{条件式3は真か？}; // ... 必要なだけ else if を繋げる
F -- 真 --> H[条件3の処理];
H --> G;
F -- 偽 --> I[どの条件も偽の場合の処理(else)]; // else はオプション
I --> G;
G[処理終了];
（フローチャートは簡略化されています）

if/else if/else文の例（段階的な条件）

テストの点数による評価の例をコードにしてみましょう。

“`javascript
let score = 75; // テストの点数

if (score >= 90) {
// 条件1: score >= 90 (90点以上か？)
console.log(“評価: 優”);
} else if (score >= 80) {
// 条件2: score >= 80 (80点以上か？)
// ここに到達するのは、score >= 90 が偽だった場合、つまり 90点未満の場合です。
// なので、この条件が真になるのは、80点以上 かつ 90点未満 の場合です。
console.log(“評価: 良”);
} else if (score >= 70) {
// 条件3: score >= 70 (70点以上か？)
// ここに到達するのは、score >= 90 と score >= 80 が両方とも偽だった場合です。
// つまり、80点未満の場合です。
// なので、この条件が真になるのは、70点以上 かつ 80点未満 の場合です。
console.log(“評価: 可”);
} else {
// 上記すべての条件が偽だった場合
// つまり、70点未満の場合です。
console.log(“評価: 不可”);
}

console.log(“評価処理が終了しました。”);
“`

scoreが75の場合の動作を追ってみましょう。

1. if (score >= 90): 75 >= 90 は偽（false）です。
2. else if (score >= 80): 75 >= 80 は偽（false）です。
3. else if (score >= 70): 75 >= 70 は真（true）です。この条件が最初に真になったので、このブロック内の処理が実行されます。
   • console.log("評価: 可"); が実行されます。
4. この時点で条件分岐全体が終了し、elseブロックはスキップされます。
5. if/else if/else文全体の次の行、console.log("評価処理が終了しました。");が実行されます。

結果として、コンソールには以下のように表示されます。

評価: 可
評価処理が終了しました。

もしscoreが95なら？
1. if (score >= 90): 95 >= 90 は真（true）です。このブロックが実行され、「評価: 優」と表示されます。
2. 以降のelse ifやelseは一切評価されずスキップされます。
3. 「評価処理が終了しました。」が表示されます。

もしscoreが60なら？
1. if (score >= 90): 偽
2. else if (score >= 80): 偽
3. else if (score >= 70): 偽
4. すべてのif/else ifが偽だったので、最後のelseブロックが実行され、「評価: 不可」と表示されます。
5. 「評価処理が終了しました。」が表示されます。

else ifはいくつでも使える

必要に応じて、else ifはいくつでも連ねて使うことができます。例えば、もっと細かく10点刻みで評価を変えるなど。

“`javascript
let level = 5;

if (level === 1) {
console.log(“初心者”);
} else if (level === 2) {
console.log(“入門”);
} else if (level === 3) {
console.log(“中級”);
} else if (level === 4) {
console.log(“上級”);
} else if (level === 5) {
console.log(“エキスパート”); // levelが5なのでこれが実行される
} else {
console.log(“不明なレベル”);
}
“`

最後のelseは必須ではない

先述したように、最後のelseブロックは必須ではありません。特定の条件にだけ反応したい場合、elseを省略できます。

“`javascript
let count = 5;

if (count > 10) {
console.log(“数が大きすぎます。”);
} else if (count < 0) {
console.log(“数は負の値です。”);
}
// countが0から10の間の場合、どの条件も偽になり、何も出力されません。
// 最後の else がないので、特定の処理は行われません。

console.log(“チェック終了”);
``
この例では、count`が5なので、どの条件にも当てはまらず、何も警告メッセージは表示されません。最終的に「チェック終了」だけが表示されます。

5. 条件式の作り方：比較演算子を使いこなす

ifやelse ifの括弧 () の中に書く「条件式」は、プログラムが真偽を判断するために最も重要な部分です。条件式は、評価されると必ず真（true）または偽（false）のどちらかの論理値（Boolean値）になります。

条件式とは？

条件式は、多くの場合、変数や値同士を比較したり、複数の条件を組み合わせたりして作られます。例えば、

• temperature > 25 （温度が25より大きいか？）
• isLoggedIn === true （ログイン済みであるか？）
• score >= 70 && score < 80 （点数が70以上かつ80未満か？）

これらはすべて条件式です。JavaScriptがこれらの式を評価すると、その時点での値に基づいてtrueかfalseかが決まります。

真（true）と偽（false）

JavaScriptには、trueとfalseという特別な値があります。これらは論理値と呼ばれ、真偽を表します。条件分岐では、この論理値が非常に重要になります。

• true: 条件が満たされている状態
• false: 条件が満たされていない状態

代表的な比較演算子

値同士を比較して条件式を作る際によく使うのが「比較演算子」です。

演算子	意味	例	結果 （例が真の場合）
==	等しい（抽象的な比較）	5 == '5'	true
!=	等しくない（抽象的な比較）	5 != '5'	false
===	厳密に等しい（厳密な比較）	5 === '5'	false
!==	厳密に等しくない（厳密な比較）	5 !== '5'	true
>	より大きい	10 > 5	true
<	より小さい	5 < 10	true
>=	より大きい、または等しい	5 >= 5	true
<=	より小さい、または等しい	5 <= 5	true

それぞれの演算子について詳しく見ていきましょう。

• == (等しい)
  値が等しいかを比較します。異なる型の値を比較する場合、JavaScriptは可能な限り型を変換（型強制/型変換）してから比較を行います。 これが後述する===との重要な違いです。

  javascript
console.log(10 == 10); // true (数値と数値)
console.log('hello' == 'hello'); // true (文字列と文字列)
console.log(true == true); // true (論理値と論理値)
console.log(5 == '5'); // true (数値と文字列 - 文字列'5'が数値5に変換される)
console.log(0 == false); // true (数値0がfalseに変換される)
console.log(null == undefined); // true (特別なケース)

• != (等しくない)
  値が等しくないかを比較します。==の逆の結果になります。こちらも型変換が行われます。

  javascript
console.log(10 != 5); // true
console.log('hello' != 'world'); // true
console.log(5 != '5'); // false (型変換されて等しくなるため)
console.log(0 != false); // false (型変換されて等しくなるため)
console.log(null != undefined); // false (型変換されて等しくなるため)

• === (厳密に等しい)
  値が等しいかつデータ型も同じかを比較します。型変換は行われません。 JavaScriptでは、予期しない型変換によるバグを防ぐため、通常はこちらの厳密等価演算子===を使うことが推奨されます。

  javascript
console.log(10 === 10); // true
console.log('hello' === 'hello'); // true
console.log(true === true); // true
console.log(5 === '5'); // false (値は同じだが、型が異なるため - number vs string)
console.log(0 === false); // false (値は異なる - number 0 vs boolean false)
console.log(null === undefined); // false (異なる型のため)

• !== (厳密に等しくない)
  値が等しくないまたはデータ型が異なるかを比較します。===の逆の結果になります。こちらも型変換は行われません。===と同様、安全な比較のためによく使われます。

  javascript
console.log(10 !== 5); // true
console.log('hello' !== 'world'); // true
console.log(5 !== '5'); // true (型が異なるため)
console.log(0 !== false); // true (型が異なるため)
console.log(null !== undefined); // true (型が異なるため)

• > (より大きい)
  左辺が右辺より大きいかを比較します。数値以外を比較する場合、JavaScriptは内部的に型変換を試みることがあります（文字列の場合は辞書順比較など、注意が必要な場合もありますが、基本的には数値として比較できるか試みます）。

  javascript
console.log(10 > 5); // true
console.log(5 > 10); // false
console.log(10 > 10); // false
console.log('b' > 'a'); // true (文字列の辞書順比較)
console.log(10 > '5'); // true (文字列'5'が数値5に変換されて比較される)

• < (より小さい)
  左辺が右辺より小さいかを比較します。

  javascript
console.log(5 < 10); // true
console.log(10 < 5); // false
console.log(5 < 5); // false

• >= (より大きい、または等しい)
  左辺が右辺より大きいか、または等しいかを比較します。

  javascript
console.log(10 >= 5); // true
console.log(5 >= 5); // true
console.log(5 >= 10); // false

• <= (より小さい、または等しい)
  左辺が右辺より小さいか、または等しいかを比較します。

  javascript
console.log(5 <= 10); // true
console.log(5 <= 5); // true
console.log(10 <= 5); // false

重要！ == と === の違い：型変換の落とし穴

JavaScript初心者が最もつまずきやすい点の一つが、== (抽象的な比較) と === (厳密な比較) の違いです。

==は、比較する2つの値の型が異なる場合、JavaScriptが「よしなに」型を変換しようと試みます。この「よしなに」が曲者で、意図しない結果になることがあります。

例:
javascript
console.log(5 == '5'); // true （文字列'5'が数値5に変換されてから比較）
console.log(0 == false); // true （数値0がfalseに変換されてから比較）
console.log('' == false); // true （空文字列''がfalseに変換されてから比較）
console.log(null == undefined); // true （特別なルール）

一方、===は型変換を一切行いません。値と型の両方が一致しないとtrueにはなりません。

例:
javascript
console.log(5 === '5'); // false （型が異なるため）
console.log(0 === false); // false （型が異なるため）
console.log('' === false); // false （型が異なるため）
console.log(null === undefined); // false （型が異なるため）

予期しない型変換によるバグを防ぐためには、特別な理由がない限り、比較には===と!==を使用することを強く推奨します。 これらは「厳密等価演算子」または「厳密比較演算子」と呼ばれます。

比較演算子の例

変数を使って比較演算子を使った条件式を作ってみましょう。

“`javascript
let age = 20;
let requiredAge = 18;
let userName = “Alice”;
let inputName = “Alice”;
let price = 1000;
let minPriceForFreeShipping = 5000;

if (age >= requiredAge) { // 20 >= 18 は true
console.log(“対象年齢です。”);
}

if (userName === inputName) { // “Alice” === “Alice” は true
console.log(“ユーザー名が一致しました。”);
}

if (price < minPriceForFreeShipping) { // 1000 < 5000 は true
console.log(“送料無料まであと ” + (minPriceForFreeShipping – price) + “円です。”);
}

let status = null;
if (status == undefined) { // null == undefined は true (型変換される)
console.log(“状態は未設定です。(==の場合)”);
}

if (status === undefined) { // null === undefined は false (型変換されない)
console.log(“状態は未設定です。(===の場合)”); // この行は実行されない
}
“`

このように、比較演算子を使って様々な条件式を作成し、ifやelse ifの条件として利用できます。

6. 複数の条件を組み合わせる：論理演算子

時には、「Aという条件も満たしていて、かつBという条件も満たしている」とか、「Aという条件か、あるいはBという条件のどちらかを満たしていれば良い」といった、複数の条件を組み合わせて一つの大きな条件としたい場合があります。

このような場合に使うのが「論理演算子」です。論理演算子は、真（true）と偽（false）の値（または真偽とみなせる値）を組み合わせて、新しい真偽の値を作り出します。

論理演算子とは？

論理演算子は、論理値（trueやfalse）に対して、AND、OR、NOTといった論理的な操作を行います。

代表的な論理演算子

演算子	意味	説明	例	結果
&&	AND (論理積)	左辺と右辺の両方が真の場合に真	true && true	true
		それ以外は偽	true && false	false
			false && true	false
			false && false	false
||	OR (論理和)	左辺または右辺の少なくとも一方が真の場合に真	true || true	true
		両方が偽の場合に偽	true || false	true
			false || true	true
			false || false	false
!	NOT (論理否定)	真を偽に、偽を真に反転する	!true	false
			!false	true

それぞれの演算子について詳しく見ていきましょう。

• && (AND / 論理積)
  条件A && 条件B のように使います。条件Aも条件Bも両方がtrueの場合にのみ、式全体の結果がtrueになります。どちらか一方でもfalseであれば、結果はfalseです。

  “`javascript
  let isStudent = true;
  let isAdult = true;

  if (isStudent && isAdult) {
  console.log(“学生かつ成人です。”); // isStudentもisAdultもtrueなので、これが実行される
  }

  let isLoggedIn = true;
  let isAdmin = false;

  if (isLoggedIn && isAdmin) {
  console.log(“ログイン済みの管理者です。”); // isAdminがfalseなので、これは実行されない
  }
  ``&&演算子には「短絡評価 (Short-circuit evaluation)」という特徴があります。左辺の条件がfalseだった場合、右辺の条件を評価することなく、式全体の結果をfalse`と確定します。これは、効率化や、右辺の評価がエラーになる可能性を防ぐために利用されることがあります。

• || (OR / 論理和)
  条件A || 条件B のように使います。条件Aと条件Bの少なくとも一方がtrueであれば、式全体の結果がtrueになります。両方がfalseの場合にのみ、結果がfalseになります。

  “`javascript
  let isWeekend = true;
  let isHoliday = false;

  if (isWeekend || isHoliday) {
  console.log(“週末または祝日です。”); // isWeekendがtrueなので、これが実行される
  }

  let isRegisteredUser = false;
  let isGuest = true;

  if (isRegisteredUser || isGuest) {
  console.log(“登録ユーザーまたはゲストです。”); // isGuestがtrueなので、これが実行される
  }

  let hasPermission = false;
  let hasAdminRight = false;

  if (hasPermission || hasAdminRight) {
  console.log(“アクセス権があります。”); // どちらもfalseなので、これは実行されない
  }
  ``||演算子にも短絡評価があります。左辺の条件がtrueだった場合、右辺の条件を評価することなく、式全体の結果をtrue`と確定します。

• ! (NOT / 論理否定)
  !条件A のように使います。条件の結果を反転させます。trueをfalseに、falseをtrueにします。

  “`javascript
  let isRaining = false;

  if (!isRaining) { // !false は true
  console.log(“雨は降っていません。”); // これが実行される
  }

  let isCompleted = true;

  if (!isCompleted) { // !true は false
  console.log(“完了していません。”); // これは実行されない
  }
  “`

論理演算子の組み合わせ例

複数の論理演算子や比較演算子を組み合わせて、より複雑な条件式を作ることができます。

“`javascript
let age = 25;
let income = 300; // 単位: 万円
let isResident = true;

// 年齢が20歳以上 かつ 収入が400万円以上の場合
if (age >= 20 && income >= 400) {
console.log(“高所得層の成人です。”); // age >= 20 はtrueだが、income >= 400 はfalse。true && false なので偽。
}

// 年齢が18歳未満 または 居住者ではない場合
if (age < 18 || !isResident) {
console.log(“未成年または非居住者です。”); // age < 18 はfalse、!isResident (!true) はfalse。false || false なので偽。
}

let score = 85;
let attendanceRate = 90;

// スコアが80点以上 かつ 出席率が85%以上 の場合
if (score >= 80 && attendanceRate >= 85) { // true && true なので真
console.log(“優秀な成績です。”); // これが実行される
}
“`

括弧 () を使って条件の優先順位を明確にする

複雑な条件式を書く場合、論理演算子や比較演算子にはそれぞれ優先順位がありますが、括弧 () を使うことで、どの部分を先に評価してほしいかを明確にできます。これは可読性を高め、意図しない間違いを防ぐために非常に重要です。

例：
「(年齢が60歳以上 または 学生である) かつ 定期的な会員である」という条件を書きたい場合。

“`javascript
let age = 65;
let isStudent = false;
let isRegularMember = true;

// 括弧を使わないと意図が分かりにくい、または優先順位を間違える可能性がある
// if (age >= 60 || isStudent && isRegularMember) { … }
// 論理演算子の && は || より優先順位が高いので、これは age >= 60 || (isStudent && isRegularMember) と解釈されます。
// この例では age が65なので、age >= 60 が true となり、結果は true になりますが、
// もし age が50で isStudent が false, isRegularMember が true だったら、
// 50 >= 60 || false && true -> false || false -> false となり意図通りになります。
// しかし、ageが50で isStudentがtrue, isRegularMemberがtrue だったら
// 50 >= 60 || true && true -> false || true -> true となり意図通りになります。
// 優先順位通りに評価されるので、括弧がなくても結果は同じですが、意図を明確にするために括弧を使うべきです。

// 括弧を使って意図を明確にする
if ((age >= 60 || isStudent) && isRegularMember) {
// (age >= 60 || isStudent) は (true || false) なので true
// (true) && isRegularMember は true && true なので true
console.log(“割引対象の会員です。”); // これが実行される
}
“`
このように括弧を使うことで、「年齢が60歳以上か学生のどちらかである」という条件のまとまりと、「定期的な会員である」という条件を、論理積（AND）で結合していることが明確になります。

複雑な条件式では、迷ったら括弧を使うようにしましょう。

7. 条件分岐の応用テクニック

if、else if、elseと、比較演算子、論理演算子を組み合わせることで、ほとんどの条件分岐は記述できます。ここでは、さらにいくつかの応用テクニックや関連する概念を紹介します。

ブロック文 {} の重要性：複数行の処理

先ほどからifやelseの後に{}（波括弧）を使ってきましたが、これは「ブロック文」と呼ばれ、複数の文をひとまとまりにする役割があります。

条件が真だった場合、{} ブロックの中のすべての処理が上から順に実行されます。

“`javascript
let stock = 5;
let orderQuantity = 3;

if (stock >= orderQuantity) {
// ブロックの中には複数の処理が書ける
console.log(“在庫があります。”);
stock = stock – orderQuantity; // 在庫を減らす処理
console.log(“注文を処理しました。現在の在庫: ” + stock);
} else {
// こちらのブロックも複数行が可能
console.log(“在庫が不足しています。”);
console.log(“注文できませんでした。”);
}
“`

単一行の処理における {} の省略（非推奨）

もしifやelse、else ifの後に実行したい処理が単一行だけであれば、実は{}を省略して書くことも文法上は可能です。

“`javascript
let isComplete = false;

if (isComplete)
console.log(“完了しました。”); // 単一行なので {} を省略
else
console.log(“未完了です。”); // 単一行なので {} を省略
“`

しかし、この書き方は非推奨です。なぜなら、後からブロックの中に処理を追加する際に{}を書き忘れたり、見た目と実際の動作が一致しなくなったりして、バグの原因になりやすいためです。

例：
“`javascript
let debugMode = true;
let dataReady = false;

if (debugMode)
console.log(“デバッグモードです。”); // ここまではOK
console.log(“データの準備状況: ” + dataReady); // これは if 文の範囲外として常に実行される！
``
このコードは、debugModeがtrueでもfalseでも、二行目のconsole.logは常に実行されてしまいます。見た目ではif`ブロックの中にあるように見えてしまうため、非常に紛らわしいです。

常に{}を付ける習慣をつけましょう。これは、コードの可読性と安全性を高めるためのベストプラクティスです。

“`javascript
let debugMode = true;
let dataReady = false;

if (debugMode) { // 常にブロックを使う！
console.log(“デバッグモードです。”);
console.log(“データの準備状況: ” + dataReady); // これなら debugMode が true の時だけ実行される
}
“`

条件分岐のネスト（入れ子構造）

ifやelse if、elseのブロックの中に、さらに別の条件分岐を書くことができます。これを「ネスト」（入れ子）と呼びます。

“`javascript
let isUser = true;
let isAdmin = false;

if (isUser) {
console.log(“ユーザーとしてログインしています。”);
if (isAdmin) { // ネストされたif文
console.log(“あなたは管理者です。”); // isUserはtrueだが、isAdminはfalseなので、ここは実行されない
} else {
console.log(“あなたは一般ユーザーです。”); // isAdminがfalseなので、ここが実行される
}
} else {
console.log(“ログインしていません。”);
}
“`
この例では、まず「ユーザーとしてログインしているか？」をチェックし、ログインしている場合に限って「管理者か一般ユーザーか？」をさらにチェックしています。

ネストは複雑な条件を表現するのに便利ですが、深くしすぎるとコードが読みにくくなり、ロジックを追うのが難しくなります。ネストが3段階を超えるような場合は、処理を関数に分けるなど、コードの構造を見直すことを検討しましょう。

Truthy（真とみなされる値）と Falsy（偽とみなされる値）

JavaScriptの条件式は、厳密にはtrueかfalseの論理値である必要はありません。JavaScriptでは、論理値以外の値も、条件文のコンテキスト（状況）では自動的に真偽とみなされます。

• Falsy（偽とみなされる値）: 条件式として使われるとfalseと評価される値。JavaScriptには以下の6つのFalsyな値があります。

  • false (論理値の偽そのもの)
  • 0 (数値のゼロ)
  • '' (空文字列)
  • null
  • undefined
  • NaN (Not a Number)

• Truthy（真とみなされる値）: 上記のFalsyな値以外のすべての値は、条件式として使われるとtrueと評価されます。

  • true
  • 1, -1, 42 など、ゼロ以外の数値
  • 'hello', ' ' (空白文字含む) など、空でない文字列
  • [] (空の配列)
  • {} (空のオブジェクト)
  • 関数
  • など

例：
“`javascript
let myVariable = “何か値が入っています”; // 空文字列ではない
if (myVariable) { // myVariable は Truthy なので true と評価される
console.log(“myVariableには値が入っています。”); // これが実行される
}

let count = 0;
if (count) { // count は 0 なので Falsy なので false と評価される
console.log(“countはゼロ以外です。”); // これは実行されない
} else {
console.log(“countはゼロです。”); // これが実行される
}

let myList = []; // 空の配列
if (myList) { // 空の配列は Truthy なので true と評価される (注意が必要！)
console.log(“リストは存在します。(空でもTruthy)”); // これが実行される
}

let myNull = null;
if (myNull) { // myNull は null なので Falsy なので false と評価される
console.log(“myNullはnullではありません。”); // これは実行されない
}
``
このTruthy/Falsyの性質を利用して、変数が「値を持っているか？」（null,undefined, 空文字列, 0 ではないか？）のようなチェックを簡潔に書くことができます。ただし、意図を明確にするために、変数 !== null && 変数 !== undefined && 変数 !== ”のように明示的に書く方が良い場合もあります。空の配列[]や空のオブジェクト{}`がTruthyになる点は誤解しやすいので注意が必要です。

簡単な条件分岐の別表現：三項演算子 ? :

if/else文で、条件によって変数の値を変えるだけとか、特定の値を返すだけのような、非常にシンプルな二者択一の処理を行う場合、「三項演算子」という別の構文を使うと、より簡潔に記述できることがあります。

構文：
条件式 ? 条件式が真の場合の値 : 条件式が偽の場合の値

例：
“`javascript
let age = 20;
let message;

if (age >= 18) {
message = “成人です。”;
} else {
message = “未成年です。”;
}
console.log(message); // 出力: 成人です。

// 上記と全く同じ処理を三項演算子で書くと
let age2 = 20;
let message2 = (age2 >= 18) ? “成人です。” : “未成年です。”;
console.log(message2); // 出力: 成人です。
“`

別の例：
“`javascript
let price = 1200;
let isMember = true;

let finalPrice = isMember ? price * 0.9 : price;
console.log(“最終価格: ” + finalPrice + “円”); // 会員なので 1200 * 0.9 = 1080 が finalPrice に代入される
“`

三項演算子は、主に「条件によって値を切り替えたい」場合に便利です。ただし、あまり複雑な処理を書こうとすると、かえって読みにくくなるため、シンプルな条件分岐に限って使うのが良いでしょう。if/else if/elseのように複数の処理を実行する場合や、複数の条件を段階的にチェックする場合には適していません。

複数の厳密な等価比較には switch文も検討する（if/else ifとの比較）

if/else ifのチェーンで、一つの変数や式の値が、複数の固定値のどれかに厳密に等しいかをチェックするような場合、switch文を使うこともできます。

例：ある日の曜日によってメッセージを変える

“`javascript
let dayOfWeek = “火曜日”;

// if/else if で書く場合
if (dayOfWeek === “月曜日”) {
console.log(“新しい週の始まりです！”);
} else if (dayOfWeek === “火曜日”) {
console.log(“頑張りましょう！”);
} else if (dayOfWeek === “水曜日”) {
console.log(“週の真ん中です。”);
} else if (dayOfWeek === “木曜日”) {
console.log(“あと少し！”);
} else if (dayOfWeek === “金曜日”) {
console.log(“もうすぐ週末！”);
} else {
console.log(“週末です！”);
}

// switch 文で書く場合
let dayOfWeekSwitch = “火曜日”;

switch (dayOfWeekSwitch) {
case “月曜日”:
console.log(“新しい週の始まりです！”);
break; // break を忘れない！
case “火曜日”:
console.log(“頑張りましょう！”); // dayOfWeekSwitch が “火曜日” なのでここが実行される
break;
case “水曜日”:
console.log(“週の真ん中です。”);
break;
case “木曜日”:
console.log(“あと少し！”);
break;
case “金曜日”:
console.log(“もうすぐ週末！”);
break;
default: // どの case にも一致しなかった場合
console.log(“週末です！”);
}
“`

switch文は、一つの値を複数のcase（ケース、候補となる値）と比較するのに特化しています。caseに一致したブロックが実行され、break文でswitch文から抜け出します。breakを忘れると、次のcaseの処理も続けて実行されてしまう（フォールスルー）ので注意が必要です。どのcaseにも一致しなかった場合は、オプションのdefaultブロックが実行されます。

switch文がif/else ifチェーンよりも適しているのは、以下のような場合です。

• 比較する値が一つの変数または式である。
• 比較方法が厳密な等価比較 (===に相当) である。
• 比較するcaseの数が比較的多い。

範囲チェック（例: score >= 80 && score < 90）や、複数の変数を使った複雑な条件 (isLoggedIn && isAdmin) の場合は、if/else ifを使う必要があります。どちらを使うかは、コードの可読性や意図に応じて判断すると良いでしょう。一般的には、上記のような等価比較が多い場合はswitchの方が読みやすいとされます。

8. 実践的な例で理解を深める

これまでに学んだif、else if、else、比較演算子、論理演算子を使って、もう少し実践的な例を見ていきましょう。

例1：時間帯に応じた挨拶の表示

現在の時間（時）を取得して、挨拶を変えるプログラムです。

“`javascript
// 現在時刻を取得
const now = new Date(); // Dateオブジェクトを作成
const hour = now.getHours(); // 現在の「時」（0〜23）を取得

let greeting; // 挨拶メッセージを入れる変数

if (hour < 12) {
// 0時から11時まで（午前中）
greeting = “おはようございます！”;
} else if (hour < 18) {
// 12時から17時まで（午後、夕方前）
greeting = “こんにちは！”;
} else {
// 18時から23時まで（夕方以降）
greeting = “こんばんは！”;
}

console.log(greeting); // 挨拶を表示
console.log(“現在の時刻は” + hour + “時です。”);
“`

• now.getHours()で現在の「時」を数値で取得します。
• 最初のifでhour < 12をチェックし、真なら「おはようございます」とします。
• 偽なら（12時以降なら）、次のelse ifでhour < 18をチェックします。これは「12時以降かつ18時未満」という意味になり、真なら「こんにちは」とします。
• どちらも偽なら（18時以降なら）、最後のelseブロックの「こんばんは」が実行されます。

このように、時間帯のような段階的な条件判定にif/else if/elseが適しています。

例2：ユーザーの年齢によるアクセス制限

ウェブサイトなどで、年齢によってアクセスできるコンテンツを制限する場合を考えます。

“`javascript
let userAge = 16;
const MIN_AGE = 18;
const PARENTAL_CONSENT_AGE = 16; // 保護者の同意があれば許可する年齢

if (userAge >= MIN_AGE) {
// 必要な年齢に達している場合
console.log(“アクセスを許可します。全てのコンテンツが閲覧可能です。”);
} else if (userAge >= PARENTAL_CONSENT_AGE) {
// 必要な年齢には達していないが、保護者同意があれば許可する年齢に達している場合
// ここに到達するのは userAge < MIN_AGE (18未満) かつ userAge >= PARENTAL_CONSENT_AGE (16以上) の場合
console.log(“一部コンテンツへのアクセスを許可します。（保護者の同意が必要です）”);
} else {
// 上記どちらの条件も満たさない場合（保護者同意の年齢にも達していない）
// ここに到達するのは userAge < PARENTAL_CONSENT_AGE (16未満) の場合
console.log(“アクセスは許可されません。”);
}
“`

• まず、最も厳しい条件であるMIN_AGE以上の年齢かをチェックします。
• それに満たない場合、次に緩やかな条件であるPARENTAL_CONSENT_AGE以上かをチェックします。
• どちらの条件にも当てはまらない（つまりPARENTAL_CONSENT_AGE未満）場合は、最後のelseでアクセス拒否となります。

条件の順番が重要であることがここでもわかります。もしuserAge >= PARENTAL_CONSENT_AGEを先にチェックしてしまうと、18歳以上の人もこの条件に当てはまってしまい、正しく判定できません。より厳しい条件を先に置くのが一般的なパターンです。

例3：商品の割引率計算

購入金額によって割引率を変える場合を考えます。

“`javascript
let purchaseAmount = 7500; // 購入金額
let discountRate = 0; // 割引率（初期値は0%）

if (purchaseAmount >= 10000) {
// 10000円以上の場合
discountRate = 0.1; // 10%引き
} else if (purchaseAmount >= 5000) {
// 10000円未満で、かつ5000円以上の場合（つまり5000円以上10000円未満）
discountRate = 0.05; // 5%引き
} else {
// どちらの条件も満たさない場合（5000円未満）
discountRate = 0; // 割引なし
}

let finalPrice = purchaseAmount * (1 – discountRate); // 最終価格を計算

console.log(“購入金額: ” + purchaseAmount + “円”);
console.log(“割引率: ” + (discountRate * 100) + “%”);
console.log(“最終価格: ” + finalPrice + “円”);
“`

• purchaseAmountが10000以上かを最初にチェックし、該当すれば割引率を0.1（10%）に設定します。
• 該当しない場合、次に5000以上かをチェックし、該当すれば割引率を0.05（5%）に設定します。
• どちらにも該当しない場合（5000円未満）、割引率は初期値の0%のままになります。

このように、計算結果に影響を与える値を、条件分岐を使って動的に決定することもよく行われます。

9. if、else if、elseを使う上での注意点とベストプラクティス

より良い、読みやすい、そしてバグの少ないコードを書くために、いくつかの注意点と推奨される書き方（ベストプラクティス）があります。

インデント（字下げ）を適切に行う

ifやelse、else ifのブロック内のコードは、その外側のコードよりも一段階右に字下げ（インデント）するのが一般的です。これは、どのコードがどの条件分岐に属しているかを視覚的に分かりやすくするためです。

“`javascript
// 良い例
if (condition) {
// この行はインデントする
// この行もインデントする
} else {
// この行もインデントする
}

// 悪い例 (読みにくい)
if (condition) {
console.log(“処理1”);
console.log(“処理2”);
}
else {
console.log(“別の処理1”);
}
“`
JavaScriptのコード整形ツール（Prettierなど）を使えば、自動的にインデントを整えてくれるので活用しましょう。

常にブロック文 {} を使う

先ほど説明したように、単一行の処理でも{}を省略せずに書くことを強く推奨します。

“`javascript
// 良い例 (単一行でもブロックを使う)
if (isTrue) {
console.log(“真です。”);
}

// 悪い例 (単一行でブロックを省略)
if (isTrue)
console.log(“真です。”);
``
将来的に処理を追加することになった際に、{}`がないとバグを生む可能性が高まります。

=== と !== を優先的に使う

型の自動変換による予期しない挙動を防ぐため、特別な理由がない限りは==や!=ではなく、===や!==を使う習慣をつけましょう。

“`javascript
// 良い例
if (value === 10) { … }
if (status !== null) { … }

// 注意が必要な例 (意図しない結果になる可能性)
if (value == ’10’) { … } // valueが10なら true になる
if (status != undefined) { … } // statusがnullでも true になる
“`

else ifの条件の記述順序に注意する

複数の段階的な条件をelse ifで記述する場合、条件式の評価順序が上から下であることを常に意識し、より狭い範囲や特定の条件を先に書くように設計することが重要です。

例えば、年齢で子供(〜12歳)、ティーンエイジャー(13〜19歳)、成人(20歳〜)と分けたい場合、以下のように書くと意図通りになりません。

“`javascript
let age = 15;

if (age >= 13) { // 13歳以上か？
console.log(“ティーンエイジャーまたは成人です。”); // age=15なのでこれが実行される
} else if (age >= 20) { // 20歳以上か？
console.log(“成人です。”); // ここには到達しない
} else { // 13歳未満の場合
console.log(“子供です。”); // ここにも到達しない
}
// 意図: ティーンエイジャー と表示したかったのに、最初の条件で止まってしまった。
“`
この場合、より年齢が高い条件（範囲が狭い条件）を先に書く必要があります。

“`javascript
let age = 15;

if (age >= 20) { // 20歳以上か？
console.log(“成人です。”); // 偽
} else if (age >= 13) { // 13歳以上か？ (ここに到達するのは20歳未満の場合)
console.log(“ティーンエイジャーです。”); // 真！ これが実行される
} else { // どちらでもない場合 (13歳未満)
console.log(“子供です。”); // スキップ
}
// 意図通り「ティーンエイジャーです。」と表示される。
“`

最後のelseで想定外のケースを捕捉する

可能な限り、if/else ifのチェーンの最後にelseブロックを用意することをお勧めします。これは、これまでのどの条件にも当てはまらなかった、予期しないデータや状態が来た場合に、何かしらのデフォルト処理を行ったり、エラーをログに出力したりするためです。

“`javascript
let statusCode = 500;

if (statusCode === 200) {
console.log(“成功”);
} else if (statusCode === 404) {
console.log(“見つかりません”);
} else {
// 想定外のステータスコードが来た場合
console.error(“不明なステータスコード: ” + statusCode);
// 何かエラー処理を行うなど
}
“`
このようにすることで、プログラムが予期しない入力に対して何も反応しなくなる、という事態を防ぐことができます。

複雑すぎる条件分岐は避ける（関数に切り出すなど）

一つのifやelse ifの条件式が非常に長くなったり、ネストが深くなりすぎたりすると、コードの可読性が著しく低下し、バグの温床となります。

• 長い条件式: 複数の論理演算子で複雑に組み合わせられている場合、条件式自体を分かりやすい名前の変数に代入したり、条件をチェックするための専用の関数を作成したりすることを検討します。
  “`javascript
  // 悪い例
  if ((user.isLoggedIn && user.hasPermission(‘edit’) && user.status === ‘active’) || user.role === ‘admin’) { … }

  // 良い例 (関数に切り出す)
  function canEdit(user) {
  return (user.isLoggedIn && user.hasPermission(‘edit’) && user.status === ‘active’) || user.role === ‘admin’;
  }
  if (canEdit(currentUser)) { … }
  “`
  * 深いネスト: 条件分岐のネストが3段階以上になるような場合、その部分の処理を独立した関数に切り出すことで、全体の構造が分かりやすくなります。

クリーンで分かりやすいコードは、自分自身の将来や、他の開発者にとっても非常に価値があります。

10. まとめ：条件分岐はプログラミングの必須スキル

お疲れ様でした！ JavaScriptのif、else if、elseを使った条件分岐について、基本的な使い方から応用、そして注意点まで、かなり詳しく見てきました。

• if文は、「もし〜ならば、この処理を実行する」という、最も基本的な条件判定を行います。
• else文は、直前のif（またはelse if）の条件が偽だった場合の「そうでなければ」の処理を指定します。ifとセットで使い、二者択一の分岐を作ります。
• else if文は、複数の条件を順番にチェックし、最初に真になった条件に対応する処理を実行したい場合に利用します。ifの後にいくつでも連ねることができ、段階的な判定に便利です。条件は上から順番に評価され、一度真になったらそこで判定が終了するという仕組みが重要です。
• 条件式を作るためには、== === != !== > < >= <= といった比較演算子が不可欠です。特に===と!==を使って厳密な比較を行うのがベストプラクティスです。
• 複数の条件を組み合わせるには、&& (AND)、|| (OR)、! (NOT) といった論理演算子を使います。複雑な組み合わせでは括弧()を使って優先順位を明確にしましょう。
• 条件ブロックの処理が単一行でも、常に{}（波括弧）を使うことで、コードの安全性が高まります。
• 条件分岐をネスト（入れ子）にすることも可能ですが、深くしすぎると読みにくくなるため注意が必要です。
• JavaScriptには、false, 0, '', null, undefined, NaNといったFalsyな値と、それ以外のTruthyな値があり、条件式ではこれらが真偽とみなされます。
• シンプルな二者択一の代入などには、三項演算子? :を使うと簡潔になる場合があります。
• 一つの値を複数の固定値と比較する場合は、switch文も有効な選択肢です。
• コードの可読性を高めるために、適切なインデント、一貫したコーディングスタイル、複雑な条件式の分割などを心がけましょう。

条件分岐は、あらゆるプログラムにおいて、その振る舞いを多様にするために欠かせない、まさに「プログラミングの脳」とも言える部分です。この記事で学んだことを活かして、ぜひ実際に様々な条件分岐を記述してみてください。

最初は思った通りに動かないこともあるかもしれません。そんな時は、変数にどんな値が入っているかを確認したり、条件式がtrueになるかfalseになるかを一つずつ追ってみたり（デバッグといいます）、コードを少しずつ修正しながら試してみることが大切です。

今回の内容が、あなたのJavaScript学習の一助となれば幸いです。これからもプログラミングを楽しんでいきましょう！

---