JavaScript if文の使い方

  • JavaScript
  • 構文
最終更新日:

この記事のポイント

  • JavaScript開発における条件分岐の基本構文と特徴
  • if文のさまざまな記述パターンと活用方法
  • 実践的なコード例による条件分岐の理解促進

目次

JavaScriptのif文とは？

JavaScriptにおけるif文は、条件に基づいてコードの実行経路を分岐させる際に用いる基本的な制御構文です。

「もし条件Aが成立するなら処理Bを実行し、そうでなければ処理Cを行う」といった判断をプログラム内に取り入れることができます。

たとえば、ログインしているユーザーにだけコンテンツを表示したり、年齢に応じたメッセージを出力したりと、ユーザーの入力や状態に応じた柔軟な処理が実現できます。

if文は、JavaScriptを初めて学ぶ方にとって、論理的思考を養ううえでの重要な第一歩となります。if文による条件式は真偽値（true/false）を返す式で記述し、その結果に基づいて処理が分岐します。複雑な条件も論理演算子を使って表現できるため、プログラミングの表現力を大きく広げる要素になるでしょう。

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

基本構文

JavaScriptの条件分岐でif文を使う場合の基本構文は、とてもシンプルです。「if」キーワードのあとに丸括弧（）内に条件式を記述し、そのうしろで波括弧{}で囲んだ処理ブロックを続けます。条件式がtrueと評価された場合のみ、波括弧内のコードが実行される形です。

// 基本的なif文 if (条件式) { // 条件式がtrueの場合に実行される処理 } // 具体例 if (animal === "イヌ") { console.log("ワンワン"); }

条件が満たされない場合の処理を指定する場合は、「else」キーワードを使います。また、複数の条件を順番に評価したい場合は、「else if」を使用しましょう。

// if-else文 if (animal === "イヌ") { console.log("ワンワン"); } else { console.log("鳴き声は不明です"); } // if-else if-else文 if (animal === "イヌ") { console.log("ワンワン"); } else if (animal === "ネコ") { console.log("ニャーニャー"); } else { console.log("鳴き声は不明です"); }

条件式の結果がtrueかfalseに変換できる値であれば、さまざまな表現が可能です。JavaScriptでは、0、空文字列、null、undefined、NaNはfalseとして評価されます。また、それ以外の値はtrueとして評価される形です。これらの特性を理解することで、より柔軟な条件分岐を作成できます。

実用例

if文はJavaScriptプログラミングのあらゆる場面で活用される基本的な制御構文です。ここでは初心者にもわかりやすいコード例を通して、実際の使い方を見ていきましょう。

条件分岐のテクニックを身につけると、ユーザー入力に応じた処理や特定条件での動作変更といったインタラクティブなWeb機能が実現できます。こうした機能は、フォームのバリデーションやコンテンツの条件付き表示など、実用的なシナリオで活躍するでしょう。

if文を中心とする条件分岐をマスターするためには、自分の開発環境で実際にコードを書き、動かしてみる経験が必要です。

コードを実装するとエラーや予期せぬ動作に直面することもありますが、その対処をするなかでJavaScriptプログラミングに不可欠な課題解決力や判断力などが身についてくるでしょう。

if文を早く理解しJavaScriptプログラミングのスキル向上につなげたい方は、このセクションで紹介する実用例を参考にしながら、ぜひとも多くのコードを書いてみてください。

シンプルな条件分岐

以下のコード例は、if文の最も基本的な使い方です。単一の条件に基づき処理を分岐させるものになります。例えば、特定の値と一致するかどうかの判定や、数値の大小関係に基づく処理などで使用できるでしょう。

シンプルな条件判断から学習を始めると、if文の仕組みが直感的に理解しやすくなるはずです。

var animal = "キリン"; if (animal === "キリン") { console.log("キリンは首が長い動物です"); } var height = 180; if (height > 170) { console.log("平均身長より高いです"); }







実行結果：
キリンは首が長い動物です
平均身長より高いです
複数条件の評価
複数の条件を組み合わせたい場合は、if文のなかで論理演算子（&&、||、!）を使用します。論理演算子を活用すると、「かつ」「または」「否定」などの論理関係を表現できるため、より複雑な条件判断が可能になるでしょう。
また、このテクニックを使うと、実世界の多様な判断基準をコードで表現できるようになります。

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

if (animal === "ペンギン" && canSwim) {
  console.log("ペンギンは泳げる鳥です");
}

if (canFly || canSwim) {
  console.log("飛ぶか泳げるかのどちらかができます");
}

  


  







