JavaScriptの条件分岐｜if文・else文・switch文の使い方を初心者向けに解説
JavaScriptのプログラムは通常、上から順番に処理されます。しかし、実際のアプリケーションでは「条件によって処理を変えたい」場面が必ず出てきます。
そのときに使うのが 条件分岐 です。JavaScriptでは主に次の2つの構文を使います。
- if ～ else 構文（2通り以上の処理を分岐）
- switch ～ case 構文（複数の選択肢から処理を分岐）
if ～ else 構文（条件が真か偽かで処理を分ける）
if文は、条件が true（真） の場合に処理を実行し、false（偽） の場合は else の処理を実行します。
処理A; // 条件が真のとき
} else {
処理B; // 条件が偽のとき
}
else を省略して「条件が真のときだけ処理する」書き方もできます。
else if を使って条件を増やす
複数の条件を順番に判定したい場合は else if を使います。
処理1;
} else if (条件2) {
処理2;
} else {
処理3;
}
複数行の処理は { } で囲む（ブロック）
if文は「直後の1行だけ」を処理します。複数行の処理をまとめたい場合は { } で囲みます。
処理1; // これだけ実行される
処理2; // 条件に関係なく実行される
if (条件) {
処理1;
処理2; // 条件が真のとき両方実行
}
実例：時間帯によって挨拶を変える
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つを選ぶときに使います。
case 値1:
処理1;
break;
case 値2:
処理2;
break;
default:
その他の処理;
}
break を書かないと次の case に処理が流れてしまうので注意しましょう。
実例：曜日によってメッセージを変える
switch (today.getDay()) {
case 0: // 日曜
document.write(“今日は日曜!寝てる?遊びに行く?”);
break;
case 6: // 土曜
document.write(“明日は日曜日!計画は万全だよね?”);
break;
default: // 平日
document.write(“お仕事がんばってください!”);
}
JavaScript 初心者におすすめの学習書籍
書籍で学ぶのが向いている人
- 紙の本でじっくり読み込みたい
- 体系的にまとまった教材で学びたい
- ネット記事だけだと情報が断片的に感じる
JavaScriptは「文法 → DOM → イベント → 非同期処理」という順で学ぶと理解しやすいです。
以下の書籍はこの流れに沿って学べるため、初心者でも挫折しにくい構成になっています。
いちばんやさしい JavaScript の教本
手を動かしながら JavaScript を学びたい方には、初心者向けにやさしく解説された実践型の入門書があります。
実際に動くサンプルを使って学べるため、基本をしっかり身につけたい方に最適です。
この本で解決できること：
- JavaScriptの基本文法をやさしく理解できる
- 手を動かしながら学べるため、挫折しにくい
- 「まず動くものを作ってみたい」が実現できる
確かな力が身につくJavaScript「超」入門
JavaScriptの基礎を体系的に学びたい方には、こちらの書籍がとても分かりやすくおすすめです。
初心者がつまずきやすいポイントを丁寧に解説している入門書です。
この本で解決できること：
- JavaScriptの基礎を体系的に学び直せる
- 初心者がつまずきやすい部分を重点的に理解できる
- 実務で使えるレベルの基礎力を身につけられる
体系的に学びたい方へ（スクールという選択肢）
独学の限界を感じやすいポイント
- エラーの原因が分からず、調べても解決できない
- 学習の順番に自信が持てない
- モチベーションが続かず、途中で止まってしまう
- 実務レベルのコードレビューを受ける機会がない
こういった悩みが増えてきたら、「質問できる環境」や「学習ロードマップを一緒に考えてくれる人」がいるだけで、学習効率は大きく変わります。
無料相談で得られるメリット
- あなたの現在のレベルに合わせた学習ロードマップを作成してくれる
- 独学で詰まりやすいポイントを事前に教えてくれる
- 学習方法の改善点をプロがアドバイスしてくれる
- エンジニア転職を考えている場合、キャリア相談も可能
JavaScript を独学で学んでいると、「もっと効率よく理解したい」「プロに質問しながら進めたい」と感じる方も多いです。
そのような方には、未経験からエンジニアを目指せる DMM WEBCAMP の学習コースも選択肢のひとつです。
無料相談では、学習ロードマップの作成やキャリア相談など、独学では得られないサポートを受けられます。
まとめ
- if文は「条件が真か偽か」で処理を分ける
- else if で条件を増やせる
- 複数行の処理は { } で囲む
- switch文は「値に応じて複数の処理から選ぶ」構文
- break を忘れると意図しない処理が実行される
