これだけでOK！JavaScript if文の書き方入門

Yume

JavaScriptのif文の書き方を教えて！

こんなお悩みにお答えします。

この記事では、JavaScriptのif文の基本的な書き方から、応用的な使い方までを丁寧に解説します。初心者でも理解できるように、できるだけわかりやすい言葉で説明していますので、安心して最後まで読み進めてください。

この知識を身につければ、あなたのJavaScriptスキルが格段に向上し、今後のプログラミングがもっと楽しくなるでしょう。

本記事の監修者：Zetto

 現役ITエンジニア
 Java Gold保有
 TypeScript(Vue.js)
 Java(SpringBoot)
 Programming Dream編集長

JavaScriptのif文とは？基本を理解しよう

JavaScriptのif文は、条件に応じてプログラムの処理を分けるための重要な構文です。if文を使うことで、特定の条件が満たされたときにのみ実行される処理を定義することができます。例えば、ユーザーが入力した値が特定の条件を満たしているかどうかをチェックする場合や、一定の数値以上であれば特別なメッセージを表示する場合などに役立ちます。

if文の概要

if文は、「もし〜ならば」という意味を持つ条件分岐の一種です。プログラムの流れを変えることができ、条件が満たされたときにだけ特定のコードが実行されます。これによって、さまざまな状況に応じてプログラムを柔軟に操作することができます。例えば、ユーザーが年齢を入力し、その年齢が18歳以上であれば「成人です」と表示する、といったことが可能です。

if文を使うときの目的とメリット

if文を使う目的は、プログラムが受け取ったデータに応じて動作を変えることです。これにより、よりインタラクティブで賢いプログラムを作ることができます。以下のような状況でif文が役立ちます：

• ユーザーの入力に応じた動作を変える：ユーザーが入力した情報に基づいて、異なるメッセージを表示することが可能です。
• エラーのチェック：特定の条件が満たされない場合にエラーメッセージを表示することで、ユーザーに正しい入力を促すことができます。
• システムの状態に応じた処理の実行：プログラム内部での数値やフラグの状態に基づいて、処理を切り替えることができます。

これにより、プログラムはただ単に決まった動作を繰り返すだけでなく、入力や状態に応じて変化することができます。まさに、プログラムに「考える力」を与えるのがif文の役割です。

if文の基本的な書き方と使い方

JavaScriptでのif文の構文

JavaScriptのif文は、簡単な構文で記述することができます。まず、基本の形を見てみましょう。

if (条件) {
  // 条件が真の場合に実行されるコード
}

この構文で、「条件」の部分に論理的に真か偽かを判断する式を記述します。例えば、x > 10 という条件であれば、「xが10より大きい場合」にのみブロック内のコードが実行されます。

基本の構文と書き方の例

次に、具体的な例を挙げてみましょう。

let score = 85;
if (score >= 80) {
  console.log("合格です！");
}

このコードでは、変数scoreが80以上であれば、「合格です！」というメッセージが表示されます。条件を満たしている場合にのみ特定の処理が実行される点が、if文の重要な特徴です。

条件式の書き方のポイント

条件式を書く際のポイントは、条件が真（true）になる場合にのみ実行されることを意識することです。条件が複雑になるときは、適切に括弧を使って優先順位を明確にし、間違った結果を避けるようにします。また、比較演算子（==や===など）を正しく使うことも大切です。

if文を使ったシンプルな例

初心者でも理解しやすいように、もう少し簡単な例を挙げてみましょう。if文は、簡単な条件で使うことができ、プログラムの動作をわかりやすく変える手段として非常に有効です。

簡単な例題で条件分岐を理解しよう

例えば、次のコードを考えてみてください。

let isRaining = true;
if (isRaining) {
  console.log("傘を持っていきましょう。");
}

この例では、isRainingという変数がtrueである場合に、「傘を持っていきましょう。」というメッセージが表示されます。ここでの条件は単純で、「雨が降っているかどうか」を判定しています。isRainingがfalseであれば、何も表示されません。

実際に手を動かしてみよう

if文は、実際に手を動かしてコードを書いてみることで理解が深まります。例えば、以下のような状況を考え、自分で条件を書いてみましょう。

• 数字を入力して、その数字が10以上かどうかを判定する
• ユーザーの年齢を入力し、年齢に応じてメッセージを表示する

これらの小さな課題に取り組むことで、if文の使い方に慣れていくことができます。

if文を使う上で知っておきたい条件式

条件式の書き方の基本

if文において、条件式は非常に重要な役割を果たします。条件式が正しく書かれていないと、期待通りにプログラムが動かないことがあります。ここでは、基本的な条件式の書き方について詳しく解説します。

trueとfalseの意味と使い方

条件式は基本的に、真（true）か偽（false）かで結果が決まります。JavaScriptでは、条件が満たされている場合はtrueとみなされ、その条件に対応する処理が実行されます。逆に、条件が満たされていない場合はfalseとなり、if文の中の処理は実行されません。

例えば、次のようなコードがあります。

