JavaScriptのif文、switch文を使って条件分岐させる方法と使い方

JavaScriptに限らず、プログラミングではもし○○なら、○○するという処理はよく使います。

特定の条件下で処理を切り分けたい時、if文を使用すれば実現できます。

let age = 22;

if ( age >= 20 ){
    console.log("成年です");
}

このような条件分岐を書くことができるif文のほかに、switch文もありますが、プログラミング初心者の方は使い分けなどわからない部分も多いかと思います。

そこでこの記事ではこのように条件分岐を行うことができるif文、switch文について解説します。

基本の条件分岐処理 if

ifの構文は下記のようになっています。

if ( 条件式 ){
    /* 処理 */
}

条件式に一致したとき、{}で囲まれた/* 処理 */が実行されます。では、条件式に一致しなかったときの処理がある場合はどうしましょうか。

let age = 22;

if ( age >= 20 ){
    console.log("成年です");
}
else{
    console.log("未成年です");
}

elseを使用してifで定義した条件式に一致しない場合の処理を行うことができます。上記コードの場合、ageが20以上の場合に成年ですと表示され、そうでない場合には未成年ですと表示されます。

また、ifの後にさらに条件式を設定したい場合は、else if( 条件式 )を使用しましょう。

let age = 22;

if ( age >= 20 ){
    console.log("成年です");
}
else if( age >= 0 && age < 20){
    console.log("未成年です");
}
else{
    console.log("値が不適切です");
}

上記のように、条件式かつ条件式を表現する場合、条件式 && 条件式のように記述します。上記コードの場合、ageが20以上の場合に成年ですと表示され、ageが0以上かつ20未満の場合に未成年ですと表示され、いずれも当てはまらない場合値が不適切ですと表示されます。

完全一致の複数条件分岐ができるswitch文

条件分岐はif文だけでなくswitch文でも表現できます。

switch ( 変数 ){
    case 条件:
        /* 処理 */
        break;
    case 条件:
        /* 処理 */
        break;
    ....
    default:
        /* 処理 */
}

caseで指定した条件に完全一致した場合、case内の処理が実行されます。いずれのcaseにも一致しなかった場合はdefaultが実行されます。

switchはifと違って条件に完全一致しないと処理が実行されない点に注意しましょう。やや自由度が低いswitch文ですが、if文と違って処理速度が高速であるというメリットがあります。

ifとswitchの使い分け早見表

条件分岐を書くときに迷いやすいのが、「ifとswitchのどちらを使えばよいのか」という点です。
それぞれの特徴を整理すると、次のようになります。

使い分けの目安

具体例

ifが向いているケース（大小比較）

let score = 75;

if (score >= 80) {
  console.log("優");
} else if (score >= 60) {
  console.log("良");
} else {
  console.log("不可");
}

数値の範囲で判定する場合はifが適しています。

switchが向いているケース（完全一致）

let signal = "青";

switch (signal) {
  case "赤":
    console.log("止まれ");
    break;
  case "黄":
    console.log("注意");
    break;
  case "青":
    console.log("進め");
    break;
  default:
    console.log("不明な信号です");
}

1つの値に対して完全一致で分岐する場合はswitchが見やすくなります。

switch文の注意点

switch文で初心者がよくつまずくのが、breakの書き忘れです。

breakがない場合

let day = "土";

switch (day) {
  case "土":
    console.log("休日");
  case "日":
    console.log("休日");
  default:
    console.log("平日");
}

この場合、「土」に一致してもbreakがないため、その下の処理まで続けて実行されます。

出力結果：

休日
休日
平日

このように、一致したcase以降がすべて実行されてしまう現象を
フォールスルー（fall through）といいます。

正しい書き方（breakを入れる）

let day = "土";

switch (day) {
  case "土":
    console.log("休日");
    break;
  case "日":
    console.log("休日");
    break;
  default:
    console.log("平日");
}

breakを書くことで、そのcaseの処理が終わった時点でswitch文を抜けます。

あえてbreakを書かないケースもある

let day = "土";

switch (day) {
  case "土":
  case "日":
    console.log("休日");
    break;
  default:
    console.log("平日");
}

このように書くことで、「土」または「日」のどちらでも同じ処理を実行できます。

ポイントまとめ

• 複雑な条件や範囲判定 → if
• 完全一致で分岐が多い → switch
• switchではbreakの書き忘れに注意
• フォールスルーは理解して使えば便利

この2つを正しく使い分けられるようになると、コードの可読性がぐっと上がります。

結論

条件分岐は、プログラミングにおいて欠かすことのできない基本的な考え方のひとつです。

if文を使えば、大小比較や複数の条件を組み合わせた柔軟な判定ができ、さまざまな場面に対応できます。
一方、switch文は値が完全一致する場合の分岐に適しており、条件が整理されているときにはコードをすっきりと書けるという利点があります。

それぞれの特徴を理解し、状況に応じて適切に使い分けることで、より読みやすく保守性の高いプログラムを書くことができます。まずは基本構文をしっかり身につけ、実際にコードを書きながら理解を深めていきましょう。