【JavaScript入門】if文で条件分岐をマスターしよう

By /

はい、承知いたしました。【JavaScript入門】if文で条件分岐をマスターしよう の詳細な説明を含む約5000語の記事を記述します。記事の内容を直接表示します。

【JavaScript入門】if文で条件分岐をマスターしよう

プログラミングの世界へようこそ！ プログラムは、上から順番に実行される命令の集まりですが、それだけでは複雑な処理はできません。状況に応じて実行する処理を変えたり、特定の条件を満たす場合にのみ何かを実行したりしたい場合がよくあります。このような「状況に応じた処理の選択」を行うための機能が「条件分岐」です。

JavaScriptにおける条件分岐の最も基本的な、そして最もよく使われる構文が if 文です。if 文をマスターすることは、JavaScriptで思い通りのプログラムを書くための第一歩と言っても過言ではありません。

この記事では、JavaScriptの if 文について、その基本的な使い方から応用、よくある間違い、そして実践的な例まで、初心者の方にもわかりやすく徹底的に解説します。この記事を最後まで読めば、if 文を使った条件分岐の概念をしっかりと理解し、自信を持ってコードを書けるようになるでしょう。

さあ、一緒にJavaScriptの if 文をマスターしていきましょう！

1. プログラミングにおける条件分岐の重要性

私たちの日常生活を考えてみましょう。

  • 「もし雨が降っていたら傘を持っていく」
  • 「もしお腹が空いていたら何か食べる」
  • 「もしお店が開いていたら入る、そうでなければ別の店を探す」

このように、私たちは無意識のうちに「もし〇〇なら、△△する」とか、「もし〇〇なら△△する、そうでなければ✕✕する」といった判断を常に行っています。

プログラミングも同じです。プログラムにも「判断」が必要です。例えば、

  • ユーザーが入力したパスワードが正しい「場合」のみログインを許可する。
  • 商品の在庫がある「場合」のみ購入ボタンを表示する。
  • テストの点数が80点以上「なら」合格と表示し、そうでなければ不合格と表示する。
  • 受け取ったデータの値によって、異なる処理を実行する。

これらの「場合」や「条件」に応じて、プログラムの実行フローを切り替える機能が「条件分岐」です。条件分岐がなければ、プログラムは常に決まった手順でしか動けず、柔軟性や実用性が大きく損なわれます。

条件分岐は、あらゆる種類のプログラムにおいて不可欠な要素です。JavaScriptでWebサイトの動的な要素を作成したり、サーバーサイドで処理を行ったり、アプリケーションを開発したりする場合でも、必ず条件分岐が登場します。

JavaScriptにおける条件分岐の主役となるのが、これから学ぶ if 文なのです。

2. if文の基本構造

if 文は、「もし〇〇という条件が満たされたら、△△という処理を実行する」という、最もシンプルで基本的な条件分岐を表す構文です。

2.1. 最も単純なif文

まずは、最も基本的な if 文の形を見てみましょう。

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

この構文の要素を一つずつ見ていきましょう。

  • if: これはJavaScriptのキーワードで、「もし〜ならば」という意味を持ちます。
  • (条件式): 丸括弧 () の中に記述される部分です。ここに書かれた式が評価され、その結果が 真（true） または 偽（false） のどちらになるかで、その後の処理を実行するかしないかが決まります。条件式については後ほど詳しく解説します。
  • { ... }: 波括弧 {} で囲まれた部分を ブロック または ステートメントブロック と呼びます。条件式が true と評価された場合に、このブロックの中に書かれた全ての処理が上から順に実行されます。条件式が false と評価された場合、このブロックの中の処理は完全にスキップされ、if 文全体の次の行に進みます。

実行フロー:

  1. まず (条件式) が評価されます。
  2. 評価の結果が true であれば、{} の中の処理を実行します。実行が終わったら、if 文の次に進みます。
  3. 評価の結果が false であれば、{} の中の処理はスキップされ、直接 if 文の次に進みます。

どちらの場合でも、if 文の評価が終わった後は、その if 文の直後のコードから実行が再開されます。

簡単なサンプルコード:

“`javascript
let score = 85;

// 点数が80点以上なら「合格です！」と表示する
if (score >= 80) {
console.log(“合格です！”);
console.log(“よく頑張りました！”); // 複数行の処理もブロック内に記述できる
}

console.log(“判定終了”); // これはif文の条件にかかわらず常に実行される
“`

このコードを実行するとどうなるでしょうか？

score の値は 85 です。条件式 score >= 80 は 85 >= 80 となり、これは true です。したがって、if ブロック内の処理が実行されます。

合格です！
よく頑張りました！
判定終了

と表示されます。

では、score の値を変えてみましょう。

“`javascript
let score = 70;

// 点数が80点以上なら「合格です！」と表示する
if (score >= 80) {
console.log(“合格です！”); // この行は実行されない
console.log(“よく頑張りました！”); // この行も実行されない
}

console.log(“判定終了”); // これはif文の条件にかかわらず常に実行される
“`

今度は score の値は 70 です。条件式 score >= 80 は 70 >= 80 となり、これは false です。したがって、if ブロック内の処理はスキップされます。

判定終了

とだけ表示されます。

このように、if 文を使うことで、特定の条件が満たされた場合にのみ処理を実行させることができます。

2.2. 条件式の評価 – 真偽値 (Boolean) と Truthy/Falsy

if 文の (条件式) に書かれる式は、評価されると最終的に 真偽値 (Boolean) になります。真偽値には true と false の二種類があります。

比較演算子 (>, <, >=, <=, ==, !=, ===, !==) の結果は常に真偽値です。例えば、score >= 80 という式は、score の値によって true または false に評価されます。

javascript
console.log(10 > 5); // true
console.log(10 < 5); // false
console.log(10 === 10); // true
console.log(10 === "10"); // false (後述の厳密比較)

論理演算子 (&&, ||, !) も、複数の条件式を組み合わせて最終的に真偽値を返します。論理演算子についても後ほど詳しく解説します。

TruthyとFalsyについて (重要！)

JavaScriptの if 文の条件式では、Boolean値 (true または false) そのものだけでなく、他の様々な型の値も指定することができます。これらの値は、if 文によって条件式として評価される際に、内部的にBoolean値に変換（型強制）されてから真偽の判定が行われます。

このとき、false と同じように扱われる値と、true と同じように扱われる値があります。

  • Falsyな値 (Falsy values): 条件式として評価されたときに false とみなされる値。
  • Truthyな値 (Truthy values): 条件式として評価されたときに true とみなされる値。

Falsyな値 は以下の 7種類 だけです。これらは覚えておくと便利です。

  1. false (Booleanそのもの)
  2. 0 (数値のゼロ)
  3. "" (空文字列)
  4. null
  5. undefined
  6. NaN (Not-a-Number, 非数)
  7. -0n (BigIntのゼロ) – これはあまり日常的に使われませんが、厳密にはFalsyです。

これら 7種類以外の全ての値は、Truthyな値 です。

つまり、0 以外の全ての数値、空文字列以外の全ての文字列、配列 ([] を含む)、オブジェクト ({} を含む)、関数などは全て Truthy です。

Falsyな値を使ったif文の例:

