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

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

はじめに

JavaScriptで開発をするうえで、if文 は欠かせない要素のひとつです。何らかの条件によって処理を変えたいときや、ユーザーが入力した内容に応じて画面表示を出し分けたいときに用いられます。この if文を理解しておくことで、プログラムが意図した通りに動作するように制御しやすくなり、さまざまな場面で柔軟な処理を実装できるようになるでしょう。

しかし、初心者の方が if文を最初に使おうとすると、「条件式には何を入れるの？」「 else if と else の違いがよくわからない」といった疑問にぶつかりがちです。また、似たような使い方ができる switch文や三項演算子との違いがわからずに、混乱を招くこともあるかもしれません。そのような状態だと、コードが複雑になってしまったり、意図しない結果を引き起こしたりする可能性があります。

そこで本記事では、初心者でもわかりやすい言葉で JavaScriptのif文 を詳しく解説し、実務の現場でどのように使われるかを具体的な事例とともに紹介します。ソースコード例も多数用意しているので、「実際のコードが見たい」「どう書けばいいの？」といった不安を一つずつ取り除いていきましょう。

今回解説する内容を読めば、 if文を使った実装の基本から応用まで把握でき、ちょっとしたユースケースにも即対応できるようになります。 Webフォームなどのバリデーション処理やログイン機能を作る際にも役立つため、ぜひ学習の参考にしてください。

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

if文の基本構文 と書き方のポイント
if ~ else や else if を使った条件分岐の方法
switch文 や 三項演算子 との違いと、それぞれの使い分け
実務の現場での具体的な 活用例
ネストしたif文 を使う際の注意点
真偽値の概念や、複数条件を組み合わせる方法

これらを身につけることで、初心者の方でも JavaScript の条件分岐を正しく書けるようになります。

if文の基本

JavaScriptの if文は「もし、ある条件が真（true）ならば、この処理を実行する」という形でプログラムの流れを制御するための仕組みです。一般的な構文は以下のようになります。


if (条件式) {
  // 条件式がtrueのときに実行する処理
}

条件式には、数値の大小比較や文字列の一致判定などを記述することが多いです。たとえば if (score >= 60) のように書けば、「score という変数が 60 以上であればの中を実行」という意味になります。条件が満たされない場合は、 if のブロック内の処理をスキップして、次の処理へ進みます。

たとえば「ある数値が偶数ならばメッセージを表示する」という処理を書くとします。以下のサンプルコードでは、変数 num が偶数かどうかを判定しています。


const num = 10;

if (num % 2 === 0) {
  console.log("偶数です");
}

このとき、% は剰余演算子で、num % 2 が 0 の場合は num が偶数という意味です。条件が真と判定されるので "偶数です" と出力されます。一方、num が 11 などの奇数の場合は num % 2 === 0 が false となり、 if の中身は実行されません。

if文の仕組み

if文では、条件式が true か false かを評価してブロック内の処理を実行するかどうかを決定します。 JavaScriptにおいて true とみなされる値（truthy）や false とみなされる値（falsy）には少し特徴があり、 ""（空文字列）や 0 や null は条件式で false として扱われます。こうした違いを意識していないと、「なぜか条件が実行されない」という状況に陥ることもあるので注意が必要です。

また、===（厳密等価演算子）と ==（等価演算子）の使い分けも重要です。 == は型変換を行ったうえで比較するため、想定外の結果を招くケースがあります。初心者のうちは基本的に === を使うほうが安全でしょう。

if ~ else文の仕組み

if文だけでは、条件が真のときと偽のときの両方に異なる処理を入れたい場合に対応しづらくなります。このようなケースで使えるのが if ~ else文 です。構文は以下のようになります。


if (条件式) {
  // 条件がtrueのとき
} else {
  // 条件がfalseのとき
}

たとえば数値の大小判定で、「60点以上なら合格、そうでなければ不合格」のような分岐を行うときに便利です。以下はサンプルコードの例です。


const score = 50;

if (score >= 60) {
  console.log("合格です");
} else {
  console.log("不合格です");
}

このように書くことで、score が 60 以上かどうかで処理を切り替えることができます。「もしXXでなければ、こうしてほしい」という場面では、ほぼ必ず if ~ else文を使うと覚えておくといいでしょう。

else ifの仕組み

if文と else文だけだと、「複数の条件を順番に判定し、どれかに該当したら処理を実行する」というニーズを満たしにくい場面があります。そんなときには else if を使います。一般的な構文は次のとおりです。


