「JavaScriptのif文って難しそう…」「条件分岐って何？」と感じている初心者の方も多いのではないでしょうか。
この記事では、JavaScriptのif文の基本構文から実践的なサンプルコード、よくあるエラーとその解決策までを詳しく解説します。 条件分岐の基礎をしっかり理解して、次のステップへ進みましょう！
はじめに
JavaScriptのif文とは
プログラムを書いていくと、ある条件のときに特定の処理をしたい場面がよくあります。
例えば、「雨が降っていたら傘を持って出かける」というような、日常の判断をプログラムで表現したいと考えてみてください。
JavaScriptでは、このような判断を表現するためにif文という構文を使います。
if文は「もしこの条件が満たされたら、これを実行する」という仕組みをプログラムに組み込むためのものです。
具体例：雨が降っている場合にメッセージを表示
以下の例では、isRainyという変数がtrueのときに、特定のメッセージを表示する処理を実行します。
let isRainy = true;
if (isRainy) {
console.log(“傘を持って出かけましょう！”);
}
このコードでは、isRainyがtrueの場合に”傘を持って出かけましょう！”がコンソールに表示されます。
条件分岐の重要性
プログラムに条件分岐を組み込むと、入力や状況に応じて異なる動作をさせることができるようになります。
例えば、下記のような判断ができることで、プログラムがただ単に動くだけでなく、状況に応じて動きを変える「賢さ」を持つようになります。
- ユーザーがボタンをクリックしたときの動作を分ける
- ゲームの得点に応じてランクを表示する
- ショッピングカートの内容によって送料を計算する
JavaScriptのif文の基本構文を理解しよう
基本構文
JavaScriptのif文は、プログラムに「判断力」を与えるための重要な構文です。
特定の条件に応じて異なる動作をさせることで、プログラムに柔軟性を持たせることができます。
if文の基本構文は以下のようになります。
if (条件式) {
// 条件がtrueの場合に実行される処理
}
この構文では、条件式がtrueである場合にのみ、波括弧 {} 内のコードが実行されます。
例：数値が10以上か確認する
次のコードは、変数scoreが10以上の場合にメッセージを表示します。
let score = 15;
if (score >= 10) {
console.log(“スコアは10以上です！”);
}
- 解説：
- 条件式 score >= 10 が評価されます。
- scoreが10以上であれば、console.logが実行されます。
- それ以外の場合は何も実行されません。
注意：条件がfalseの場合は無処理
次の例では、条件がfalseの場合に何も表示されません。
let score = 5;
if (score >= 10) {
console.log(“このメッセージは表示されません。”);
}
- 条件式 score >= 10 がfalseの場合、波括弧内のコードは無視されます。
else文とelse if文：複数の条件を処理する方法
else文の使い方
else文を使うと、if文の条件がfalseだった場合に実行される処理を記述できます。
構文
if (条件式) {
// 条件がtrueの場合に実行される処理
} else {
// 条件がfalseの場合に実行される処理
}
例：合格判定
次のコードでは、scoreが80以上の場合と、それ以外の場合で異なるメッセージを表示します。
let score = 70;
if (score >= 80) {
console.log(“合格です！”);
} else {
console.log(“不合格です。”);
}
- 解説：
- scoreが80以上なら「合格です！」を表示。
- それ以外の場合は「不合格です。」を表示。
else if文の使い方
else ifを使うと、複数の条件を順番に評価して処理を分岐できます。
構文
if (条件1) {
// 条件1がtrueの場合の処理
} else if (条件2) {
// 条件2がtrueの場合の処理
} else {
// すべての条件がfalseの場合の処理
}
例：成績の評価
以下は、スコアに応じて評価を表示するコードです。
let score = 85;
if (score >= 90) {
console.log(“評価: A”);
} else if (score >= 75) {
console.log(“評価: B”);
} else {
console.log(“評価: C”);
}
- 解説：
- scoreが90以上なら「評価: A」を表示。
- scoreが75以上90未満なら「評価: B」を表示。
- 上記の条件に当てはまらない場合は「評価: C」を表示。
よくある条件分岐の活用例をサンプルコードで解説
1. 数値の偶数・奇数を判定する
数値が偶数か奇数かを判断する例です。
let number = 7;
if (number % 2 === 0) {
console.log(“偶数です。”);
} else {
console.log(“奇数です。”);
}
- 解説：
- %演算子は余りを計算します。
- number % 2 === 0 がtrueなら偶数。
- falseなら奇数として判定されます。
2. ユーザーのログイン状態を判定する
ユーザーがログインしているかどうかを判定する例です。
let isLoggedIn = true;
if (isLoggedIn) {
console.log(“ログイン済みです。”);
} else {
console.log(“未ログインです。”);
}
- 解説：
- isLoggedInがtrueなら「ログイン済みです。」を表示。
- falseなら「未ログインです。」を表示。
3. 時間帯に応じたメッセージを表示する
現在の時刻に応じて挨拶を表示する例です。
let hour = 15;
if (hour < 12) {
console.log(“おはようございます！”);
} else if (hour < 18) {
console.log(“こんにちは！”);
} else {
console.log(“こんばんは！”);
}
- 解説：
- hour < 12がtrueなら「おはようございます！」。
- hour < 18がtrueなら「こんにちは！」。
- それ以外の時間帯は「こんばんは！」。
はじめて学ぶ方へのアドバイス
- 条件を整理する
- どの条件がどの処理につながるかを考えながらコードを書くと、エラーを防ぎやすくなります。
- 少しずつ試す
- 条件をシンプルにして、1つずつ結果を確認しながら進めるのがおすすめです。
- エラーを恐れない
- 条件分岐にエラーはつきものです。どこが間違っているのかを考える過程が学びになります。
これらを意識して取り組むことで、if文を使った条件分岐をしっかりマスターできます。
初心者がつまずきやすいポイントとその解決策
ポイント1：条件式の書き方を間違える
よくある間違い：=と==の混同
解決策：
- =は代入、==または===は比較演算子です。条件式には===を使いましょう。
let x = 10;
if (x === 10) {
console.log(“”xは10です。””);
}
ポイント2：else ifの条件を間違える
例：上から順に条件を評価するため、順序を意識する必要があります。
let score = 85;
if (score >= 75) {
console.log(“”評価: B””);
} else if (score >= 90) {
console.log(“”評価: A””);
} // これは意図しない結果になる
解決策：条件の順序を正しく書きましょう。
まとめ：if文を理解してJavaScriptの基礎力を高めよう
JavaScriptのif文は、特定の条件に基づいてプログラムの動作を分岐させるための重要な構文です。
基本構文から始め、else文やelse if文を使いこなすことで、より複雑な条件分岐を効率的に処理できるようになります。
サンプルコードを実際に試しながら学ぶことで、条件分岐の仕組みを深く理解し、プログラムを柔軟かつ効果的に動作させる力を身につけることができます。
if文をマスターすることで、プログラムの柔軟性が格段に向上します。少しずつ練習を重ねて、自信を持ってコードを書けるようになりましょう。