【JavaScript】elseifとは？条件分岐の使い方を初心者向けにわかりやすく解説

フロントエンド開発•2025/2/15

はじめに

JavaScriptでプログラミングを始めると、最初に学ぶことのひとつが条件分岐です。
特定の条件を満たす場合だけ処理を実行したり、そうでない場合は別の処理に進んだりと、柔軟な分岐が必要になる場面はとても多いでしょう。

そして、JavaScriptには条件分岐の方法としてif文が基本としてありますが、その中でよく目にする構文のひとつにelse ifがあります。
実際には「javascript elseif」という表記で調べる方もいるかもしれませんが、JavaScriptの仕様ではスペースを挟み「else if」と書きます。

しかし、初めてプログラミングに触れる方にとっては、if文とelse文の後に登場する「else if」が、どのような意味を持ち、どんな場面で使うのかイメージしにくいこともあるかもしれません。
そこで本記事では、初心者の方にもわかりやすいよう、 JavaScriptのelseif (else if) を徹底解説していきます。

実務においても、条件が増える場面でelse ifを使うのは日常茶飯事です。
例えば、ユーザーの入力値に応じて画面表示を切り替えるケースや、さまざまな状態に応じて処理を振り分けるケースなど、現場では非常に多くのシーンで使われます。

ここからは、基本のif文との違いや書き方、さらに実際の業務を想定した具体例、ベストプラクティス、switch文との比較などを通じて、「javascript elseif」 の全体像を理解していきましょう。
初心者の方にも取り組みやすい形でまとめていますので、順番に読み進めることでコードを書きながら学んでみてください。

この記事を読むとわかること

JavaScriptにおけるif文・else文の基本
else if構文の書き方と具体的な利用シーン
実務に即した条件分岐の考え方とベストプラクティス
switch文との比較と選択のポイント
コードの可読性を高めるためのヒント

上記の内容を通じて、複数の条件を処理したいときに迷わずelse ifを使いこなせるようになるはずです。
それでは早速、順番に見ていきましょう。

JavaScriptにおける条件分岐の基本

JavaScriptで条件分岐をする方法として、まずはif文を押さえる必要があります。
if文を用いることで、指定した条件がtrueの場合にのみ実行する処理を記述できます。

例えば「ユーザーの入力した数値が10以上だったらメッセージを出す」といったロジックは、以下のように書けます。


const number = 15;

if (number >= 10) {
  console.log("値が10以上です");
}

上記の場合、numberが15なので、条件式(number >= 10)がtrueとなり、console.log("値が10以上です");が実行されます。
反対に、もしnumberが8だった場合はfalseとなり、この行は実行されません。

else文とは何か

ifだけでは「条件を満たさない場合」の処理が書けません。
そこで登場するのがelseです。
「もしも条件に当てはまらなければ○○する」というパターンを実装できます。


const number = 8;

if (number >= 10) {
  console.log("値が10以上です");
} else {
  console.log("値が10未満です");
}

ここでは、numberが10以上かどうかをチェックし、trueなら前者のメッセージを、そうでなければ後者のメッセージを表示しています。
elseは「そうでなければ」という意味を持つため、一連の条件分岐の最後に置くことで、書いた条件に当てはまらない場合の処理を一括して指定することができます。

条件が増えるときは？

1つの条件だけでは済まないケースは多々あります。
例えば、以下のように「変数scoreが80以上ならA評価、60以上ならB評価、それ以外はC評価にする」というイメージを考えてみましょう。
このときifとelseだけではやや足りず、そこにelse ifが登場します。

javascript elseif（else if）とは

JavaScriptで「elseif」とよく呼ばれる構文は、正しくはelse ifと半角スペースを挟んで記述します。
if文とelse文の間に入れる形で、「別の条件を追加したいとき」に使われます。

具体的には以下のような書き方です。


const score = 75;

if (score >= 80) {
  console.log("評価: A");
} else if (score >= 60) {
  console.log("評価: B");
} else {
  console.log("評価: C");
}

この例をざっくり言うと、まずscore >= 80の条件をチェックします。
trueなら「評価: A」と表示します。
もしfalseの場合には、次のelse if (score >= 60)に進みます。
ここで条件を満たしていれば「評価: B」を表示します。
どちらも満たさなければ最後のelseに到達し、「評価: C」を表示する流れです。

else if で追加の条件を増やせる

if文を拡張する形で、いくらでも条件を追加できるのがelse ifの特徴です。
極端に数が増えると読みづらくなるので注意が必要ですが、それでも2つや3つの条件を区別したいときなどは非常に便利です。


const food = "pizza";