if (条件式1) {
  // 条件式1がtrueの場合
} else if (条件式2) {
  // 条件式2がtrueの場合
} else {
  // どちらでもない場合
}

例えばスコアによって成績を分ける処理を作りたい場合、下記のように書くとスムーズです。


const score = 75;

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

score が 80 以上なら A、60 以上80 未満なら B、それ以外は C といった具合に、複数の条件を段階的に評価できます。このように書くと可読性が高くなり、意図がはっきり伝わりやすいというメリットがあります。

if文でよくある間違い

初心者の方が if文を使うとき、思わぬエラーやバグを生みがちなパターンをいくつか紹介します。事前に把握しておけば、より安心して条件分岐を利用できるでしょう。

まず、= と == を混同する ミスが代表的です。 = は代入演算子であり、変数に値を入れるときに使います。一方、== は比較演算子です。たとえば if (x = 10) {} と書いてしまうと「x に 10 を代入し、その結果 10 を評価する」という動きになり、意図しない動作が起こるかもしれません。

次に、カッコの並び間違い にも注意が必要です。条件式を書いたあとの {} ブロックを忘れてしまったり、) や } が対応していないといった単純なミスは、誰でも一度はやってしまいます。特に複数の if文をネスト（入れ子）する際は、どこまでが if のブロックなのかを意識してコードを書くようにしましょう。

また、先ほど触れたように、== と === の違いを意識していないと「なんだか動きがおかしい」という事態になることが多いです。 JavaScriptは型の変換が自動で行われるケースがあるため、 == は意図せず真や偽になりやすいのです。そのため、できる限り === を使って型までしっかり比較するほうが安全でしょう。

このようなポイントを踏まえて、if文の基本をしっかりと押さえておくと安心です。

switch文との比較

JavaScriptには、条件分岐のもうひとつの方法として switch文 があります。 switch文は一連のケースに応じて処理を振り分けるときに便利で、記述がコンパクトになりやすいという特徴があります。ただし、すべての状況で if文よりも優れているわけではないため、何をしたいのかによって使い分けが重要です。

switch文の基本

switch文の構文は以下のようになります。


switch (評価する式) {
  case 値1:
    // 値1と評価結果が一致した場合の処理
    break;
  case 値2:
    // 値2と一致した場合
    break;
  default:
    // どれにも該当しない場合
    break;
}

switch (式) の (式) に書いた値や変数が、各 case の値と一致したところで処理を実行し、break で抜けます。 default はどれにも該当しないときに実行される部分です。なお、break を書き忘れると処理が継続し、下の case にも流れてしまうので要注意です。

たとえば、月の数字によって季節を判定するようなコードを書きたいとします。その場合、以下のようになるでしょう。


const month = 3;
let season = "";

switch (month) {
  case 12:
  case 1:
  case 2:
    season = "冬";
    break;
  case 3:
  case 4:
  case 5:
    season = "春";
    break;
  case 6:
  case 7:
  case 8:
    season = "夏";
    break;
  case 9:
  case 10:
  case 11:
    season = "秋";
    break;
  default:
    season = "不明";
    break;
}

console.log("季節は", season);

上記では month が 3 のため、春 と判定されます。同じ処理を if ~ else if ~ else で書くこともできますが、複数の値に対して同じ結果にしたいときは switch文も選択肢になります。

if文とswitch文、どちらを使う？

if文も switch文も、目的は「条件分岐を行う」ことです。ただし、if文は条件式に柔軟な評価 ができるのに対し、switch文は特定の値を分岐キー として扱うのが得意といえます。

比較する値が多い場合や、特定の値に応じて処理を分けるだけなら switch文が読みやすい
複雑な条件式（ score >= 80 などの演算）が多い場合は if文のほうがわかりやすい

開発現場でも、単純に値の一致だけを判定するなら switch文、条件式をいろいろ組み合わせる場合は if文という使い分けがよく見られます。そこまで厳密なルールはありませんが、可読性を意識して選ぶとよいでしょう。

三項演算子との違い

JavaScriptでは、三項演算子 という構文を使って、if ~ else のような分岐を1行で書くことができます。三項演算子（conditional operator）は 条件式 ? 値1 : 値2 という形で記述し、条件式が真なら値1、偽なら値2 を返す仕組みです。

三項演算子の使い方

三項演算子を使うと、短い文で条件による値の切り替えを行えるため、コードがすっきりすることがあります。例えば次のような例です。


