JavaScriptでIF文を書く方法｜基本から応用まで実例付きで解説

（最終更新月：2023年11月）

✔このような方へ向けて書かれた記事となります

✔当記事を通じてお伝えしたいこと

• JavaScriptのif文の基礎知識
• if文の書き方及びその活用方法
• JavaScriptのif文を使用した具体的なコード例

当記事では、JavaScriptのif文の基本的な使い方から、それを活用した効果的なコーディングまで、実際のコード例を交えながらわかりやすく解説しています。

最後までお見逃しなく。

JavaScriptでのif文の理解

JavaScriptにおけるif文の基本的な形式と、その拡張形であるelseやelseifの使い方を学びます。

• if文の基本形式
• elseとelseifの活用形

if文の基本形式

JavaScriptのif文は以下のような形式を取ります。

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

例えば、変数ageが18以上である場合に「成人です」と表示する場合は以下のようになります。

let age = 20;
if (age >= 18) {
    console.log("成人です");
}

elseとelseifの活用形

elseやelseifを用いることで、より複雑な条件分岐を表現できます。

let score = 85;
if (score >= 90) {
    console.log("優");
} else if (score >= 80) {
    console.log("良");
} else {
    console.log("可");
}

上記のコードでは、スコアに応じて異なる評価を表示しています。

if文の取り扱いについて注意すること

if文を使用する際の注意点や、falseと判断される条件について詳しく見ていきます。

• 実行順序への視点
• if文がfalseと判断する条件

実行順序への視点

if文やelseifの条件は、上から順に評価されます。

最初に真となる条件が実行され、それ以降の条件は無視されるので、条件の順番には注意が必要です。

if文がfalseと判断する条件

JavaScriptでは、以下の値はfalseとして評価されます。

• false
• 0
• ""（空文字列）
• null
• undefined
• NaN

これ以外の値は、基本的にtrueとして評価されます。

応用的if文の表現方法

基本的なif文の使い方をマスターしたら、さらに高度な使い方を学んでいきましょう。

• ネスト（入れ子）形式のif文
• 論理演算子の活用法
• if文の省略形とその使用場合

ネスト（入れ子）形式のif文

if文の中にさらにif文を書くことで、より詳細な条件分岐を実現可能です。

これをネストと呼びます。

let age = 16;
let accompanied = true;

if (age < 18) {
    if (accompanied) {
        console.log("保護者同伴のため入場可");
    } else {
        console.log("未成年のため入場不可");
    }
} else {
    console.log("成人のため入場可");
}

このコードでは、年齢が18歳未満の場合、さらに保護者同伴かどうかでメッセージを変えています。

論理演算子の活用法

複数の条件を組み合わせる際には、論理演算子を使用します。

• AND（&&）の使用法
• OR（||）の使用法
• NOT（!）の使用法

AND（&&）の使用法

すべての条件が真である場合に、コードを実行します。

let age = 25;
let member = true;

if (age > 20 && member) {
    console.log("特典を受けられます");
}

OR（||）の使用法

いずれかの条件が真である場合に、コードを実行します。

let age = 18;
let student = true;

if (age < 20 || student) {
    console.log("学割が適用されます");
}

NOT（!）の使用法

条件が偽である場合に、コードを実行します。

let loggedIn = false;

if (!loggedIn) {
    console.log("ログインが必要です");
}

if文の省略形とその使用場合

簡潔なコードを書くためのテクニックとして、if文の省略形があります。

• 1行処理に対する省略形
• 条件（三項）演算子を活用した省略形

1行処理に対する省略形

短い処理を1行で書く場合、波括弧を省略することができます。

let age = 19;
if (age < 20) console.log("未成年です");

条件（三項）演算子を活用した省略形

条件に応じて値を返す場合、三項演算子を使用すると簡潔に書けます。

let age = 22;
let status = age < 20 ? "未成年" : "成人";
console.log(status);

実用例で学ぶif文

実際のコード例を通して、if文の使い方を深めていきましょう。

• if、elseの実用例
• elseifを使用した実用例
• 条件式中での代入の実用例

if、elseの実用例

ユーザーの年齢に応じて、メッセージを変える例です。

let userAge = prompt("あなたの年齢は？");
if (userAge < 20) {
    alert("未成年者です");
} else {
    alert("成人です");
}

elseifを使用した実用例

スコアに応じて、評価を変える例です。

let score = parseInt(prompt("スコアを入力してください"));
if (score >= 90) {
    alert("優秀！");
} else if (score >= 70) {
    alert("良好！");
} else {
    alert("頑張りましょう");
}

条件式中での代入の実用例

条件式の中で変数に値を代入し、その値をもとに条件分岐の例です。

let value;
if ((value = prompt("値を入力してください")) !== null) {
    alert("入力された値は" + value + "です");
} else {
    alert("入力がキャンセルされました");
}

正規表現の生成方法

正規表現を使用することで、より高度な文字列の操作や検索が可能となります。

• 正規表現リテラルの使用
• RegExpオブジェクトコンストラクタを利用した方法
• 主要なオプションフラグの説明

正規表現リテラルの使用

正規表現リテラルは、スラッシュ（/）で囲むことで作成できます。

let regex = /abc/;

RegExpオブジェクトコンストラクタを利用した方法

文字列を使用して正規表現を動的に生成する場合、RegExpオブジェクトのコンストラクタを使用します。

let str = "abc";
let regex = new RegExp(str);

主要なオプションフラグの説明

正規表現には、様々なオプションフラグが存在します。

例えば、iフラグは大文字小文字を区別せずにマッチングを行います。

let regex = /abc/i;

まとめと次のステップ

当記事では、JavaScriptのif文について学習してきました。

条件分岐はプログラミングの中心的な要素の一つであり、その理解と活用は非常に重要です。

ここまでの内容を簡潔にまとめ、if文の利用法を一覧化します。

• 基本的なif文の形式
• else, elseifの利用
• 論理演算子を用いた条件の組み合わせ
• ネストされたif文
• 条件式中の代入

これらの基本を押さえることで、多くのシチュエーションでの条件分岐が可能。

JavaScriptのif文は、条件に応じて異なる処理を実行するための強力なツールです。