if (food === "sushi") {
  console.log("和食です");
} else if (food === "pizza") {
  console.log("洋食です");
} else if (food === "ramen") {
  console.log("麺類ですね");
} else {
  console.log("特に分類なし");
}

このように複数条件を連続でチェックし、途中で該当したら処理を終えるイメージです。
最後のelseが実行されるのは、上記のどのfood条件にも合致しないケースとなります。

else if を実務に活かす具体例

ここからはもう少し実務よりの視点で、複数の条件を使うパターンを考えてみましょう。
実際には、ユーザー入力やAPI取得データの内容によって処理を分岐するシーンが多いです。

フォーム入力チェックでの活用

たとえば会員登録画面などで、ユーザーが入力したパスワードの強度をチェックするケースを想定してみます。
「英数字を含む8文字以上なら安全度が高い」「英数字を含むが6文字しかないならやや安全度が低い」といった基準を段階的に分けたい場合があります。


function checkPasswordStrength(password) {
  if (password.length >= 8 && /[0-9]/.test(password) && /[a-zA-Z]/.test(password)) {
    console.log("強度: 高い");
  } else if (password.length >= 6 && /[0-9]/.test(password) && /[a-zA-Z]/.test(password)) {
    console.log("強度: 中");
  } else {
    console.log("強度: 低");
  }
}

checkPasswordStrength("pass1234");
checkPasswordStrength("pass12");
checkPasswordStrength("abc");

上の例では、最初のif条件に当てはまらなければ次のelse ifをチェックし、それにも当てはまらなければ最後のelseが実行されます。
実際の開発では、さらに細かい基準を作ることもありますが、else ifを増やすほどにコードの見通しが悪くなるため、条件の整理が重要になります。

商品の在庫ステータス表示

ECサイトなどを想定すると、商品在庫ステータスを「残りわずか」「通常在庫」「在庫なし」などに振り分けることが考えられます。
例えば以下のように書くことができます。


function checkStockStatus(stockCount) {
  if (stockCount === 0) {
    console.log("在庫なし");
  } else if (stockCount < 5) {
    console.log("残りわずか");
  } else {
    console.log("在庫あり");
  }
}

checkStockStatus(0);   // 在庫なし
checkStockStatus(3);   // 残りわずか
checkStockStatus(10);  // 在庫あり

実務では「エラーが起きて数値が取得できない場合」といった特殊ケースも考慮したいところですが、基本的なelse ifの組み立て方はこのようにシンプルです。

日時や季節による処理分岐

たとえば、季節ごとに表示したいイベントバナーを切り替える機能がある場合、月を取得して以下のように実装できます。


function getSeasonBanner() {
  const now = new Date();
  const month = now.getMonth() + 1; // getMonth() は0~11を返すため +1

  if (month >= 3 && month <= 5) {
    console.log("春のセールバナーを表示");
  } else if (month >= 6 && month <= 8) {
    console.log("夏のセールバナーを表示");
  } else if (month >= 9 && month <= 11) {
    console.log("秋のセールバナーを表示");
  } else {
    console.log("冬のセールバナーを表示");
  }
}

getSeasonBanner();

ここでは4つの季節をベースにelse ifを使用しています。
実際は、さらに条件を加えて「端境期」のような中途半端な月をどうするか検討することもありますが、基本はこうした形で実装するのが一般的です。

switch文との比較

else ifとよく比較されるのがswitch文です。
switch文は、同じ変数に対して複数の値を比較したい場合に、ソースコードを見やすく整理できることがあります。

switch文の書き方

例えば、曜日ごとにメッセージを出し分ける例を挙げます。


const day = "Tuesday";

switch (day) {
  case "Monday":
    console.log("週の始まりです");
    break;
  case "Tuesday":
    console.log("ちょっと疲れが出るかもしれません");
    break;
  case "Wednesday":
    console.log("折り返し地点です");
    break;
  case "Thursday":
    console.log("週末が見えてきました");
    break;
  case "Friday":
    console.log("花金です");
    break;
  default:
    console.log("休日モードですね");
    break;
}

switch(day)で変数dayの値を判定し、それぞれのcaseに該当した処理を実行します。
breakを忘れると次のcaseまで処理が流れてしまうので注意が必要です。
defaultはelseと同様の役割を持ち、どのcaseにも当てはまらない場合に実行されます。

else if と switch の違い

else ifは複数の条件が数値・文字列・真偽値など多岐にわたる場合でも自由に記述できます。
一方、switch文は「ある変数が複数パターンのどれに当てはまるか」を判定するときに読みやすくなる傾向があります。

