JavaScript else文の使い方

  • JavaScript
  • 構文
最終更新日:

この記事のポイント

  • if文と組み合わせて使用するelse文の基礎知識
  • else文とelse if文の使い分け
  • 実践的なコード例による条件分岐の理解促進

目次

JavaScriptのelse文とは？

JavaScriptにおけるelse文は、if文と組み合わせて使うことで、「それ以外のケース」に対応する条件分岐を実現する構文です。if文の条件がfalseの場合に実行される代替処理を定義します。

たとえば、「もしAならBを、そうでなければCを実行する」といった二者択一の処理においてelse文は有効です。ログイン状態や入力値の妥当性チェックなど、実際の開発において頻繁に利用されます

また、else if文を用いることで「もしAならB、もしCならD、それ以外ならE」といった多段階の条件分岐も記述可能です。

条件分岐はプログラムの流れを制御する基本技術であり、JavaScriptを学習する上で欠かせない概念です。

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

基本構文

JavaScriptでelse文を使った条件分岐の基本構文は、if文に続けて記述します。else自体は条件を持たず、前のif文またはelse if文の条件が全てfalseだった場合にのみ実行される形です。

// 基本的なif-else文 if (条件式) { // 条件式がtrueの場合に実行される処理 } else { // 条件式がfalseの場合に実行される処理 } // 具体例 var animal = "イヌ"; if (animal === "ネコ") { console.log("ニャーニャー"); } else { console.log("ネコ以外の動物です"); }

複数の条件を順番に評価したい場合は、else ifを使います。条件は上から順に評価されていき、trueとなった最初の条件の処理ブロックだけが実行される形です。

// if-else if-else文 if (animal === "イヌ") { console.log("ワンワン"); } else if (animal === "ネコ") { console.log("ニャーニャー"); } else { console.log("その他の動物です"); }

なお、else文は、if文と対になる構文です。プログラム内では、単独では使用できない点に注意が必要です。また、else if文は実質的には「else { if (...) { ... } }」の省略形ですが、JavaScriptのプログラム内では可読性を考慮した独立した構文として扱われています。

実用例

else文は、JavaScriptプログラミングで条件分岐を完成させる重要要素です。

このセクションでは具体的なコード例を通して、実際の使い方を見ていきましょう。各例は初心者でも理解しやすいようシンプルさを保ちながら、実用的な状況を想定するものを選んでいます。

条件分岐を効果的に使うことで、状況に応じた処理の振り分けやエラーハンドリングが可能になります。else文はif文で定義した条件に当てはまらない場合の「デフォルト処理」を定義するものであるため、プログラムの堅牢性を高める役割も果たすでしょう。

JavaScript初心者の方は、これから紹介するコード例を自分の環境に実装したうえで、ぜひとも動かしてみてください。さまざまなコードに触れて結果の出力やエラー対応を行っていると、JavaScriptプログラミングに不可欠な課題解決力や判断力なども次第に身についてくるでしょう。

シンプルなif-else文

以下のコード例は、else文の最も基本的な使い方です。条件が真か偽かによって処理を2つに分岐させます。このテクニックは、ユーザー入力の検証や、シンプルな条件分岐で役立ちます。二者択一のシチュエーションでは、コードの見通しが特に良くなるでしょう。

var animal = "ライオン"; var isPredator = true; if (isPredator) { console.log(animal + "は肉食動物です"); } else { console.log(animal + "は肉食動物ではありません"); }







実行結果：
ライオンは肉食動物です
else if文による多分岐
3つ以上の分岐が必要な場合は、else if文を活用します。以下のコード例は、複数の条件を順番に評価し、最初に条件を満たした処理だけが実行されるものです。このテクニックを使うと、複雑な条件分岐も見やすく実装できるでしょう。

  
var animal = "ウサギ";
var size = "小型";

if (animal === "ゾウ") {
  console.log("大きな動物です");
} else if (size === "小型") {
  console.log(animal + "は小型の動物です");
} else {
  console.log("その他の動物です");
}

  


  







実行結果:
ウサギは小型の動物です
三項演算子による簡略化
シンプルなif-else文を1行で表現したいときには、三項演算子を使いましょう。以下のテクニックは、変数への条件付き代入や、短いコードを分岐させる場面で特に役立ちます。可読性を保ちながらコードを簡潔にしたい場合に役立つパターンです。

  
var animal = "キリン";
var neckLength = "長い";