“`javascript
if (false) { console.log(“これは実行されません (false)”); }
if (0) { console.log(“これも実行されません (0)”); }
if (“”) { console.log(“これも実行されません (空文字列)”); }
if (null) { console.log(“これも実行されません (null)”); }
if (undefined) { console.log(“これも実行されません (undefined)”); }
if (NaN) { console.log(“これも実行されません (NaN)”); }

let data = null;
if (data) { // dataがnullなのでFalsyと判定される
console.log(“データがあります”); // 実行されない
} else {
console.log(“データがありません”); // こちらが実行される
}

let count = 0;
if (count) { // countが0なのでFalsyと判定される
console.log(“カウントがあります”); // 実行されない
} else {
console.log(“カウントは0です”); // こちらが実行される
}

let username = “”; // 空文字列
if (username) { // usernameが””なのでFalsyと判定される
console.log(“ユーザー名が設定されています”); // 実行されない
} else {
console.log(“ユーザー名が設定されていません”); // こちらが実行される
}
“`

Truthyな値を使ったif文の例:

“`javascript
if (true) { console.log(“これは実行されます (true)”); }
if (1) { console.log(“これも実行されます (1)”); }
if (-5) { console.log(“負の数もTruthy (-5)”); }
if (“hello”) { console.log(“空でない文字列はTruthy (hello)”); }
if ([]) { console.log(“空の配列もTruthy ([])”); } // !! 注意 !!
if ({}) { console.log(“空のオブジェクトもTruthy ({})”); }
if (function(){}) { console.log(“関数もTruthy”); }

let myList = []; // 空の配列
if (myList) { // 空の配列([])もTruthyなので実行される
console.log(“リストは存在します”); // 実行される
}

// 配列が「空ではない」ことをチェックしたい場合は length プロパティを使うのが一般的です
if (myList.length > 0) { // または if (myList.length) でもOK (lengthが0ならFalsy)
console.log(“リストには要素があります”); // 実行されない (lengthが0のためFalsy)
} else {
console.log(“リストは空です”); // こちらが実行される
}
“`

Truthy/Falsyの概念は、JavaScriptで簡潔な条件式を書くためによく利用されます。例えば、「変数に何か値が入っているか？」をチェックしたい場合に、その変数が null, undefined, "", 0 などでないことをまとめて if (変数名) のように書くことができます。

2.3. ブロック {} について

if 文の条件式が true となったときに実行される処理は、波括弧 {} で囲まれたブロックの中に記述します。

このブロックは、複数の処理をひとまとまりとして扱うために使用されます。

javascript
if (条件式) {
// 処理1
// 処理2
// 処理3
}

条件式が true の場合、処理1、処理2、処理3 がこの順に実行されます。

ブロックの省略 (非推奨！)

実は、条件式が true の場合に実行する処理が 1行だけ の場合は、波括弧 {} を省略して書くことも可能です。

“`javascript
// ブロックを省略した例 (1行の場合のみ有効)
if (score >= 80)
console.log(“合格です！”); // ifの直下のこの1行だけが条件の対象になる

console.log(“判定終了”); // これは無条件に実行される
“`

この書き方でもシンタックスエラーにはなりません。しかし、この書き方は非推奨です！ その理由は、後から処理を追加しようとしたときに、意図しないバグが発生しやすいからです。

例えば、上のコードに「よく頑張りました！」というメッセージも追加したいと思って、安易に改行して1行追加してみたとします。

“`javascript
// 非推奨な省略記法に処理を追加しようとした例 (意図と異なる！)
if (score >= 80)
console.log(“合格です！”);
console.log(“よく頑張りました！”); // !! 注意 !! この行はifの条件にかかわらず常に実行される

console.log(“判定終了”);
“`

このコードでは、if (score >= 80) の条件を満たすのは直下の1行 (console.log("合格です！");) だけであり、次の行の console.log("よく頑張りました！"); は if 文とは無関係な、通常のコードとして扱われます。したがって、点数が70点だったとしても、「よく頑張りました！」と「判定終了」が表示されてしまいます。

常に波括弧 {} を使用していれば、このような誤解やバグを防ぐことができます。処理が1行の場合でも、必ず波括弧を記述する習慣をつけましょう。

“`javascript
// 推奨される書き方 (1行でも必ず波括弧をつける)
if (score >= 80) {
console.log(“合格です！”);
}

console.log(“判定終了”);
“`

このように書けば、後からブロック内に処理を追加しても、その追加した処理も意図通り if 文の条件の対象に含まれるようになります。

ブロックとスコープ (簡単な触れ込み)

波括弧で囲まれたブロックは、JavaScriptにおける「スコープ」という概念にも関係してきます。let や const キーワードで宣言された変数は、その変数が宣言された最も近いブロック内でしか有効になりません（ブロックレベルスコープ）。

“`javascript
if (true) {
let message = “条件を満たしました”;
console.log(message); // ブロック内なのでアクセスできる
}

// console.log(message); // !! エラー !! ブロックの外なのでアクセスできない
“`

このスコープの概念は非常に重要ですが、if 文の基本から少し発展した内容になるため、ここではこの程度の紹介に留めます。スコープについては、別の記事で詳しく学ぶと良いでしょう。

3. if…else文

if 文は、「もし〇〇なら△△する」という片道通行の条件分岐でした。しかし、「もし〇〇なら△△する、そうでなければ✕✕する」というように、条件が真の場合と偽の場合で、実行する処理を完全に分けたいことがよくあります。

このような場合に使うのが if...else 文です。

3.1. 構文と実行フロー

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

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

  • else は「そうでなければ」という意味を持つキーワードです。
  • if の条件式が false と評価された場合に、else の後ろのブロック {} に書かれた処理が実行されます。

実行フロー:

  1. まず (条件式) が評価されます。
  2. 評価の結果が true であれば、if のブロック {} の中の処理を実行します。実行が終わったら、if...else 文全体の次に進みます。
  3. 評価の結果が false であれば、else のブロック {} の中の処理を実行します。実行が終わったら、if...else 文全体の次に進みます。

重要: if のブロックと else のブロックの どちらか一方だけ が必ず実行されます。両方が実行されることはありませんし、どちらも実行されないこともありません（条件式が評価エラーになる場合などを除く）。

3.2. サンプルコード

if...else 文を使った簡単なサンプルコードを見てみましょう。

例1: 年齢による成人判定

“`javascript
let age = 16;

if (age >= 18) {
console.log(“あなたは成人です。”);
} else {
console.log(“あなたは未成年です。”);
}

console.log(“判定終了”);
“`

age は 16 です。条件式 age >= 18 は 16 >= 18 となり、false です。したがって、else ブロックが実行されます。

あなたは未成年です。
判定終了

と表示されます。もし age が 20 なら、条件式は true となり、if ブロックが実行されて「あなたは成人です。」と表示されます。

例2: 偶数か奇数かの判定

数値を2で割った余りが0かどうかを調べることで、偶数か奇数かを判定できます。剰余演算子 % を使います。

“`javascript
let number = 10;

if (number % 2 === 0) { // number を 2 で割った余りが 0 と厳密に等しいか？
console.log(number + “は偶数です。”);
} else {
console.log(number + “は奇数です。”);
}
“`

number は 10 です。10 % 2 は 0 です。条件式 0 === 0 は true です。したがって、if ブロックが実行されます。