たとえば数値の範囲を判定する場合はelse ifのほうが書きやすいケースが多いです。
逆に、曜日や特定の状態値など「複数の具体的な候補のどれか1つに当てはまる」という場合は、switch文が見やすいことがあります。

結局は用途と好みにもよりますが、複数の条件式が複雑に入り組む場合にswitch文を使うとやや冗長になるケースがある点は押さえておきましょう。

javascript elseif の注意点とベストプラクティス

実際にコーディングしていると、else ifをいくつも並べて書きたくなる瞬間があります。
しかし、条件が増えれば増えるほど、コードの可読性が下がってしまう恐れもあります。
ここでは実務で意識しておきたいポイントをいくつか挙げます。

条件が多いなら早期returnを検討

特に関数の中で複雑な分岐を行う際、if文やelse if文が何段階にも重なることがあります。
たとえば以下のようなコードは、一見するとわかりやすいようで、分岐が多いと読みづらくなることがあります。


function processOrder(order) {
  if (!order) {
    console.log("注文データが存在しません");
  } else if (order.isCancelled) {
    console.log("注文はキャンセル済みです");
  } else if (order.isShipped) {
    console.log("すでに出荷が完了しています");
  } else {
    console.log("注文を処理中です");
    // 処理ロジックが続く
  }
}

ある程度は問題ありませんが、条件がさらに増えてくると読み手が混乱しやすくなります。
こうした場合は、先に「該当しない条件」をreturnで抜けることで、ネストを浅く保つ書き方をするのも1つの方法です。


function processOrder(order) {
  if (!order) {
    console.log("注文データが存在しません");
    return;
  }

  if (order.isCancelled) {
    console.log("注文はキャンセル済みです");
    return;
  }

  if (order.isShipped) {
    console.log("すでに出荷が完了しています");
    return;
  }

  console.log("注文を処理中です");
  // 処理ロジックが続く
}

このように「不要な場合は早めに関数を終わらせる」ことで、else ifが連鎖することを防ぎ、見やすいコードを書くことができます。

else をむやみに使わない

if / else / else ifは非常に便利ですが、場面によってはすべてをif文で統一し、elseを使わないスタイルにすることもあります。
ただし、これはチームのコーディング規約や好みによります。

メリット: 条件の分岐パターンを1つずつ独立して書ける
デメリット: どれかが当てはまったら残りの分岐をチェックしなくても良いのに、見た目では伝わりにくくなる

実務ではチームで統一したコーディングスタイルがある場合が多いので、その方針に合わせて利用するのが安心です。

条件を関数に切り出して読みやすくする

else ifの中身が長くなりそうな場合は、その分岐条件自体を関数化してみるのも良い手段です。
例えば以下のように書くと、可読性が少し上がる場合があります。


function isAdult(age) {
  return age >= 20;
}

function isTeenager(age) {
  return age >= 13 && age <= 19;
}

function checkAgeCategory(age) {
  if (isAdult(age)) {
    console.log("成人とみなします");
  } else if (isTeenager(age)) {
    console.log("未成年（ティーン）です");
  } else {
    console.log("子供または20歳以上ではない未成年です");
  }
}

checkAgeCategory(25);
checkAgeCategory(17);
checkAgeCategory(10);

こうすることで、if (isAdult(age))などの表記が人間の言葉に近くなり、意図を把握しやすい場合があります。

条件分岐と実務での連携ポイント

実務で条件分岐を使う場面は、フロントエンドにとどまりません。
バックエンドから来るデータによって表示を切り替えたり、ユーザー操作によって異なる処理を割り振ったり、テストコードを書く際にもさまざまな分岐が登場します。

APIレスポンスの分岐例

APIから返ってきたステータスコードに応じて処理を変えるケースは典型例です。


async function fetchUserData() {
  const response = await fetch("https://example.com/api/user");
  
  if (response.status === 200) {
    const data = await response.json();
    console.log("取得成功:", data);
  } else if (response.status === 404) {
    console.log("ユーザーが見つかりません");
  } else {
    console.log("エラーが発生しました");
  }
}

こうした書き方は現場でもよく目にするでしょう。
特にステータスコードが複数返り得るときには、else ifで整理しておくと意図が明確に伝わりやすいです。

フロントエンドとUI表示

ReactやVue.jsなどのフレームワークを使ったUI開発でも、状況に応じて出し分ける処理でelse ifを使うことがあります。
例として、「ログイン成功」「入力内容不備」「サーバーエラー」などそれぞれで画面にメッセージを表示する場合、以下のように書くイメージです（あくまでイメージ例です）。