const score = 85;
const result = score >= 60 ? "合格" : "不合格";
console.log("判定:", result);

上記では、score >= 60 が true なら "合格" 、そうでなければ "不合格" が result に代入されます。実際には if文とまったく同じ働きをしますが、見た目がコンパクトになるのが大きな違いです。ただし、複雑なロジックを三項演算子で書きすぎると可読性を損ねることがあるため、シンプルな条件だけに使うのが一般的です。

if文と三項演算子の使い分け

if文は複数行にわたる処理や複雑な条件分岐 に向いています。一方、三項演算子は単純な真偽判定 によって変数に値を代入するときなど、短い条件をすっきり書きたい場合に重宝します。

if文 : 条件によって実行する処理が多い場合や、ネスト（入れ子）構造を使う場合など
三項演算子 : true か false で値を分ける程度のシンプルな場合

このように状況に合わせて選択できるようになると、コードの見通しがぐっと良くなります。

実際の開発現場での活用例

それでは、条件分岐がどのように実際の開発で役立つのかを見ていきましょう。ここではWebシステムでよくあるシーンを例に挙げます。初心者の方でもイメージしやすいように、なるべく日常的な場面に近い形で紹介します。

Webフォームのバリデーション

Webフォームを使うシーンは非常に多いです。たとえばユーザーの入力データが正しいかどうかをチェックして、問題なければ次の手続きに進めるといった流れはよくあるパターンでしょう。このとき、JavaScriptの if文が大いに活躍します。


function validateForm(username, email) {
  if (username === "") {
    console.log("ユーザー名が未入力です");
    return false;
  } else if (!email.includes("@")) {
    console.log("メールアドレスの形式が正しくありません");
    return false;
  }

  console.log("入力内容は問題ありません");
  return true;
}

const isValid = validateForm("", "testexample.com");
// 結果: ユーザー名が未入力です

上記の例では、 username が空文字かどうか、 email に @ が含まれているかどうかを順番にチェックしています。もし問題があれば false を返し、問題がなければ true を返すというロジックです。これらのチェックが if文を使って直感的に書けるため、あとから読んでも目的がわかりやすくなります。

システムのログイン制御

ログイン機能を作る際にも、ユーザーの入力内容をチェックしてからセッションを付与したり、エラーメッセージを表示したりといった分岐が必要です。以下はあくまでイメージですが、IDとパスワードが正しい場合とそうでない場合で処理を分けるケースを考えてみましょう。


function login(userId, password) {
  const correctId = "testuser";
  const correctPassword = "abc123";

  if (userId === correctId && password === correctPassword) {
    console.log("ログイン成功");
    // ここでセッションを作成したり、ページ遷移したりする
  } else {
    console.log("ログイン失敗: IDまたはパスワードが違います");
  }
}

login("testuser", "abc123"); // ログイン成功
login("testuser", "wrongpass"); // ログイン失敗

上記のように、条件式を1行でまとめることも可能です。複数の条件を同時に満たすかどうかを確認する際は &&（論理積）を使うと便利でしょう。このように、ログイン制御などの重要なロジックには if文が欠かせません。

ネストしたif文について

if文はさらに入れ子構造で書くことも可能です。条件が多い処理を記述しようとしてネストが増えすぎると、コードが煩雑になりやすいのも事実です。例えば次のようなパターンを考えてみましょう。


const userRole = "admin";
const isActive = true;

if (userRole === "admin") {
  if (isActive) {
    console.log("管理者として操作が可能です");
  } else {
    console.log("管理者ですがアカウントが無効です");
  }
} else {
  console.log("一般ユーザーです");
}

ここでは、まず userRole が "admin" かどうかを判定し、それが true ならばさらに isActive が true かどうかを判断しています。こう書くと、条件分岐の意味自体はわかりやすいのですが、どんどん複雑な要件が加わると、ネストが深くなって見通しが悪くなる可能性があります。そのため、複雑になりそうな場合は条件をまとめる、もしくは 早期リターン（return）などを使ってコードの構造を平坦にする工夫をすると読みやすくなるでしょう。

意図を明確にする方法

ネストが増えがちな場合は、以下のように書き方を工夫するといいです。複数の条件をまとめて一気に評価し、満たさない場合はすぐに処理を終わらせることを検討してみましょう。


