JavaScript else if文の使い方

この記事のポイント

  • 複数条件分岐を実現するelse if文の基礎知識
  • 多条件分岐における書き方のパターン
  • 実践的なコード例による理解の促進

目次

JavaScriptのelse if文とは?

JavaScriptのelse if文は、複数条件を順番に評価して、それぞれ異なる処理を実行できる条件分岐の構文です。if文だけでは「条件を満たす」か「満たさない」かの二択しか実現できませんが、else if文を使うことで「もしAならB、もしCならD、もしEならF...」といった複数条件の分岐処理が記述可能となります。

たとえば、ユーザーの年齢に応じて異なるメッセージを表示する場合、「20歳未満なら未成年向けメッセージ」「20歳以上65歳未満なら一般向けメッセージ」「65歳以上なら高齢者向けメッセージ」といった具合に、複数の条件と処理のペアが必要です。

こうした場面で特に役立つのが、これから紹介するelse if文でしょう。

else if文の特徴は、前の条件がfalseの場合にのみ評価される点です。この特徴により、複数条件の効率的な検証が可能となり、最初にtrueとなった条件の処理だけが実行される形です。

else if文は、条件分岐の数が増えても、コードを整理して読みやすく保つことができる重要な構文となります。

【関連】
JavaScriptをもっと詳しく学ぶならpaizaラーニング

基本構文

JavaScriptでelse if文を使った条件分岐の基本構文は、if文とelse文の間に配置されます。最初のif文に続けて記述し、条件式がfalseだった場合に次のelse if文の条件が評価される形です。

// 基本的なif-else if-else文 if (条件式1) { /* 条件式1がtrueの場合の処理 */ } else if (条件式2) { /* 条件式2がtrueの場合の処理 */ } else { /* すべての条件がfalseの場合の処理 */ } // 具体例 var animal = "トラ"; if (animal === "ライオン") { console.log("百獣の王です"); } else if (animal === "トラ") { console.log("縞模様の猛獣です"); } else { console.log("その他の動物です"); }

else if文は、必要な数だけ追加可能です。

条件は上から順番に評価され、trueと判定された最初の条件ブロックだけが実行されます。そこでもし、すべての条件がfalseの場合、最後のelse文(存在する場合)が実行される形です。

else if文の条件式では、比較演算子(===, !==, >, <, >=, <=)や論理演算子(&&, ||, !)が使用可能です。こうした比較演算子を活用すると、複雑な条件も表現できるでしょう。else if文は、多様なシナリオに対応した条件分岐を可能とする構文になります。

実用例

else if文は、JavaScriptプログラミングにおける多条件分岐の要です。

ここでは実用的なコード例を通して、else if文のさまざまな使い方を見ていきましょう。各コード例は、初心者の皆さんでも理解しやすいように簡潔な記述になっています。また、実際のプログラミングシーンを想定しているため、自分の環境に実装することも可能です。

このセクションでelse if文の基本から応用までを学んだあとは、多くのコードに触れてみてください。コードを書く、動かす、エラーの対処をする……といった経験を積むと、else if文のみならずJavaScriptプログラミングに不可欠な課題解決力や判断力なども次第に身についていくでしょう。

シンプルな使い方

以下のコード例は、else if文の最も基本的な使い方です。一つの変数に対して複数の値をチェックし、それぞれに異なる処理を割り当てます。条件は上から順に評価されていき、最初にtrueとなる条件の処理だけが実行される形です。

var animal = "ネコ"; if (animal === "イヌ") { console.log("ワンワン"); } else if (animal === "ネコ") { console.log("ニャーニャー"); } else if (animal === "ウシ") { console.log("モーモー"); } else { console.log("鳴き声不明"); }

実行結果:

ニャーニャー

複数のelse if文の連鎖

より多くの条件分岐が必要な場合は、以下のようにelse if文を連鎖させて使いましょう。このコード例では、各条件ブロックは独立しているため、コードの可読性を保ちながら複雑な分岐ロジックが表現できます。条件の追加も行いやすいテクニックでしょう。

var animalClass = "哺乳類"; var animal = "クジラ"; if (animalClass === "爬虫類") { console.log("代表はヘビやトカゲ"); } else if (animalClass === "鳥類") { console.log("羽毛を持っています"); } else if (animalClass === "哺乳類") { console.log(animal + "は哺乳類"); } else { console.log("その他の分類です"); }

実行結果:

クジラは哺乳類

比較演算子との組み合わせ