10は偶数です。

と表示されます。もし number が 7 なら、7 % 2 は 1 です。条件式 1 === 0 は false なので、else ブロックが実行されて「7は奇数です。」と表示されます。

if...else 文を使うことで、真偽二つの結果に対する異なる処理を明確に記述することができます。

4. else if文 (多岐分岐)

これまでの if 文と if...else 文は、条件が「真」か「偽」かという最大二つの分岐しかできませんでした。しかし、現実のプログラミングでは、三つ以上の選択肢から一つを選ぶような場面がよくあります。

例えば、テストの点数によって「優」「良」「可」「不可」の四段階で評価する場合などです。このような複数の条件を順番に調べて、最初に合致した条件に対する処理を実行したい場合に else if 文を使います。

4.1. 構文と実行フロー

else if 文は、if の後に続けて記述し、さらに別の条件式を指定します。複数の else if を連結することも可能です。最後に、どの条件にも合致しなかった場合の処理として else ブロックを任意でつけることができます。

多岐分岐の一般的な構文は以下のようになります。

javascript
if (条件式1) {
// 条件式1が真の場合に実行される処理
} else if (条件式2) {
// 条件式1が偽で、かつ条件式2が真の場合に実行される処理
} else if (条件式3) {
// 条件式1も条件式2も偽で、かつ条件式3が真の場合に実行される処理
} else {
// 上記どの条件式も偽であった場合に実行される処理 (省略可能)
}

  • 最初の if 文は必須です。
  • else if 文はいくつでも連ねて書くことができます。
  • 最後の else 文は任意です。どの条件にも当てはまらなかった場合に何も処理したくない場合は省略します。

実行フロー:

  1. まず、最初の if (条件式1) が評価されます。
  2. 条件式1 が true と評価された場合、if ブロック内の処理を実行し、多岐分岐全体の処理は そこで終了 します。それ以降の else if や else は一切評価されません。
  3. 条件式1 が false と評価された場合、次の else if (条件式2) が評価されます。
  4. 条件式2 が true と評価された場合、その else if ブロック内の処理を実行し、多岐分岐全体の処理は そこで終了 します。それ以降の else if や else は一切評価されません。
  5. これを繰り返し、いずれかの else if の条件式が true になれば、そのブロックを実行して多岐分岐全体を終了します。
  6. 全ての if および else if の条件式が false と評価された場合、もし最後の else ブロックがあれば、その中の処理が実行されます。else ブロックがなければ、何も処理は実行されずに多岐分岐全体の次に進みます。

重要な点は、最初に条件を満たしたブロックの処理だけが実行される ということです。複数の条件を満たしていても、最初に評価される条件が真であれば、それ以降の条件はチェックされません。この性質を利用して、条件式の順番を工夫することで特定の範囲を判定することができます。

4.2. サンプルコード

多岐分岐を使ったサンプルコードを見てみましょう。

例1: 点数による成績判定

日本の一般的な成績基準（例: 90点以上A, 80点以上B, …）を判定するコードです。点数の高い順に条件を評価していくのがポイントです。

“`javascript
let score = 75;
let grade;

if (score >= 90) {
grade = “優 (A)”;
} else if (score >= 80) { // 90点未満で、かつ80点以上
grade = “良 (B)”;
} else if (score >= 70) { // 80点未満で、かつ70点以上
grade = “可 (C)”;
} else { // 70点未満
grade = “不可 (F)”;
}

console.log(“あなたの成績は: ” + grade);
“`

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 (前の条件が偽だったのでここが評価される)
    • この条件が真になったので、このブロック内の grade = "可 (C)"; が実行されます。
    • これ以降の else ブロックは評価されず、多岐分岐全体が終了します。

結果として grade には "可 (C)" が代入され、「あなたの成績は: 可 (C)」と表示されます。

もし点数を低い順に判定しようとすると、条件式の書き方を工夫する必要が出てきて少し複雑になります。例えば、「70点未満」の条件を最初に書いてしまうと、90点の人がその条件に合致してしまい意図通りになりません。点数の高い方から順番に判定していくのが自然で分かりやすい書き方です。

例2: 数値から曜日の文字列への変換

日曜を0、月曜を1、…、土曜を6とした数値から、対応する曜日の文字列を取得する例です。

“`javascript
let dayOfWeek = 3; // 0:日曜, 1:月曜, …, 6:土曜
let dayName;

if (dayOfWeek === 0) {
dayName = “日曜日”;
} else if (dayOfWeek === 1) {
dayName = “月曜日”;
} else if (dayOfWeek === 2) {
dayName = “火曜日”;
} else if (dayOfWeek === 3) {
dayName = “水曜日”;
} else if (dayOfWeek === 4) {
dayName = “木曜日”;
} else if (dayOfWeek === 5) {
dayName = “金曜日”;
} else if (dayOfWeek === 6) {
dayName = “土曜日”;
} else {
dayName = “不正な値です”; // 0～6以外の数値の場合
}

console.log(“今日は: ” + dayName); // “今日は: 水曜日”
“`

この例では、dayOfWeek が 3 なので、上から順に評価され、else if (dayOfWeek === 3) の条件が真となり、dayName に "水曜日" が代入されます。

この曜日の例のように、特定の値と厳密に一致するかどうかで多数の分岐がある場合は、後述する switch 文の方がより適している場合があります。しかし、特定の範囲や複数の条件の組み合わせで判定する場合は、if...else if...else 文が非常に強力です。

if...else if...else 文を使いこなすことで、複雑な条件にも対応できる柔軟なプログラムを作成できます。

5. 条件式の書き方 (詳細)

if 文の最も重要な部分である「条件式」は、どのように記述すればいいのでしょうか。これまでに少し触れましたが、ここでは条件式を構成するための要素やテクニックについて詳しく解説します。

条件式は、評価結果が最終的に true または false になる式です。主に以下の要素を組み合わせて作成します。

5.1. 比較演算子

二つの値を比較し、その結果をBoolean値 (true または false) で返します。

演算子 意味 例 結果 説明
== 等価 (loosely equal) 5 == "5" true 値が等しいか。型変換を行うため非推奨。
!= 不等価 (loosely not equal) 5 != "5" false 値が等しくないか。==の否定。型変換を行うため非推奨。
=== 厳密等価 (strictly equal) 5 === "5" false 値と型が等しいか。型変換を行わないため推奨。
!== 厳密不等価 (strictly not equal) 5 !== "5" true 値または型が等しくないか。===の否定。型変換を行わないため推奨。
> 大なり 10 > 5 true 左辺が右辺より大きいか。
< 小なり 5 < 10 true 左辺が右辺より小さいか。
>= 大なりイコール 10 >= 10 true 左辺が右辺以上か。
<= 小なりイコール 5 <= 5 true 左辺が右辺以下か。

== と === の違い (重要！)

