この記事で分かること
- 条件分岐とは何か
if/else/else ifの基本構造- 複数行処理の書き方（ブロック）
switch文の使い方とbreakの役割- 実例で理解する条件分岐の書き方
JavaScriptのプログラムは通常、上から順番に処理されます。しかし、実際のアプリケーションでは「条件によって処理を変えたい」場面が必ず出てきます。
そのときに使うのが 条件分岐 です。JavaScriptでは主に次の2つの構文を使います。
if ～ else構文（2通り以上の処理を分岐）switch ～ case構文（複数の選択肢から処理を分岐）
if ～ else 構文（条件が真か偽かで処理を分ける）
if 文は、条件が true（真） の場合に処理を実行し、false（偽） の場合は else の処理を実行します。
if (条件) {
処理A; // 条件が真のとき
} else {
処理B; // 条件が偽のとき
}
else を省略して「条件が真のときだけ処理する」書き方もできます。
else if を使って条件を増やす
複数の条件を順番に判定したい場合は else if を使います。
if (条件1) {
処理1;
} else if (条件2) {
処理2;
} else {
処理3;
}
複数行の処理は { } で囲む（ブロック）
if 文は「直後の1行だけ」を処理します。複数行の処理をまとめたい場合は { } で囲みます。
if (条件)
処理1; // これだけ実行される
処理2; // 条件に関係なく実行される
if (条件) {
処理1;
処理2; // 条件が真のとき両方実行
}
実例：時間帯によって挨拶を変える
today = new Date();
h = today.getHours();
if ((h > 5) && (h <= 10)) {
document.write("おはようございます。");
} else if ((h > 10) && (h <= 17)) {
document.write("こんにちは。");
} else {
document.write("こんばんは。");
}
document.write("ただいま" + h + "時です。");
switch ～ case 構文（複数の選択肢から処理を分岐）
switch 文は、条件の値に応じて複数の処理から1つを選ぶときに使います。
switch (値) {
case 値1:
処理1;
break;
case 値2:
処理2;
break;
default:
その他の処理;
}
break を書かないと次の case に処理が流れてしまうので注意しましょう。
実例：曜日によってメッセージを変える
today = new Date();
switch (today.getDay()) {
case 0: // 日曜
document.write("今日は日曜!寝てる?遊びに行く?");
break;
case 6: // 土曜
document.write("明日は日曜日!計画は万全だよね?");
break;
default: // 平日
document.write("お仕事がんばってください!");
}
JavaScript 初心者におすすめの学習書籍
書籍で学ぶのが向いている人
- 紙の本で体系的に学びたい
- ネット記事だけだと情報が断片的に感じる
- 基本文法を順序立てて理解したい
条件分岐は JavaScript の基礎であり、書籍ではこれらを体系的に順序立てて学べるため、理解が深まりやすいです。
いちばんやさしい JavaScript の教本
写真や図が多く、手を動かしながら学べる初心者向けの入門書です。
if 文・switch 文など、基本を丁寧に理解できます。
この本で解決できること：
if/else/else ifの基本構造を視覚的に理解できる- 条件式の書き方や
true/falseの仕組みが分かる switch文とbreakの動作を正しく理解できる
確かな力が身につく JavaScript「超」入門
JavaScriptの基礎を体系的に学びたい方に向いている入門書です。
条件分岐の仕組みを深く理解し、実務レベルの基礎力を身につけられます。
この本で解決できること：
- 条件分岐のロジックを体系的に理解できる
- 複雑な条件式の組み立て方が身につく
- 実務で使える
if/switchの書き方が分かる
動画で理解を深めたい方へ（Udemy講座）
条件分岐はコードの基礎ですが、実際の動きを動画で見ると理解が一気に深まります。
Udemy では初心者向けに丁寧に解説された講座が多数あります。
初心者のためのJavaScript 完全入門
if 文・switch 文・関数など、JavaScriptの基礎を体系的に学べる人気講座です。
この講座で解決できること：
if/else/else ifの動きを動画で直感的に理解できるswitch文の処理の流れとbreakの役割が分かる- 複数条件を組み合わせたロジックの作り方が身につく
→ 初心者のためのJavaScript 完全入門（Udemy）
超JavaScript 完全ガイド 2026
基礎から応用まで幅広く学べる講座で、条件分岐の理解をさらに深めたい方に最適です。
この講座で解決できること：
- 条件分岐を含む複雑なロジックの読み書きができるようになる
- 実務レベルの
if/switchの使い分けが理解できる - 条件式の最適化やコードの整理方法が身につく
体系的に学びたい方へ（スクールという選択肢）
独学の限界を感じやすいポイント
- 条件式の組み立てで混乱しやすい
- コードの意図が理解できない
- コードレビューを受ける機会がない
- 学習の順番に自信が持てない
スクールでは、プロの講師が学習ロードマップを作成し、つまずきやすい部分を丁寧にサポートしてくれます。
無料相談で得られるメリット
- あなたのレベルに合わせた学習計画を作成
- 独学でつまずきやすい部分を事前に把握
- 学習方法の改善点をプロがアドバイス
- エンジニア転職を視野に入れたキャリア相談も可能
条件分岐に関するよくある質問（FAQ）
if と switch はどう使い分ければいい？
条件が「範囲」なら if、「特定の値の一致」なら switch が向いています。
else if は何回使ってもいい？
技術的には何回でも使えますが、条件が多い場合は switch の方が読みやすくなります。
break を書かないとどうなる？
switch 文では break を書かないと次の case に処理が流れてしまいます（フォールスルー）。
if の条件式は複数書ける？
&&（AND）や ||（OR）を使うことで複数条件を組み合わせられます。
まとめ
if文は「条件が真か偽か」で処理を分けるelse ifで条件を増やせる- 複数行の処理は
{ }で囲む switch文は「値に応じて複数の処理から選ぶ」構文breakを忘れると意図しない処理が実行される