比較演算子(<, >, <=, >=)とelse if文を組み合わせると、数値の範囲に応じた条件分岐を実装できます。このテクニックは、例えば年齢や点数による区分けなどで活用できるでしょう。条件設定の際には、順序に注意することが大切です。

var weight = 4500; // ゾウの体重(kg) if (weight < 2000) { console.log("若いゾウか小型種"); } else if (weight < 4000) { console.log("成熟したアジアゾウ"); } else if (weight < 6000) { console.log("成熟したアフリカゾウ"); } else { console.log("非常に大きなゾウ"); }

実行結果:

成熟したアフリカゾウ

論理演算子との組み合わせ

複数の条件を1つのelse if文で評価する場合、論理演算子(&&, ||, !)を使います。これらの論理演算子を使うと「かつ」「または」「否定」の関係を表現できるとともに、複雑な条件も簡潔に記述可能となります。ただし、条件式の優先順位には注意しましょう。

var animal = "ペンギン"; var canFly = false; var canSwim = true; if (canFly && !canSwim) { console.log(animal + "は飛べるが泳げない"); } else if (!canFly && canSwim) { console.log(animal + "は泳げるが飛べない"); } else { console.log(animal + "はその他の能力パターン"); }

実行結果:

ペンギンは泳げるが飛べない

三項演算子による書き換え

シンプルなif-else if-else構造は、三項演算子を入れ子にすることで書き換えることも可能です。ただし書き換えを行うと、コードが簡潔になる一方で、複雑すぎる場合は可読性が下がる可能性があります。適切な場面かどうかを考える必要があるでしょう。

var animal = "キリン"; var neckLength = "長い"; var description = neckLength === "短い" ? animal + "は首が短い" : neckLength === "普通" ? animal + "は首が普通" : animal + "は首が長い動物です"; console.log(description);

実行結果:

キリンは首が長い動物です

関数内でのelse if文

関数内でelse if文を使用すると、入力内容に応じた異なる戻り値を返すことができます。データの変換や条件に基づく計算など、さまざまな用途で活用できる便利なコード例でしょう。

function getAnimalCategory(animal) { if (animal === "ライオン" || animal === "トラ") { return "ネコ科"; } else if (animal === "オオカミ" || animal === "イヌ") { return "イヌ科"; } else { return "その他"; } } console.log("トラは" + getAnimalCategory("トラ"));

実行結果:

トラはネコ科

入れ子になったelse if文

条件のなかにさらに条件を持つ場合は、else if文を入れ子(ネスト)にすることも可能です。入れ子は、複数の関連条件を階層的に評価する場合に便利な仕組みです。ただし、深すぎる入れ子は可読性を低下させることがあるため注意しましょう。

var animal = "クマ"; var color = "茶色"; if (animal === "クマ") { if (color === "白") { console.log("ホッキョクグマ"); } else if (color === "茶色") { console.log("ヒグマ系"); } } else { console.log("クマ以外"); }

実行結果:

ヒグマ系

switch文との比較

多くの条件分岐がある場合、switch文も選択肢の一つです。else if文は複雑な条件式に対応できる柔軟性がありますが、単一の値を比較する場合はswitch文のほうが読みやすくなることもあります。適材適所の選択が求められるでしょう。

var animal = "ワニ"; if (animal === "サメ") { console.log("海の捕食者"); } else if (animal === "ワニ") { console.log("河川の捕食者"); } else if (animal === "オオカミ") { console.log("森林の捕食者"); } else { console.log("その他"); }

実行結果:

河川の捕食者

まとめ

JavaScriptにおけるelse if文は、複数の条件に基づいた分岐処理を実現するうえで重要な構文です。この記事では、else if文の基本構文から実用的な使い方まで、初心者にもわかりやすく解説してきました。

else if文には、複数の条件を順番に評価し、最初にtrueとなった条件の処理のみを実行する特性があります。else if文のこの特性を活用すると、多段階の判断を必要とするシナリオを効率的に実装できるでしょう。また、比較演算子や論理演算子と組み合わせることで、より複雑な条件判断も可能になります。

条件分岐は、プログラミングを行ううえで避けて通れない基本要素です。

初心者の皆さんは、このページで学んだelse if文の使い方を実際のコードで試し、複数条件の処理に慣れることで、より柔軟で効率的なプログラミングスキルを身につけることができるでしょう。

実際に手を動かして練習することが、理解を深める最良の方法となります。

レベルを更に上げたい方はpaizaプログラミングスキルチェックへ

  1. paizaラーニングトップ
  2. リファレンス
  3. JavaScriptのリファレンス記事一覧
  4. JavaScript else if文の使い方