JavaScript初心者が最も混乱しやすく、かつバグの原因になりやすいのが == (等価演算子) と === (厳密等価演算子) の違いです。

  • === (厳密等価演算子): 二つの値が、値も型も両方とも全く同じ である場合に true を返します。型が異なる場合は、値が同じに見えても false となります。こちらを使用することを強く推奨します。

    javascript
    console.log(5 === 5); // true (値も型も同じ)
    console.log(5 === "5"); // false (型が異なる: number vs string)
    console.log(0 === false); // false (型が異なる: number vs boolean)
    console.log(null === undefined); // false (型が異なる)

  • == (等価演算子): 二つの値を比較する際に、必要に応じて一方または両方の値を型変換してから 値を比較します。型変換のルールが複雑で直感的に理解しにくいため、予期しない結果を招くことがあります。

    javascript
    console.log(5 == 5); // true (値も型も同じなので === と同じ)
    console.log(5 == "5"); // true (文字列 "5" が数値 5 に変換されて比較される)
    console.log(0 == false); // true (数値 0 と boolean false が、どちらも内部的に偽として扱われるため)
    console.log(null == undefined); // true (null と undefined は == で比較すると true になるという特殊ルールがある)
    console.log("" == false); // true (空文字列と boolean false が、どちらも内部的に偽として扱われるため)
    console.log("1" == true); // true ("1"が数値1に変換され、trueが数値1に変換されて比較される)

このように、== は意図しない型変換によって思わぬ true や false を返すことがあります。ほとんどの場合、値だけでなく型も一致しているかを確認したいはずなので、常に === (または !==) を使う という習慣をつけましょう。これで多くのバグを防ぐことができます。

大小比較 (<, >, <=, >=)

これらの演算子は、主に数値の大小を比較します。

javascript
console.log(10 > 5); // true
console.log(5 <= 5); // true
console.log(-3 < 0); // true

数値と文字列を大小比較する場合、JavaScriptは文字列を数値に変換しようと試みます。

javascript
console.log(10 > "5"); // true ("5"が数値 5 に変換されて比較される)
console.log("10" > "5"); // false (!! 注意 !! 文字列として辞書順に比較されるため)

後者の例のように、意図しない文字列比較を防ぐため、可能であれば比較する前に明示的に数値に変換する (parseInt(), parseFloat(), Number()) のが良いでしょう。

javascript
console.log(Number("10") > Number("5")); // true (数値 10 と 5 として比較)

5.2. 論理演算子

複数の条件式を組み合わせたり、条件式の真偽を反転させたりする際に使用します。論理演算子の結果もBoolean値 (true または false) になります（ただし、後述のショートサーキットの挙動には注意が必要です）。

演算子 意味 例 説明
&& 論理AND A && B A かつ B が両方とも Truthy なら、最後のオペランドを返す。そうでなければ、最初に評価された Falsy なオペランド、または最後のオペランドを返す。Booleanコンテキストでは、両方trueならtrue、それ以外はfalse。
|| 論理OR A || B A または B のどちらか一方、あるいは両方が Truthy なら、最初に評価された Truthy なオペランドを返す。両方 Falsy なら、最後のオペランドを返す。Booleanコンテキストでは、どちらかtrueならtrue、両方falseならfalse。
! 論理NOT !A A の真偽を反転させる。Aが Truthy なら false、Falsy なら true を返す。

論理AND (&&)

条件式A && 条件式B は、「条件式Aも真、かつ条件式Bも真」の場合に全体として真になります。

“`javascript
let age = 25;
let isStudent = true;

// 年齢が18歳以上 AND 学生である
if (age >= 18 && isStudent) {
console.log(“あなたは成人学生です。”);
}
“`

この例では age >= 18 は 25 >= 18 で true、isStudent は true です。true && true は true なので、if ブロックが実行されます。

もし age が 16 だったら？ age >= 18 は false です。false && isStudent は false なので、if ブロックは実行されません。

ショートサーキット評価 (Short-Circuit Evaluation) – &&

論理AND (&&) には「ショートサーキット評価（短絡評価）」という重要な性質があります。

条件式A && 条件式B を評価するとき、まず 条件式A が評価されます。
もし 条件式A が false と評価された場合、全体の評価結果は必ず false になります。したがって、JavaScriptは 条件式B を評価せずに そこで評価を終了し、条件式A の評価結果（Falsyな値）を返します。

これは、次のような場合に非常に役立ちます。

“`javascript
let user = null; // または undefined

if (user && user.name) {
// userが存在し、かつuser.nameプロパティも存在する場合の処理
console.log(“ユーザー名: ” + user.name);
} else {
console.log(“ユーザー情報が不完全です。”);
}
“`

もし user が null や undefined の場合、user は Falsy な値です。user && user.name の評価では、まず左辺の user が評価され、Falsy となります。この時点で全体の評価結果は Falsy と確定するため、右辺の user.name は 評価されません。

もしショートサーキットがなければ、user が null の場合に user.name を評価しようとしてエラー（TypeError: Cannot read properties of null (reading 'name')）が発生してしまいます。ショートサーキットのおかげで、このようなエラーを防ぎながら安全にプロパティにアクセスできるのです。

また、&& は条件式だけでなく、値を返す演算子としてもよく使われます。

“`javascript
let value = possiblyNullValue && defaultValue;
// possiblyNullValue が Truthy ならその値、Falsy なら defaultValue は評価されないが、
// 式全体の結果として possiblyNullValue の評価結果（Falsyな値）が返る。
// 例えば、possiblyNullValue が 0 や “” なら 0 や “” が返る。nullなら nullが返る。

// 安全なプロパティアクセスと同時に値を取得する
let username = user && user.name;
// userがnullやundefinedならusernameはnullやundefinedになる。
// userがあり、user.nameが例えば””ならusernameは””になる。
// userがあり、user.nameが例えば”Alice”ならusernameは”Alice”になる。
“`

論理AND演算子は、純粋なBoolean値だけでなく、Truthy/Falsyな値を返す可能性があることを理解しておきましょう。if 文の条件式として使う場合は、最終的にBooleanに型強制されるため結果的に真偽判定として機能します。

論理OR (||)

条件式A || 条件式B は、「条件式Aが真、または条件式Bが真（あるいは両方真）」の場合に全体として真になります。

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

// 認証されている OR 管理者である
if (isAuthenticated || isAdmin) {
console.log(“アクセス許可。”);
} else {
console.log(“アクセス拒否。”);
}
“`

この例では isAuthenticated は false、isAdmin は true です。false || true は true なので、if ブロックが実行されます。

もし両方 false だったら？ false || false は false なので、else ブロックが実行されます。

ショートサーキット評価 – ||

論理OR (||) にもショートサーキット評価があります。

条件式A || 条件式B を評価するとき、まず 条件式A が評価されます。
もし 条件式A が true と評価された場合、全体の評価結果は必ず true になります。したがって、JavaScriptは 条件式B を評価せずに そこで評価を終了し、条件式A の評価結果（Truthyな値）を返します。

これは、次のような「デフォルト値」を設定する場面で非常によく利用されます。

javascript
let username = providedUsername || "ゲスト";
// providedUsername が Truthy ならその値が username に代入される
// providedUsername が Falsy (null, undefined, "", 0など) なら、|| の右辺が評価され "ゲスト" が username に代入される

例えば、providedUsername が null だった場合、null || "ゲスト" の評価では、まず null が評価されて Falsy となります。次に右辺の "ゲスト" が評価され、Truthy となります。全体の評価結果は Truthy ですが、論理ORは 最初に評価された Truthy な値 または 最後に評価された値 を返します。この場合、右辺の "ゲスト" が最初の Truthy な値（左辺が Falsy だったので）として評価され、それが返されるため、username には "ゲスト" が代入されます。

もし providedUsername が "Alice" という文字列（これは Truthy）だった場合、"Alice" || "ゲスト" の評価では、まず左辺の "Alice" が評価され、Truthy となります。この時点で全体の評価結果は Truthy と確定するため、右辺の "ゲスト" は 評価されません。そして、最初に評価された Truthy な値である "Alice" が返され、username には "Alice" が代入されます。

この || を使ったデフォルト値設定は、JavaScriptで非常によく使われるイディオムです。

論理NOT (!)

!条件式 は、条件式 の評価結果の真偽を反転させます。

  • 条件式 が Truthy なら、!条件式 は false になります。
  • 条件式 が Falsy なら、!条件式 は true になります。

“`javascript
let isLoggedIn = false;