function checkUserStatus(userRole, isActive) {
  if (userRole !== "admin") {
    console.log("一般ユーザーです");
    return;
  }

  if (!isActive) {
    console.log("管理者ですがアカウントが無効です");
    return;
  }

  console.log("管理者として操作が可能です");
}

checkUserStatus("admin", true);  // 管理者として操作が可能です
checkUserStatus("admin", false); // 管理者ですがアカウントが無効です
checkUserStatus("user", true);   // 一般ユーザーです

このように書くと、余分なネストを増やさずに処理の分岐を行うことができます。 if文のネストを深くするほど可読性が下がる傾向にあるため、実際の開発では短くてわかりやすい構造になるよう心がけると良いでしょう。

真偽値の扱い

JavaScriptでは、条件式で使う true / false はとても重要です。一見すると単純ですが、実は truthy と falsy の概念があり、直感と異なる結果をもたらすことがあります。

falsy : false, 0, ""（空文字列）, null, undefined, NaN
truthy : 上記以外の値はすべて true とみなされる

たとえば空文字列 "" や 0 は false として扱われるため、次のように書くと条件が false となります。


if ("") {
  console.log("これは表示されません");
}

逆に、文字列 "false" は中身が "false" という文字列であっても truthy です。つまり、"false" は空文字列ではないため true 扱いになります。このあたりを混同するとバグの原因になるので、一度認識しておくと役立ちます。

falsyとtruthy

if文で条件をチェックするときは、この falsy / truthy をうまく活用して、「変数が値をもっているかどうか」などを判定する場合も多いです。たとえば次のように書くと、空文字列かどうかをチェックできます。


const username = "";

if (!username) {
  console.log("ユーザー名が未入力です");
}

ここで !username は、「username が falsy なら true になる」という意味です。これにより、username が空文字列や null の場合にエラーメッセージを表示することができます。このような仕組みを理解しておくと、条件分岐の書き方がより幅広くなるでしょう。

その他の条件分岐テクニック

if文を使うときは、論理演算子 などを組み合わせることで、より細かい条件設定が可能です。特に &&（論理積）と ||（論理和）はよく使います。ここでは、複数の条件を掛け合わせるときの書き方を簡単に紹介しましょう。

複合条件(論理演算子)

複数の条件を1行でまとめる場合、例えば if (条件A && 条件B) {} と書けば「条件A かつ条件B が真ならば実行」という意味になります。次のような場面を考えてみましょう。


function checkPurchase(userAge, hasTicket) {
  // 20歳以上かつチケットを持っている人だけが入場可能
  if (userAge >= 20 && hasTicket) {
    console.log("入場できます");
  } else {
    console.log("入場できません");
  }
}

checkPurchase(25, true);  // 入場できます
checkPurchase(18, true);  // 入場できません
checkPurchase(25, false); // 入場できません

ここでは、20 歳以上でチケットを持っていなければならないという2つの条件を同時に判断しています。 ||（論理和）を使えば、「いずれか1つが真であれば実行」という分岐も可能です。これらを使いこなせると、より実務に沿った複雑な条件設定ができるでしょう。

複合条件を使う場合は、括弧で優先順位を明示すると読みやすくなることが多いです。例えば if ((conditionA && conditionB) || conditionC) { ... } のように括弧でくくると、条件の意図がはっきりします。

また、複合条件が多くなると一行が長くなり、可読性が落ちてしまう恐れもあります。そういったときは早期リターンや、分割して書くなどの方法で可読性を確保するように意識すると良いでしょう。

まとめ

ここまで、JavaScriptのif文 を中心とした条件分岐の考え方と使い方について解説してきました。初心者の方が特につまずきやすいポイントや、実際の開発現場でどう活用できるかを踏まえながら、以下のような内容を取り上げてきました。

if文の基本構文や、 if ~ else / else if の使い分け
switch文との比較、三項演算子との違い
実際のWebフォームやログイン機能での利用例
ネストした if文の注意点や、真偽値（truthy / falsy）の扱い
複合条件（論理演算子）の書き方

条件分岐は JavaScript の中でも特に基礎となる部分であり、避けて通ることはできません。しかし、基礎を正しく身につければ、複雑な処理を書いていても筋道が見えやすくなります。一度身につけたスキルは他のプログラミング言語にも応用できるので、何度も手を動かしながら習得してみてください。

こうした土台をしっかり作っておけば、今後 JavaScript で書くどんな機能にも柔軟に対応しやすくなるでしょう。ぜひ今回の記事を参考にしながら、自分のプロジェクトや練習用のサンプルで試してみてください。