let isAdult = true;
if (isAdult) {
  console.log("あなたは成人です。");
}

ここで、isAdultがtrueであるとき、「あなたは成人です。」というメッセージが表示されます。このように、trueとfalseを使うことで、条件の真偽を簡単に表現することができます。

比較演算子の使い方（==、===など）

if文の条件式を書く際には、比較演算子が頻繁に使われます。JavaScriptにはいくつかの比較演算子があり、状況に応じて使い分けることが大切です。

• ==：値が等しいかどうかを比較します。ただし、型は考慮しません。
• ===：値と型が共に等しいかどうかを比較します。

例えば、次のコードを見てみましょう。

let number = "5";
if (number == 5) {
  console.log("等しいです。"); // 実行される
}
if (number === 5) {
  console.log("全く等しいです。"); // 実行されない
}

==を使った場合、文字列と数値が自動的に変換されて比較されるため、結果はtrueになります。しかし、===を使った場合は、型も一致している必要があるため、この場合はfalseとなります。

比較演算子の注意点

==と===の違いをわかりやすく説明

==と===の違いをしっかりと理解することは重要です。特に、==は型を自動的に変換して比較するため、予期しない結果を生むことがあります。そのため、基本的には===を使うことが推奨されます。これにより、型の違いによる誤解を避けることができます。

例えば、次の例を考えてみてください。

let value = 0;
if (value == false) {
  console.log("条件は真です。"); // 実行される
}
if (value === false) {
  console.log("条件は全く真です。"); // 実行されない
}

このように、==は型の違いを無視して比較するため、予想外の動作をすることがあります。特に初心者のうちは===を使って型も考慮した比較を行うことで、バグを防ぎやすくなります。

elseやelse ifを使った条件分岐の方法

else文の使い方

if文の条件が満たされない場合に、別の処理を実行したいときにはelse文を使います。else文を使うことで、条件に合致しない場合のデフォルトの処理を定義することができます。基本的な構文は次のとおりです。

if (条件) {
  // 条件が真の場合に実行されるコード
} else {
  // 条件が偽の場合に実行されるコード
}

if文とelse文の違い

例えば、次のコードを考えてみましょう。

let temperature = 25;
if (temperature > 30) {
  console.log("暑いです。");
} else {
  console.log("涼しいです。");
}

このコードでは、温度が30度を超える場合には「暑いです。」と表示されますが、それ以外の場合には「涼しいです。」と表示されます。else文を使うことで、if文が成り立たなかった場合に自動的に別の処理を実行できます。

else if文で複数の条件を処理する

else if文を使うと、複数の条件に応じて処理を変えることができます。これは、最初の条件が満たされなかった場合に、次に別の条件を評価するためのものです。

else if文の構文と書き方

次に、else ifを使った構文を見てみましょう。

if (条件1) {
  // 条件1が真の場合に実行されるコード
} else if (条件2) {
  // 条件2が真の場合に実行されるコード
} else {
  // どちらの条件も偽の場合に実行されるコード
}

このように、else ifを使うことで、複数の条件を順番に評価し、それぞれに対応した処理を記述することができます。

複数条件を使った実際のコード例

例えば、次のコードを考えてみてください。

let score = 75;
if (score >= 90) {
  console.log("非常に良い成績です！");
} else if (score >= 80) {
  console.log("良い成績です。");
} else if (score >= 60) {
  console.log("合格です。");
} else {
  console.log("不合格です。");
}

この例では、scoreの値に応じて異なるメッセージが表示されます。else ifを使うことで、複数の条件に対応した処理を簡単に記述することができます。

複数の条件を組み合わせて使う方法

論理演算子を使った条件の組み合わせ

if文では、論理演算子を使うことで複数の条件を組み合わせることができます。論理演算子には主に&&（AND）と||（OR）があります。

AND（&&）とOR（||）の使い方

• &&（AND）：両方の条件が真である場合にのみ、全体が真と評価されます。
• ||（OR）：どちらか一方の条件が真であれば、全体が真と評価されます。

例えば、次のコードを考えてみましょう。

let age = 20;
let hasTicket = true;
if (age >= 18 && hasTicket) {
  console.log("入場できます。");
}

この例では、ageが18以上であり、かつhasTicketがtrueの場合に「入場できます。」と表示されます。両方の条件が満たされて初めて処理が実行される点が&&の特徴です。

ANDとORを使った例題とその解説

次に、||を使った例を見てみましょう。

let isMember = false;
let hasCoupon = true;
if (isMember || hasCoupon) {
  console.log("割引が適用されます。");
}

この場合、isMemberがfalseであってもhasCouponがtrueであれば「割引が適用されます。」と表示されます。どちらか一方の条件が満たされればよい場合に||を使います。

ネストしたif文（入れ子構造）について

ネストされたif文の使い方

ネストされたif文とは、if文の中にさらにif文を入れることです。これにより、複雑な条件を扱うことができます。

例えば、次のコードを見てみましょう。

let age = 20;
let isStudent = true;
if (age >= 18) {
  if (isStudent) {
    console.log("学生割引が適用されます。");
  } else {
    console.log("通常料金です。");
  }
}