// ログインしていない (!isLoggedIn が true)
if (!isLoggedIn) {
console.log(“ログインが必要です。”);
}
“`

この例では isLoggedIn が false (Falsy) なので、!isLoggedIn は true になります。if ブロックが実行され、「ログインが必要です。」と表示されます。

また、論理NOTを二回重ねて !!値 と書くことで、その値を強制的にBoolean値 (true または false) に変換することができます。

javascript
console.log(!!"hello"); // true ("hello" は Truthy なので)
console.log(!!0); // false (0 は Falsy なので)
console.log(!!null); // false (null は Falsy なので)
console.log(!![]); // true ([] は Truthy なので)

これは、ある値が単に Truthy か Falsy かを知りたい場合に便利です。

5.3. 複雑な条件式の構築

比較演算子と論理演算子を組み合わせることで、より複雑な条件式を作成できます。複数の演算子を使う場合は、評価の優先順位に注意が必要ですが、基本的には括弧 () を使って評価順序を明確にすることをお勧めします。

演算子の優先順位の一般的なルールとしては、比較演算子の方が論理演算子より優先度が高く、論理演算子の中では && が || より優先度が高いですが、括弧で囲むのが最も安全で分かりやすい方法です。

“`javascript
let age = 25;
let isStudent = true;
let isEmployed = false;

// 年齢が18歳以上 AND (学生 OR 就職している) かつ 学生ではない
// ここでは括弧を使い、ORの評価を先に行う意図を明確にしています
if (age >= 18 && (isStudent || isEmployed) && !isStudent) {
console.log(“あなたは成人で、学生ではないが働いています。”);
} else {
console.log(“上記の条件には当てはまりません。”);
}
“`

この例を評価してみましょう。
age >= 18 -> 25 >= 18 -> true
(isStudent || isEmployed) -> (true || false) -> true (|| のショートサーキットにより右辺は評価されないが結果はtrue)
!isStudent -> !true -> false

全体として true && true && false となり、結果は false です。したがって、else ブロックが実行されます。

このように、括弧を適切に使うことで、複雑な条件式も意図通りに評価させることができます。

6. ネストされたif文 (入れ子)

if 文のブロックの中や、else ブロックの中に、さらに別の if 文や if...else 文を書くことができます。これを ネスト（入れ子）されたif文 と呼びます。

6.1. 構造とサンプルコード

ネストされた if 文の基本的な構造は以下のようになります。

“`javascript
if (条件1) {
// 条件1が真の場合の処理

if (条件2) {
// 条件1も条件2も真の場合の処理
} else {
// 条件1は真だが、条件2は偽の場合の処理
}

} else {
// 条件1が偽の場合の処理
}
“`

これは、まず大きな条件で分岐し、そのさらに内側で別の条件で細かく分岐したい場合に有効です。

例: ログイン状態と管理者権限のチェック

ユーザーがログインしているかを確認し、さらにログインしている場合に管理者権限があるかどうかを確認する例です。

“`javascript
let isLoggedIn = true;
let userRole = “admin”; // “user” または “admin”

if (isLoggedIn) {
console.log(“ユーザーはログインしています。”);

if (userRole === “admin”) {
console.log(“ユーザーは管理者です。”);
// ここに管理者のみがアクセスできる処理を書く
} else {
console.log(“ユーザーは一般ユーザーです。”);
// ここにログイン済みの一般ユーザー向け処理を書く
}

} else {
console.log(“ユーザーはログインしていません。”);
// ここに未ログインユーザー向けの処理（ログイン画面へリダイレクトなど）を書く
}
“`

このコードでは、まず isLoggedIn が true かどうかを判定し、ログインしている場合に限り、内側の if 文で userRole が "admin" かどうかを判定しています。このように、外側の条件が満たされない限り内側の条件はチェックされない、という構造を作ることができます。

6.2. ネストの深さと問題点

ネストされた if 文は、直感的なロジックを表現できる反面、ネストが深くなりすぎるとコードの可読性が著しく低下し、理解やメンテナンスが難しくなるという問題があります。いわゆる「ネストのしすぎ」です。

javascript
if (conditionA) {
if (conditionB) {
if (conditionC) {
if (conditionD) {
// 条件AかつBかつCかつDの場合の処理
} else {
// A&B&C&!D
}
} else {
// A&B&!C
}
} else {
// A&!B
}
} else {
// !A
}

このようにネストが深くなると、各ブロックがどのような条件の組み合わせで実行されるのかを把握するのが難しくなります。

6.3. ネストを避けるための代替手段

ネストが深くなりすぎる場合は、以下のようないくつかのテクニックを使ってコードを平坦化し、可読性を向上させることができます。

  • 論理演算子を使った条件式の結合: 単純なAND条件のネストであれば、論理AND (&&) を使って一つの if 文にまとめることができます。
    “`javascript
    // ネストされた例
    if (conditionA) {
    if (conditionB) {
    // 処理
    }
    }

    // 論理ANDで平坦化
    if (conditionA && conditionB) {
    // 処理
    }
    * **早期リターン (Early Return) / 早期終了**: 関数の先頭などで、条件を満たさない場合にすぐに `return` して関数から抜け出す方法です。これにより、メインのロジックをネストさせずに書くことができます。javascript
    function processData(data) {
    // 無効なデータなら早期に終了
    if (!data) {
    console.log(“データがありません。”);
    return; // ここで関数を終了
    }

    // データの形式が正しくないなら早期に終了
    if (typeof data !== ‘object’ || !data.id) {
    console.log(“無効なデータ形式です。”);
    return; // ここで関数を終了
    }

    // 全てのチェックを通過したら、メインの処理を行う（ネストせずに済む）
    console.log(“データを処理します: ” + data.id);
    // …
    }
    “`
    早期リターンを使うと、「この条件を満たさなければ、そもそもこれ以降の処理は不要だ」という意図をコードで明確に表現できます。

ネストされた if 文は避けられない場面もありますが、深くなりすぎていると感じたら、これらの代替手段を検討してみましょう。

7. 三項演算子 (条件演算子)

if...else 文は、条件によって実行する 処理 を分けるのに使われます。一方、条件によって 取得する値 を変えたい場合に、if...else 文よりも簡潔に記述できるのが 三項演算子 です。

三項演算子は、JavaScriptで唯一の三項（三つのオペランドをとる）演算子です。

7.1. 構文と実行フロー

三項演算子の構文は以下のようになります。

javascript
条件式 ? 真の場合の値または式 : 偽の場合の値または式;

  • 条件式: if 文と同じく、評価結果が Truthy または Falsy になる式です。
  • ?: 条件式と、真の場合の値を区切る記号です。
  • 真の場合の値または式: 条件式 が Truthy と評価された場合に、この演算子全体の評価結果となる値や式です。
  • :: 真の場合と偽の場合の値を区切る記号です。
  • 偽の場合の値または式: 条件式 が Falsy と評価された場合に、この演算子全体の評価結果となる値や式です。

実行フロー:

  1. まず 条件式 が評価されます。
  2. 評価の結果が Truthy であれば、? の直後の 真の場合の値または式 が評価され、その評価結果が三項演算子全体の最終結果となります。
  3. 評価の結果が Falsy であれば、: の直後の 偽の場合の値または式 が評価され、その評価結果が三項演算子全体の最終結果となります。

どちらの場合も、評価されなかった方の式は実行されません。

7.2. サンプルコードと if…else との使い分け

三項演算子は、主に変数に代入する値や、関数の引数に渡す値を、条件によって切り替えたい場合に便利です。

例1: 合否の文字列を決定

“`javascript
let score = 75;
let result;