実行結果:
ペンギンは泳げる鳥です
飛ぶか泳げるかのどちらかができます
if-else文による分岐
条件を満たす場合と満たさない場合で異なる処理を行いたい場合は、if-else文を使います。このテクニックを使用すると、「もし〜ならAを、そうでなければBを実行する」という二者択一の処理を実現できるでしょう。どのような条件でも、2つの処理パスのうちいずれかが必ず実行されることになります。

  
var animal = "ライオン";
var isCarnivore = true;

if (isCarnivore) {
  console.log(animal + "は肉食動物です");
} else {
  console.log(animal + "は肉食動物ではありません");
}

var age = 3;
if (age < 1) {
  console.log("赤ちゃん" + animal + "です");
} else {
  console.log("成長した" + animal + "です");
}

  


  







実行結果:
ライオンは肉食動物です
成長したライオンです
else-if文による多分岐
3つ以上の分岐パターンが必要な場合は、else-if文を使いましょう。以下のコード例を使うと、複数の条件を順番に評価し、最初にtrueとなった条件の処理ブロックだけが実行されます。このテクニックを活用すると、複数の選択肢から状況に応じた適切な処理が選択できるでしょう。

  
var animal = "トラ";
var weight = 150;

if (weight < 50) {
  console.log(animal + "は小型の個体です");
} else if (weight < 100) {
  console.log(animal + "は中型の個体です");
} else if (weight < 200) {
  console.log(animal + "は大型の個体です");
} else {
  console.log(animal + "は超大型の個体です");
}

  


  







実行結果:
トラは大型の個体です
条件式の応用
JavaScriptでは、条件式にさまざまな表現を使用できます。具体的には、比較演算子だけでなく、メソッドの戻り値や変数の存在チェックなども条件として利用可能です。実際のプログラミングでは、このような多様な条件判定パターンを組み合わせて使うことが多いでしょう。

  
var animals = ["キツネ", "タヌキ", "イヌ"];
var searchTerm = "タヌキ";

if (animals.includes(searchTerm)) {
  console.log(searchTerm + "が見つかりました");
}

var animalInfo = { name: "カバ", habitat: "水辺" };
if (animalInfo.habitat === "水辺") {
  console.log(animalInfo.name + "は水辺に住んでいます");
}

  


  







実行結果:
タヌキが見つかりました
カバは水辺に住んでいます
三項演算子による簡略化
シンプルなif-else文は、三項演算子（condition ? trueの場合 : falseの場合）を使って簡潔に書くことも可能です。一行で条件分岐を表現できるため、コードを読みやすく保ちながらも簡潔に記述したい場合に特に便利なテクニックになります。

  
var animal = "シマウマ";
var hasStripes = true;

// 三項演算子の基本形
var description = hasStripes
  ? animal + "はしま模様があります"
  : animal + "はしま模様がありません";

console.log(description);

  


  







実行結果：
シマウマはしま模様があります
ネストしたif文
条件のなかでさらに条件を持つ複雑な分岐が必要な場合は、if文をネスト（入れ子）にしましょう。入れ子は、複数の条件が相互に関連している場合に使用するものです。ただし、あまりに深くネストすると可読性が低下します。注意しましょう。

  
var animal = "ゾウ";
var age = 10;
var weight = 5000;

if (animal === "ゾウ") {
  if (age < 5) {
    console.log("若いゾウです");
  } else {
    if (weight > 4000) {
      console.log("成熟した大きなゾウです");
    } else {
      console.log("成熟した標準的なゾウです");
    }
  }
}

  


  







実行結果:
成熟した大きなゾウです
switch文との使い分け
多くの条件分岐がある場合、switch文の使用によって可読性が向上することがあります。switch文の特徴は、条件式をチェックするなかで式と値が一致するcaseを見つけたときに、その処理の実行したうえでswitch文を抜けるというものです。
特に単一の変数に対して多くの値を比較する場合はswitch文が適していますが、複雑な条件式にはif文のほうが柔軟に対応できます。うまく使い分けることが大切でしょう。

  
var animal = "クジラ";

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

  


  







実行結果：
クジラの鳴き声：ウォーン
まとめ
JavaScriptのif文は、プログラムの流れを制御するうえで最も基本的で重要な構文です。この記事では、if文の基本構文から実用的な使い方について、初心者の皆さんにもわかりやすく解説しました。
Webアプリケーション開発においては、ユーザー入力の検証やUIの動的切り替えなど、多くの場面でif文が登場します。
JavaScript初心者の方は、この記事で学んだ条件分岐の考え方を活用し、さまざまなプログラムを作成してみてください。実際にコードを書いて試すことが、最も効果的な学習になります。論理的思考を育むif文の習得は、プログラミングスキル向上の大きな一歩となるでしょう。
レベルを更に上げたい方はpaizaプログラミングスキルチェックへ





























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