function LoginMessage({ status }) {
  if (status === "success") {
    return <p>ログインに成功しました</p>;
  } else if (status === "error") {
    return <p>ログインに失敗しました。入力内容を確認してください</p>;
  } else {
    return <p>サーバー側で問題が発生しました</p>;
  }
}

こうしたときもelse ifが直感的に理解しやすい表現といえます。

大規模化の対処法

条件分岐をあちこちで頻繁に使うと、コードが煩雑になる問題が生じやすくなります。
JavaScriptのelse ifが悪いわけではなく、分岐ロジックが増えすぎるとどんなコードでも見通しが悪くなりがちです。

そこで、大規模開発では状態管理やデザインパターンを取り入れ、複雑な分岐をまとめたり、分割したりすることがよくあります。
例えばReduxやFluxパターンなどの状態管理ライブラリを導入して、「ここでしか分岐をしない」といったルールを設ける場合もあるでしょう。

また、関数型プログラミングやオブジェクト指向プログラミングのテクニックを活用し、同種の分岐をモジュールにまとめることで、else ifの乱立を避ける設計を行うこともあります。
もし将来的に大規模なコードへと発展していくなら、こうした設計面を意識してelse ifを使いこなす必要があるかもしれません。

複雑な分岐をむやみに書き連ねると、どこが変更に強いか把握しづらくなります。
同じようなif文・else if文が重複していないか、コードレビューでチェックするとよいでしょう。

実装で悩みがちなポイント

ここでは初心者の方が「javascript elseif」を使う中で、つまずきがちなポイントをいくつか補足します。

else if の書き方を間違える

JavaScriptでは「else if」の間に半角スペースを入れます。
「elseif」や「elseiff」などと書いてしまうとエラーになります。
細かいですが、初心者ほどミスしがちな箇所なので注意してください。

比較演算子の誤使用

=と==と===の使い分けは、初心者にはやや難しく感じるかもしれません。
=は代入、==は「抽象的な比較」、===は「厳密な比較」を行います。
else ifの条件で文字列や数値を比較するときは、=== を使うことが多いです。
曖昧な比較を避けることで、思わぬバグを減らせることが理由です。

else if が多段になる場合の見直し

やむを得ず条件が増えることはありますが、if文・else if文が5段階、6段階…と増えるようなら、一旦ロジックをまとめ直すタイミングかもしれません。
場合によっては連想配列（オブジェクト）やswitch文への書き換え、あるいは早期returnの採用を検討しましょう。

現場でよくあるQ&A

Q: else if の中でも改めて if を書いていい？

A: もちろん可能ですが、条件式として意味が重複したり、ネストが深くなりすぎたりしないように注意しましょう。
例えばif (A) { ... } else { if (B) { ... } else { ... } }という書き方は動きますが、可読性に問題が出やすいです。

Q: else if を厳密に書くメリットは何？

A: if (A) 〜 else if (B) 〜 else if (C) 〜という形式にすることで、上から順に条件を排他的にチェックできる点です。
また、見た目の上で「次の条件は前の条件がfalseだった場合のみチェックされる」という流れがわかりやすい利点もあります。

Q: switch文でも同じことができるのに、なぜelse ifを使うことが多い？

A: switch文は「特定の変数がいずれかの値である」というパターンで強みを発揮しますが、「数値の大小比較」や「複合条件の判定」には向いていない場合が多いからです。
実務で最もよく出てくるのは範囲比較や複合条件なため、else ifを選ぶケースが多いでしょう。

結局は、複数条件をわかりやすく表現できるかどうかが大事です。
チームのコーディングスタイルや、読みやすさを基準に選択しましょう。

まとめ

ここまで、 「javascript elseif (else if) 」をテーマに、基本の書き方や使いどころ、switch文との違い、実務での注意点などを解説してきました。

else ifはif文とelse文の間に条件を追加するために用いる
基本的な構文は「if () {} else if () {} else {}」の形
実務では複数条件を段階的にチェックするシーンが頻繁にある
条件が多すぎる場合は早期returnなどでコードをシンプルに保つ
比較対象が明確なパターンならswitch文も選択肢になる

最初は覚えることが多いように感じるかもしれませんが、条件分岐はどんなプログラミング言語でも基本的な機能です。
JavaScriptを使っていると、UI表示やバックエンドとの連携など、あらゆる場面で条件分岐のロジックが必要となるでしょう。

ぜひこの記事を参考に、else ifを使いこなしながら、自分のコードをより読みやすく、保守しやすい形に整えてみてください。
それによって、小規模なスクリプトから本格的なアプリケーション開発まで、幅広く対応できるようになるはずです。
今後の開発で条件分岐を使うときに、迷ったり複雑化しそうになったら、もう一度この記事のポイントを振り返ってみましょう。