// if…else を使った場合
if (score >= 80) {
result = “合格”;
} else {
result = “不合格”;
}
console.log(“結果: ” + result); // 結果: 不合格

// 三項演算子を使った場合
let resultTernary = score >= 80 ? “合格” : “不合格”;
console.log(“結果 (三項演算子): ” + resultTernary); // 結果 (三項演算子): 不合格
“`

このように、ある変数の値を条件によって決定したい場合に、三項演算子を使うと1行で簡潔に書くことができます。

例2: メッセージの切り替え

“`javascript
let age = 20;
let message = age >= 18 ? “成人です” : “未成年です”;
console.log(“あなたは” + message); // あなたは成人です

let isAdult = age >= 18 ? true : false; // これは age >= 18 と同じ意味
console.log(“成人か？ ” + isAdult); // 成人か？ true
“`

if…else 文との使い分けの考え方:

  • 三項演算子を使うべき場面:
    • 条件によって 取得する値 を変えたい場合。
    • その条件分岐が比較的単純であり、1行で記述できる場合。
    • 例: 変数の初期値設定、関数の戻り値の決定、JSX（Reactなどで使う構文）内での条件付き表示。
  • if...else 文を使うべき場面:
    • 条件によって実行する 処理 が異なる場合（値を返すのではなく、何らかの副作用（画面表示、ファイル操作など）を伴う処理）。
    • 条件式や、それぞれのブロック内の処理が複数行に渡るなど、複雑な場合。
    • 可読性を優先したい場合。三項演算子は簡潔ですが、複雑になるとかえって読みにくくなります。

一般的に、三項演算子は「式」であり、if 文は「文」であると理解すると使い分けがしやすくなります。「式」は評価されると結果として値を持ちますが、「文」は特定の処理を実行するだけで値を持ちません（例外はありますが、ここでは基本的な理解として）。

例えば、console.log は値を返さない「文」です。これを三項演算子の中に無理やり書くこともできなくはありませんが、推奨されません。

javascript
// 推奨されない書き方
score >= 80 ? console.log("合格") : console.log("不合格");

これは動きますが、三項演算子が本来意図している「値の選択」という目的から外れていますし、読みにくいです。このような場合は素直に if...else 文を使うべきです。

javascript
// 推奨される書き方
if (score >= 80) {
console.log("合格");
} else {
console.log("不合格");
}

結論として、簡単な値の選択には三項演算子、それ以外の処理や複雑な分岐には if...else 文を使うのが良いプラクティスです。

8. 実践的な例と応用

ここまで学んだ if 文、if...else 文、else if 文、条件式の書き方、そして三項演算子を使って、より実践的なシナリオでの応用例を見てみましょう。

8.1. ユーザー入力の検証

ユーザーがフォームなどから入力したデータが、期待する形式や条件を満たしているかを検証することは、ほとんどのアプリケーションで必要になります。if 文は、この入力検証に不可欠です。

例: ユーザーに年齢を入力してもらい、それが有効な数値であり、かつ特定の範囲内であるかをチェックする。

“`javascript
// 仮のユーザー入力値 (promptなどで取得した文字列と想定)
let userInputAge = “25”; // または “abc”, “-10”, “” など

// 1. 数値に変換を試みる
let age = parseInt(userInputAge); // 文字列を整数に変換
// parseInt() は、変換できない場合は NaN (Not-a-Number) を返す

// 2. 入力値を検証する
if (isNaN(age)) {
// isNaN() は、値が NaN の場合に true を返す関数
console.log(“エラー: 有効な数値を入力してください。”);
} else if (age < 0) {
console.log(“エラー: 年齢は0以上である必要があります。”);
} else if (age > 120) {
console.log(“エラー: 年齢が大きすぎます。”);
} else {
// 全てのチェックを通過した場合
console.log(“有効な年齢です: ” + age);
// 有効な年齢を使った次の処理へ進む
}
“`

この例では、parseInt() が返す可能性のある NaN という特殊な値を isNaN() を使ってチェックしています。isNaN(age) という条件式は、age が数値として無効な場合に true となります。複数の else if を使って、様々な無効なケースや条件に応じたメッセージを表示しています。

8.2. Webサイトでの要素の表示・非表示切り替え

Web開発では、ユーザーの状態や特定のデータに応じて、ページ上の要素を表示したり非表示にしたりすることがよくあります。JavaScriptでDOM要素のスタイルやクラスを操作する際に if 文が使われます。

例: ログイン状態とユーザーの役割に応じて、管理画面へのリンクを表示するかどうかを切り替える。

“`html

“`

“`javascript
// JavaScriptの例
// 実際のアプリケーションではサーバーからの応答などで取得する
let user = {
isLoggedIn: true, // ログインしているか
role: “admin” // ユーザーの役割 (“user”, “admin” など)
};
// または user = null; (未ログインの場合)

const dashboardLink = document.getElementById(‘dashboard-link’);
const adminLink = document.getElementById(‘admin-link’);

// ログイン状態をチェック
if (user && user.isLoggedIn) { // userが存在し、かつログインしている
dashboardLink.style.display = ‘block’; // ダッシュボードリンクを表示

// さらに管理者かどうかをチェック
if (user.role === ‘admin’) {
adminLink.style.display = ‘block’; // 管理画面リンクを表示
} else {
adminLink.style.display = ‘none’; // 管理画面リンクは非表示
}

} else {
// 未ログインの場合、両方のリンクを非表示にする（念のため）
dashboardLink.style.display = ‘none’;
adminLink.style.display = ‘none’;
}
“`

この例では、まず user オブジェクトが存在するか（ログインしているか）をチェックし (user && user.isLoggedIn の部分、論理ANDのショートサーキットも活用されています)、ログインしている場合にネストされた if 文で役割をチェックしています。このように、複数の条件を段階的にチェックする場合にネストや論理演算子を使った if 文が役立ちます。

8.3. ループ処理との組み合わせ

for 文や while 文のようなループ処理の中で if 文を使うことで、「配列やリストの要素を一つずつ見ていき、特定の条件を満たすものだけに対して処理を行う」といったことが可能になります。

例: 配列から偶数だけを抽出し、その合計を計算する。

“`javascript
let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let evenSum = 0;