この例では、ageが18以上である場合に、さらにisStudentがtrueかどうかを判定しています。このように、ネストされたif文を使うことで、複雑な条件を段階的に評価することができます。

ネストしたif文の注意点と理解のための例

ネストしたif文を使うときには、コードが複雑になりやすいため注意が必要です。読みやすさを保つために、必要以上にネストを深くしないことがポイントです。また、インデントを適切に使って、どのif文がどの部分に対応しているかをわかりやすくすることも重要です。

実際に手を動かしてif文を練習しよう

練習問題：シンプルなif文を書く

if文を使った基本的な練習問題をいくつか紹介します。まずはシンプルな条件を使ったif文を書いてみましょう。

ユーザー入力に応じたメッセージ表示

例えば、ユーザーが入力した年齢に基づいて適切なメッセージを表示するプログラムを書いてみます。

let age = prompt("年齢を入力してください：");
if (age >= 18) {
  console.log("あなたは成人です。");
} else {
  console.log("あなたは未成年です。");
}

このコードでは、ユーザーに年齢を入力させ、その年齢が18歳以上であれば「あなたは成人です。」と表示します。そうでなければ「あなたは未成年です。」と表示します。

練習問題：else ifと条件を組み合わせる

次に、else ifを使って、複数の条件に応じたメッセージを表示するプログラムを書いてみましょう。

複数の条件に応じた処理を作成する

let score = prompt("テストの点数を入力してください：");
if (score >= 90) {
  console.log("非常に良い成績です！");
} else if (score >= 75) {
  console.log("良い成績です。");
} else if (score >= 50) {
  console.log("合格です。");
} else {
  console.log("再試験が必要です。");
}

このコードでは、ユーザーが入力したテストの点数に応じて異なるメッセージを表示します。これにより、else ifの使い方を理解し、条件分岐の効果的な使い方を学ぶことができます。

JavaScriptのif文を使うときによくある間違いとその対策

よくある初心者のミス

セミコロンの位置に注意しよう

if文を書く際に、条件の後ろにセミコロンをつけてしまうと、意図しない結果になることがあります。例えば、次のようなコードです。

let number = 5;
if (number > 3); {
  console.log("条件が真です。");
}

このコードでは、if (number > 3); の後ろにセミコロンがあるため、if文の条件が無視されてしまいます。その結果、条件に関係なく「条件が真です。」というメッセージが表示されてしまいます。

比較演算子の誤解

==と===の使い分け

先ほども説明しましたが、==は型を無視して値を比較し、===は型も考慮して比較します。例えば、次のコードを考えてみましょう。

let value = "10";
if (value == 10) {
  console.log("等しいです。");
} else {
  console.log("等しくありません。");
}

この場合、valueが文字列であっても==を使うと数値10と等しいとみなされます。しかし、===を使うと型の違いも考慮するため、文字列と数値は異なるものとして扱われます。

if文を書く際に気をつけるべきポイント

コードの読みやすさを意識する

if文を使う際には、コードの読みやすさを意識することが重要です。特に、ネストが深くなりすぎるとコードが複雑になり、理解しにくくなります。そのため、できるだけシンプルに条件を書くように心がけましょう。

不必要なネストを避ける方法

ネストが深くなると、コードの可読性が下がります。複数の条件を扱う際には、論理演算子を使って1つのif文にまとめることで、コードをすっきりと書くことができます。

if文をもっと便利に！三項演算子の紹介

三項演算子とは？

三項演算子は、if文をシンプルに書くための方法です。1行で条件分岐を記述することができ、簡潔にコードを書きたい場合に便利です。

if文をシンプルに書ける方法

三項演算子の構文は次のとおりです。

条件 ? 真の場合の処理 : 偽の場合の処理;

例えば、次のコードを見てみましょう。

let age = 18;
let message = (age >= 18) ? "成人です。" : "未成年です。";
console.log(message);

このコードでは、ageが18以上であれば「成人です。」が表示され、そうでなければ「未成年です。」が表示されます。三項演算子を使うことで、条件に応じた値の代入を簡潔に行うことができます。

三項演算子を使うべきとき、使うべきでないとき

簡単な判断と複雑な処理の違い

三項演算子は簡単な条件分岐には非常に便利ですが、条件が複雑な場合には避けるべきです。可読性が下がり、コードが理解しにくくなるためです。簡単な条件のときのみ使うようにしましょう。

まとめ：JavaScriptのif文をマスターしよう

ここまで、JavaScriptのif文の基本から応用までを学んできました。if文はプログラムの動きを変えるための非常に強力なツールであり、条件分岐を理解することでプログラムをより柔軟に操作することができます。ここで学んだことを基に、実際にコードを書いてみることで、if文の使い方を確実にマスターしましょう。

今後のステップとして、さらに複雑な条件や別の制御構文について学んでいくことで、JavaScriptの理解を深めていくことができます。次は、繰り返し処理や関数についても学び、プログラミングの幅を広げていきましょう。