var description = neckLength === "長い"
  ? animal + "は首が長い動物です"
  : animal + "は首が普通の動物です";

console.log(description);

  


  







実行結果:
キリンは首が長い動物です
複数条件と組み合わせたelse文
複雑な条件判断を表現したい場合は、論理演算子（&&、||、!）とelse文を組み合わせましょう。「かつ」「または」「否定」の論理関係を使うことで、より細かい条件分岐が実現しやすくなります。

  
var animal = "ペンギン";
var canFly = false;
var canSwim = true;

if (canFly && canSwim) {
  console.log(animal + "は空も海も制覇できます");
} else if (!canFly && canSwim) {
  console.log(animal + "は泳ぎは得意ですが、飛べません");
} else {
  console.log("その他の能力パターンです");
}

  


  







実行結果:
ペンギンは泳ぎは得意ですが、飛べません
ネストしたif-else文
if-else文のネスト（入れ子）は、条件のなかにさらに条件がある場合に使うテクニックです。ネストには、複数条件が相互に関連する場合に役立つ一方で、入れ子が深すぎた場合に可読性が下がる特徴があります。条件分岐の構文を使うときには、読みやすさを意識することも大切でしょう。

  
var animal = "クマ";
var habitat = "森";
var isPolar = false;

if (animal === "クマ") {
  if (isPolar) {
    console.log("ホッキョクグマです");
  } else {
    console.log("森に住む" + animal + "です");
  }
} else {
  console.log("クマ以外の動物です");
}

  


  







実行結果:
森に住むクマです
switch文との比較
switch文は、多くの分岐がある場合の代替手段としてよく選択されるものです。ただし、複雑な条件にはif-else文のほうが適しています。両者の違いを理解し、状況に応じて適切な構文を選択することが重要でしょう。

  
var animal = "イルカ";

// if-else文による実装
if (animal === "イルカ") {
  console.log("イルカの鳴き声：キキキ");
} else if (animal === "クジラ") {
  console.log("クジラの鳴き声：ウォーン");
} else {
  console.log("不明な海洋生物です");
}

  


  







実行結果：
イルカの鳴き声：キキキ
関数内でのelse文活用
早期リターンパターンや条件付き戻り値の設定をしたいときには、関数内でelse文を使いましょう。このテクニックを活用すると、関数の処理フローを効率的に制御できます。コードの可読性も向上するでしょう。

  
function getAnimalSound(animal) {
  if (animal === "イヌ") {
    return "ワンワン";
  } else if (animal === "ネコ") {
    return "ニャーニャー";
  } else {
    return "不明な鳴き声";
  }
}

console.log("ネコの鳴き声: " + getAnimalSound("ネコ"));

  


  







実行結果:
ネコの鳴き声: ニャーニャー
フォーム検証でのelse文
ユーザー入力の検証は、Webアプリケーションでよく使われるelse文の応用例です。以下のコード例では、入力値が条件を満たすかどうかをチェックし、適切なフィードバックを返しています。

  
var age = 15;
var message;

if (age < 0) {
  message = "無効な年齢です";
} else if (age < 20) {
  message = "未成年です";
} else {
  message = "成人です";
}

console.log("検証結果: " + message);

  


  







実行結果：
検証結果: 未成年です
まとめ
JavaScriptにおけるelse文は、条件分岐を完成させるうえで重要な構文要素です。if文だけでは表現できない「それ以外の場合」を定義することで、あらゆる状況に対応するコードが書けるようになります。
この記事では、基本的なif-else構文から、else if文による多分岐、三項演算子での簡略化、ネストした条件分岐まで、さまざまなelse文の使い方を見てきました。これらのパターンを状況に応じて適切に選択することで、より読みやすく、効率的なコードが書けるようになるでしょう。
条件分岐は、プログラムの流れを制御する基本技術です。また、else文の理解はJavaScriptを習得するうえで非常に重要な要素になります。
JavaScript初心者の方は、このページで学んだ知識を活かし、さまざまな条件に対応する柔軟なコードを書いてみましょう。実際にコードを書いて試すことが、最も効果的な学習方法となります。
レベルを更に上げたい方はpaizaプログラミングスキルチェックへ





























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