for (let i = 0; i < numbers.length; i++) {
let currentNumber = numbers[i]; // 配列の現在の要素

// 現在の要素が偶数かどうか判定
if (currentNumber % 2 === 0) {
// 偶数であれば合計に加算
evenSum += currentNumber;
console.log(currentNumber + “は偶数です。合計に加算しました。”);
} else {
console.log(currentNumber + “は奇数です。スキップします。”);
}
}

console.log(“偶数の合計: ” + evenSum); // 2 + 4 + 6 + 8 + 10 = 30
“`

このコードでは、for ループで配列 numbers の各要素を順番に取り出し、ループの内部で if...else 文を使ってその要素が偶数か奇数かを判定し、偶数の場合にのみ evenSum に加算しています。ループ処理と if 文の組み合わせは、データ処理の多くの場面で非常に一般的です。

8.4. 関数の引数の検証

関数が期待する引数を正しく受け取ったか（型、範囲、存在など）をチェックし、不適切な場合はエラーを通知したり、処理を中断したりする際にも if 文が役立ちます。

例: 数値を受け取り、その平方根を計算する関数。数値以外の引数や負の数を受け取った場合はエラーとする。

“`javascript
function calculateSquareRoot(num) {
// 引数が数値型であること、かつ NaN でないことをチェック
if (typeof num !== ‘number’ || isNaN(num)) {
console.error(“エラー: calculateSquareRootの引数は数値である必要があります。”);
return NaN; // 無効な入力の場合は NaN を返すことにする
}

// 引数が負の数でないことをチェック
if (num < 0) {
console.error(“エラー: calculateSquareRootは負の数の平方根を計算できません。”);
return NaN; // 無効な入力の場合は NaN を返す
}

// 有効な数値の場合、平方根を計算して返す
let result = Math.sqrt(num);
console.log(num + “の平方根は” + result);
return result;
}

calculateSquareRoot(9); // 9の平方根は3 と表示され、3 が返る
calculateSquareRoot(-4); // エラーメッセージが表示され、NaN が返る
calculateSquareRoot(“hello”); // エラーメッセージが表示され、NaN が返る
calculateSquareRoot(NaN); // エラーメッセージが表示され、NaN が返る
“`

この例では、複数の if 文を使い、それぞれの条件（型が無効か、負の数か）で早期にチェックとエラー処理を行っています。条件を満たさない場合はメッセージを表示し、return で関数を終了（早期リターン）することで、不正な入力に対する後続の処理を防いでいます。

これらの実践例からわかるように、if 文は単独で使われるだけでなく、他の構文（ループ、関数など）と組み合わせて、プログラムの様々な側面で条件に応じた振る舞いを実現するために広く利用されています。

9. よくある間違いとデバッグのヒント

JavaScript初心者が if 文を使う際によく陥りやすい間違いや、問題が発生した場合のデバッグ方法について解説します。

9.1. よくある間違い

  • = (代入演算子) と ==/=== (比較演算子) の混同:
    これは最も多い間違いの一つです。if (x = 10) のように、条件式の中で値を代入してしまうことです。JavaScriptでは代入式も値を返すため、x = 10 は実行された後に 10 という値を返します。10 は Truthy な値なので、if (10) と同じになり、条件式は常に true と評価されてしまいます。意図せず if ブロックが常に実行される、というバグにつながります。
    対策: 常に比較演算子、特に厳密比較の === を使う習慣をつけましょう。コードエディタやリンターツール（ESLintなど）は、このような代入の可能性を警告してくれる機能を持っていることが多いです。
  • 波括弧 {} の省略による問題:
    前述したように、処理が1行の場合に波括弧を省略すると、後からコードを追加したときに意図しない挙動になります。
    対策: 処理が1行の場合でも、常に波括弧 {} を使うようにしましょう。
  • 条件式の誤り (論理演算子や比較の範囲ミス):
    && と || の使い分けを間違えたり、「〜以上かつ〜未満」といった範囲指定の条件式を間違えたりすることがあります。特に複雑な条件式では注意が必要です。
    対策: 条件式を小さな部分に分けて考え、それぞれの部分が正しく評価されるかを確認しましょう。必要に応じて括弧 () を使って評価の順番を明確にしましょう。また、Truthy/Falsyのルールをしっかり理解することも重要です（特に空配列 [] や空オブジェクト {} が Truthy であることなど）。
  • else if や else が意図しない if 文と結びついてしまう:
    else if や else は、直前の if または else if とセットになります。間に別の文を挟むと関連が切れてしまいます。
    javascript
    if (condition1) {
    // ...
    }
    console.log("別の処理"); // これが入ると...
    // 次の else if はシンタックスエラーになります！
    // else if (condition2) { // エラー
    // // ...
    // }
    対策: if, else if, else のブロックは、間に別の文を挟まずに続けて記述する必要があります。別の処理は条件分岐ブロックの外に書きましょう。

9.2. デバッグのヒント

条件分岐が期待通りに動作しない場合は、問題の原因を探るために「デバッグ」を行います。最も基本的で強力なデバッグツールは console.log() です。

  • 変数の値を確認する: 条件式に関わる変数の値が、想定通りの値になっているかを確認します。条件式の直前で変数の値を出力してみましょう。
    javascript
    let score = 75;
    let minPassScore = 80;
    console.log("現在のスコア:", score); // スコアの確認
    console.log("最低合格点:", minPassScore); // 最低合格点の確認
    if (score >= minPassScore) {
    // ...
    }
  • 条件式自体の評価結果を確認する: 条件式が true または false のどちらに評価されているかを直接出力してみましょう。
    javascript
    let age = 16;
    let isAdult = age >= 18;
    console.log("年齢は18歳以上か?:", isAdult); // age >= 18 の評価結果を確認
    if (isAdult) {
    // ...
    }
    あるいは、条件式全体を console.log の引数として渡すこともできます。
    javascript
    let age = 25;
    let isStudent = true;
    console.log("条件式 'age >= 18 && isStudent' の評価:", age >= 18 && isStudent); // true と表示されるはず
    if (age >= 18 && isStudent) {
    // ...
    }
  • どのブロックが実行されたか確認する: 各 if, else if, else ブロックの先頭に、実行されたことを示すメッセージを入れてみましょう。
    javascript
    let score = 75;
    if (score >= 90) {
    console.log("--> 優のブロックに入りました");
    // ...
    } else if (score >= 80) {
    console.log("--> 良のブロックに入りました");
    // ...
    } else if (score >= 70) {
    console.log("--> 可のブロックに入りました"); // score=75 なのでこれが表示される
    // ...
    } else {
    console.log("--> 不可のブロックに入りました");
    // ...
    }
    これにより、プログラムがどの条件に一致したと判断したのかを追跡できます。

console.log() 以外にも、ブラウザの開発者ツールやNode.jsのデバッガーを使うと、コードの実行を一時停止したり、ステップごとに実行したり、その時点でのすべての変数の値を確認したりすることができます。これはより高度なデバッグに非常に役立ちます。

デバッグはプログラミングにおいて非常に重要なスキルです。最初は難しく感じるかもしれませんが、console.log を積極的に活用するだけでも、問題解決能力は大きく向上します。

10. まとめ

この記事では、JavaScriptの if 文を使った条件分岐について、基本から応用まで詳しく解説しました。

  • if 文 は、最も基本的な条件分岐構文です。(条件式) が true の場合に {} 内の処理を実行します。
  • if...else 文 は、条件が true の場合の処理 (if ブロック) と、false の場合の処理 (else ブロック) を明確に分けることができます。どちらか一方のブロックだけが必ず実行されます。
  • else if 文 を使うことで、三つ以上の選択肢から一つを選ぶような多岐分岐を実現できます。上から順番に条件が評価され、最初に true になった条件のブロックだけが実行されます。
  • 条件式 は、評価結果がBoolean値 (true または false) になる式です。JavaScriptでは、true/false 以外の値も条件式として評価可能で、これらは Truthy な値と Falsy な値に分けられます。特にFalsyな値（false, 0, "", null, undefined, NaN, -0n）を理解しておくことが重要です。
  • 条件式を記述するには、二つの値を比較する 比較演算子 (===, !==, >, <, >=, <=) や、複数の条件を組み合わせたり真偽を反転させたりする 論理演算子 (&&, ||, !) を使用します。厳密比較 (===, !==) の使用を強く推奨します。論理AND (&&) と論理OR (||) には ショートサーキット評価 という重要な性質があり、簡潔なコードやエラー回避に利用できます。
  • if 文の中にさらに if 文を書く ネスト も可能ですが、深くなりすぎると可読性が低下するため、論理演算子による平坦化や早期リターンなどの代替手段も検討しましょう。
  • 三項演算子 (条件式 ? 値1 : 値2) は、簡単な条件分岐で 値 を選択したい場合に if...else より簡潔に記述できます。処理の実行には if...else、値の取得には三項演算子、と使い分けると良いでしょう。
  • if 文は、ユーザー入力の検証、UI要素の表示・非表示切り替え、ループ処理中の個別判定、関数の引数チェックなど、様々な 実践的な場面 で不可欠な役割を果たします。
  • = と ==/=== の混同や、波括弧 {} の省略などは初心者が陥りやすい 間違い です。常に注意し、console.log() などを活用して デバッグ するスキルを身につけましょう。

if 文とその関連構文は、JavaScriptの基礎中の基礎でありながら、あらゆるプログラムの「意思決定」を担う非常に強力なツールです。この記事で学んだことを活かして、様々な条件分岐を実際にコードに書いて試してみてください。

多くの練習を通じて、どのような条件に対してどのような if 文の形を使えば最も適切で分かりやすいコードになるのか、感覚を掴んでいくことが大切です。

次に学ぶべき条件分岐の構文としては、特定の値との一致で多くの分岐がある場合に便利な switch 文などがあります。しかし、まずは if 文をしっかりとマスターすることが、その後の学習の大きな助けとなるはずです。

11. 練習問題

最後に、ここまで学んだ内容を復習するための練習問題をいくつか用意しました。ぜひご自身でコードを書いて、理解度を確かめてみてください。

問題1: 点数による成績判定

変数 score に 0 から 100 までの数値（整数）が入っているとします。
この点数に応じて、以下の基準で成績（”優”, “良”, “可”, “不可”）を出力するコードを if...else if...else 文を使って書いてください。

  • 90点以上: 優
  • 80点以上 90点未満: 良
  • 70点以上 80点未満: 可
  • 70点未満: 不可

ヒント: if...else if...else 構文を使用しましょう。条件式の順番が重要です。点数の高い方から順に判定すると、それぞれの条件で「〇〇点未満かつ××点以上」という範囲を自然に表現できます。

問題2: 割引率の計算

購入金額を保持する変数 purchaseAmount があるとします。
以下の条件で割引率（0%, 5%, 10%）を計算し、最終的な支払金額を出力してください。支払金額は、購入金額から「購入金額 × 割引率」を引いた値です。

  • 5000円未満: 0%割引
  • 5000円以上 10000円未満: 5%割引
  • 10000円以上: 10%割引

ヒント: まず discountRate という変数を用意し、if...else if...else 文で条件に応じてその変数に割引率（例: 0.05, 0.10）を代入しましょう。最後に、purchaseAmount * (1 - discountRate) のように計算して支払金額を出力します。

問題3: ユーザー権限のチェック

ユーザー情報を保持するオブジェクト user があるとします。このオブジェクトには isLoggedIn（Boolean値）と role（文字列、”user”または”admin”）というプロパティがあるとします。

以下の条件をチェックし、適切なメッセージを出力してください。user オブジェクト自体が null または undefined である可能性も考慮してください（この場合はログインしていないとみなします）。

  • user オブジェクトが存在しない（null または undefined）か、ログインしていない場合 (isLoggedIn が false): 「ログインしてください。」
  • ログインしているが管理者でない場合 (isLoggedIn が true かつ role が “user”): 「一般ユーザー向けコンテンツです。」
  • ログインしていて管理者である場合 (isLoggedIn が true かつ role が “admin”): 「管理者向けコンテンツです。」

ヒント: 最初の条件（ログインしていない場合）は、!user || !user.isLoggedIn のように、論理ORと論理NOT、そして論理ANDのショートサーキットを活用すると簡潔に書けます。残りの条件は else if で続けて表現できます。

問題4: 三項演算子での値の決定

変数 temperature に現在の気温（数値）が入っているとします。
気温が25度以上なら「暑い」、そうでないなら「快適」という文字列を、変数 weatherComment に代入するコードを 三項演算子 を使って書いてください。

ヒント: 条件式 ? 値1 : 値2; の構文を確認しましょう。条件式は temperature >= 25 となります。

問題5: Truthy/Falsyの理解チェック

以下のそれぞれの値を条件式として if 文に入れた場合、ブロック内の console.log は実行されるでしょうか？ なぜそうなるのかを、その値が Truthy なのか Falsy なのかを踏まえて説明してください。

  • 0
  • 1
  • "" (空文字列)
  • " " (スペース1つだけの文字列)
  • null
  • undefined
  • [] (空の配列)
  • {} (空のオブジェクト)
  • NaN

ヒント: Falsy な値は7種類（記事で紹介した7つ）だけです。それ以外は全て Truthy です。それぞれの値がそのどちらに分類されるかを確認しましょう。if (値) { console.log("実行されます"); } else { console.log("実行されません"); } のようにコードを書いて試してみると、理解が深まります。

これらの問題を解くことで、if 文とその条件式の使い方、そして Truthy/Falsy の概念がよりしっかりと身につくはずです。

これで、JavaScriptの if 文に関する詳細な解説は終わりです。長時間お疲れ様でした。

if 文はJavaScriptプログラミングの基礎中の基礎であり、これをマスターすることは今後の学習において大きな強みとなります。この記事が、あなたのJavaScript学習の助けとなれば幸いです。

さらに学習を進める中で、switch 文やエラーハンドリング（try...catch 文）など、他の条件分岐や制御フローの構文についても学んでいくことになるでしょう。しかし、まずは if 文をしっかりと使いこなせるようになることが何より大切です。

頑張ってください！応援しています。

コメントする

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

上部へスクロール