【初心者向け】JavaScript if文の使い方 - 条件分岐を10分でマスター

みなさん、プログラミングで困ったことありませんか？

「ユーザーの年齢によって表示を変えたい」 「入力値が正しいかチェックしたい」

こんな「もし〜だったら〜する」という処理、実はとても簡単に作れるんです。

この記事では、JavaScript のif文について、初心者の方でも分かるように詳しく解説します。 基本的な使い方から実践的な応用例まで、10分で条件分岐をマスターしましょう。

if文って何だろう？

簡単に言うとどんなもの？

if文は、条件に応じて処理を分岐させる制御構文です。

例えば、「もし晴れなら散歩に行く」みたいな判断をプログラムでも作れるんです。 これにより、色んな状況に応じて適切な処理を選択できます。

if文の基本構造

if文の基本的な書き方はこんな感じです。

if (条件) {
    // 条件が真の場合に実行される処理
}

カッコの中に条件を書いて、波カッコの中に実行したい処理を書きます。 まるで日本語の「もし〜なら〜する」と同じですね。

最もシンプルな例

実際に数値の大小を判定してみましょう。

let age = 20;

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

この例では、ageという変数が18以上かどうかをチェックしています。 >=は「以上」という意味で、条件が真なら「成人です」と表示されます。

もう一つ例を見てみましょう。

let score = 85;

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

テストの点数が80点以上なら「合格です！」と表示します。 簡単ですよね。

if-else文で2つの選択肢

基本的なif-else

条件が偽の場合の処理も指定できます。

let weather = '雨';

if (weather === '晴れ') {
    console.log('散歩に行きましょう');
} else {
    console.log('家で過ごしましょう');
}

この例では、天気が「晴れ」なら散歩、そうでなければ家で過ごします。 ===は「完全に等しい」という意味です。

数値での例も見てみましょう。

let temperature = 15;

if (temperature >= 25) {
    console.log('暑いですね');
} else {
    console.log('涼しいですね');
}

気温が25度以上なら「暑い」、そうでなければ「涼しい」と判定します。

実践的な例

パスワードの文字数をチェックする例です。

function checkPassword(password) {
    if (password.length >= 8) {
        console.log('パスワードは有効です');
        return true;
    } else {
        console.log('パスワードは8文字以上にしてください');
        return false;
    }
}

この関数は、パスワードが8文字以上かどうかをチェックします。 .lengthでパスワードの文字数を取得して、8以上なら有効と判定します。

使ってみましょう。

let userPassword = 'mypassword123';
let isValid = checkPassword(userPassword);

パスワードが条件を満たすかどうか簡単にチェックできました。

else if文で複数の条件

成績判定を作ってみよう

複数の条件を段階的にチェックする方法です。

function getGrade(score) {
    if (score >= 90) {
        return 'A';
    } else if (score >= 80) {
        return 'B';
    } else if (score >= 70) {
        return 'C';
    } else if (score >= 60) {
        return 'D';
    } else {
        return 'F';
    }
}

この関数は、点数に応じて成績を判定します。 上から順番にチェックして、最初に真になった条件の処理が実行されます。

使用例を見てみましょう。

console.log(getGrade(95)); // 'A'
console.log(getGrade(75)); // 'C'
console.log(getGrade(55)); // 'F'

点数に応じて適切な成績が表示されますね。

時間帯による挨拶

現在の時刻に応じて挨拶を変える例です。

function getGreeting() {
    let hour = new Date().getHours();
    
    if (hour < 6) {
        return 'おやすみなさい';
    } else if (hour < 12) {
        return 'おはようございます';
    } else if (hour < 18) {
        return 'こんにちは';
    } else {
        return 'こんばんは';
    }
}

new Date().getHours()で現在の時刻（時間）を取得します。 時間帯に応じて適切な挨拶を返します。

実際に使ってみましょう。

console.log(getGreeting());

現在の時刻に応じた挨拶が表示されます。

比較演算子をマスターしよう

基本的な比較演算子

if文でよく使う比較演算子の例です。

let a = 10;
let b = 20;

// 等しい
if (a === 10) {
    console.log('aは10です');
}

// 等しくない
if (a !== b) {
    console.log('aとbは異なります');
}

===は「完全に等しい」、!==は「等しくない」という意味です。

大小関係もチェックできます。

// より大きい
if (b > a) {
    console.log('bの方が大きいです');
}

// より小さい
if (a < b) {
    console.log('aの方が小さいです');
}

>は「より大きい」、<は「より小さい」です。

「以上」「以下」も使えます。

// 以上
if (a >= 10) {
    console.log('aは10以上です');
}

// 以下
if (b <= 30) {
    console.log('bは30以下です');
}

>=は「以上」、<=は「以下」という意味です。

文字列の比較

文字列を比較する際の注意点です。

let name = '田中';
let inputName = '田中';

// 文字列の完全一致
if (name === inputName) {
    console.log('名前が一致しました');
}

文字列同士も===で完全一致をチェックできます。

大文字小文字には注意が必要です。

let email1 = 'user@example.com';
let email2 = 'USER@EXAMPLE.COM';

if (email1 === email2) {
    console.log('同じメール'); // 実行されない
} else {
    console.log('異なるメール'); // こちらが実行される
}

大文字小文字が違うと、別の文字列として判定されます。

大文字小文字を無視したい場合はこうします。

if (email1.toLowerCase() === email2.toLowerCase()) {
    console.log('同じメール（大文字小文字無視）');
}

.toLowerCase()で小文字に変換してから比較しています。

論理演算子で条件を組み合わせ

AND演算子（&&）

複数の条件が全て真の場合に処理を実行する方法です。

let age = 25;
let hasLicense = true;

// 両方の条件が真の場合
if (age >= 18 && hasLicense) {
    console.log('運転できます');
}

&&は「かつ」という意味です。 年齢が18歳以上「かつ」免許を持っている場合に運転可能と判定します。

より複雑な例も見てみましょう。

let score = 85;
let attendance = 90;

if (score >= 80 && attendance >= 85) {
    console.log('優秀な成績です');
}

テストの点数が80点以上「かつ」出席率が85%以上なら優秀と判定します。

OR演算子（||）

いずれかの条件が真の場合に処理を実行する方法です。

let weather = '雨';

// いずれかの条件が真の場合
if (weather === '雨' || weather === '雪') {
    console.log('傘を持って行きましょう');
}

||は「または」という意味です。 天気が「雨」または「雪」の場合に傘を持参します。

複数の値をチェックする例です。

let userRole = 'admin';

if (userRole === 'admin' || userRole === 'moderator') {
    console.log('管理権限があります');
}

ユーザーの役割が管理者または運営者なら管理権限ありと判定します。

NOT演算子（!）

条件を否定する方法です。

let isLoggedIn = false;

// 条件の否定
if (!isLoggedIn) {
    console.log('ログインしてください');
}

!は「〜でない」という意味です。 ログインしていない場合にメッセージを表示します。

もう一つ例を見てみましょう。

let isEmpty = '';

if (!isEmpty) {
    console.log('値が空です');
}

空文字列は偽として扱われるので、!で真になります。

実践的な使用例

フォームの入力チェック

入力値の検証を行う例です。

function validateForm(name, email, age) {
    // 名前のチェック
    if (!name || name.trim() === '') {
        return {
            isValid: false,
            message: '名前を入力してください'
        };
    }
    
    // メールアドレスのチェック
    if (!email || !email.includes('@')) {
        return {
            isValid: false,
            message: '正しいメールアドレスを入力してください'
        };
    }
    
    // 年齢のチェック
    if (age < 0 || age > 120) {
        return {
            isValid: false,
            message: '正しい年齢を入力してください'
        };
    }
    
    return {
        isValid: true,
        message: '入力内容は有効です'
    };
}

この関数は、フォームの入力値をまとめてチェックします。 名前が空でないか、メールアドレスに「@」が含まれているか、年齢が適切な範囲かを確認します。

使用例を見てみましょう。

let result = validateForm('田中太郎', 'tanaka@example.com', 25);
console.log(result.message);

入力内容に応じて適切なメッセージが表示されます。

ショッピングカートの計算

商品の金額と割引を計算する例です。

function calculateTotal(price, quantity, userType) {
    let total = price * quantity;
    
    // 会員タイプによる割引
    if (userType === 'premium') {
        total = total * 0.8; // 20%割引
    } else if (userType === 'regular') {
        total = total * 0.9; // 10%割引
    }
    
    // 一定金額以上で送料無料
    let shippingFee = 0;
    if (total < 5000) {
        shippingFee = 500;
    }
    
    return {
        subtotal: price * quantity,
        discount: (price * quantity) - total,
        shippingFee: shippingFee,
        total: total + shippingFee
    };
}

この関数は、ショッピングカートの合計金額を計算します。 会員タイプに応じた割引と、送料を考慮した計算を行います。

使用例です。

let order = calculateTotal(1000, 3, 'premium');
console.log('小計:', order.subtotal);
console.log('割引:', order.discount);
console.log('送料:', order.shippingFee);
console.log('合計:', order.total);

複雑な計算も条件分岐で簡単に処理できます。

ゲームのスコア判定

ゲームのスコアに応じたレベル判定の例です。

function getPlayerLevel(score, playTime) {
    // スコアベースのレベル判定
    if (score >= 10000) {
        if (playTime < 30) {
            return 'エキスパート';
        } else {
            return 'マスター';
        }
    } else if (score >= 5000) {
        return '上級者';
    } else if (score >= 1000) {
        return '中級者';
    } else {
        return '初心者';
    }
}

この関数は、スコアとプレイ時間に基づいてプレイヤーのレベルを判定します。 高スコアを短時間で達成した場合はエキスパートと判定されます。

使用例を見てみましょう。

let playerLevel = getPlayerLevel(7500, 25);
console.log('レベル:', playerLevel);

スコアと時間に応じて適切なレベルが表示されます。

条件の短縮記法

三項演算子

簡単な条件分岐を一行で書く方法です。

// 基本的な三項演算子
let age = 20;
let status = age >= 18 ? '成人' : '未成年';
console.log(status); // '成人'

条件 ? 真の場合 : 偽の場合という書き方です。 短くて便利ですが、複雑な処理には向きません。

関数での使用例です。

function getDiscountRate(userType) {
    return userType === 'premium' ? 0.2 : 0.1;
}

プレミアム会員なら20%、そうでなければ10%の割引率を返します。

価格を表示する例も見てみましょう。

function formatPrice(price, showCurrency) {
    return showCurrency ? `¥${price.toLocaleString()}` : price.toString();
}

console.log(formatPrice(1000, true));  // '¥1,000'
console.log(formatPrice(1000, false)); // '1000'

通貨記号を表示するかどうかを三項演算子で判定します。

短絡評価の活用

&&と||を使った短縮記法です。

// &&を使った条件実行
let user = { name: '田中' };
user.name && console.log(`こんにちは、${user.name}さん`);

user.nameが真の場合のみ右側の処理が実行されます。

デフォルト値の設定にも使えます。

function greetUser(name) {
    name = name || 'ゲスト';
    console.log(`こんにちは、${name}さん`);
}

greetUser('田中'); // 'こんにちは、田中さん'
greetUser();      // 'こんにちは、ゲストさん'

引数が与えられない場合は「ゲスト」を使用します。

より現代的な書き方もあります。

function greetUserModern(name) {
    name = name ?? 'ゲスト';
    console.log(`こんにちは、${name}さん`);
}

??はNull合体演算子といって、よりモダンな書き方です。

if文の読みやすい書き方

早期リターンパターン

複雑な条件判定を読みやすくする方法です。

function processOrder(order) {
    if (!order) {
        console.log('注文情報がありません');
        return false;
    }
    
    if (!order.items || order.items.length === 0) {
        console.log('商品が選択されていません');
        return false;
    }
    
    if (order.total <= 0) {
        console.log('注文金額が無効です');
        return false;
    }
    
    if (!order.paymentMethod) {
        console.log('支払い方法を選択してください');
        return false;
    }
    
    console.log('注文を処理します');
    return true;
}

この書き方なら、条件をチェックして問題があればすぐにreturnします。 深いネストを避けることで、コードが読みやすくなります。

配列やオブジェクトでの条件分岐

配列に対する条件判定の例です。

function processStudents(students) {
    if (!students || !Array.isArray(students)) {
        console.log('有効な学生リストではありません');
        return;
    }
    
    if (students.length === 0) {
        console.log('学生が登録されていません');
        return;
    }
    
    students.forEach(student => {
        if (student.score >= 80) {
            console.log(`${student.name}: 優秀`);
        } else if (student.score >= 60) {
            console.log(`${student.name}: 合格`);
        } else {
            console.log(`${student.name}: 不合格`);
        }
    });
}

配列が有効かどうかをチェックしてから処理を行います。 Array.isArray()で配列かどうかを確認できます。

使用例です。

let students = [
    { name: '田中', score: 85 },
    { name: '佐藤', score: 75 },
    { name: '山田', score: 55 }
];

processStudents(students);

各学生の成績に応じた判定が表示されます。

よくある間違いと解決方法

代入と比較の混同

よくある間違いとその修正方法です。

let score = 80;

// 間違い：代入演算子を使用
if (score = 90) { // これは代入！
    console.log('90点です');
}

// 正しい：比較演算子を使用
if (score === 90) { // これが比較
    console.log('90点です');
}

=は代入、===は比較です。 間違えやすいので注意しましょう。

型の違いにも注意が必要です。

let userInput = '20'; // 文字列

if (userInput === 20) { // false（型が異なる）
    console.log('20です');
}

// 正しい：型を合わせる
if (parseInt(userInput) === 20) { // 数値に変換
    console.log('20です');
}

文字列と数値は違う型なので、比較前に型を合わせましょう。

falsy値を理解しよう

JavaScriptで偽と判定される値について理解しましょう。

// falsy値の例
let falsyValues = [false, 0, '', null, undefined, NaN];

falsyValues.forEach(value => {
    if (!value) {
        console.log(`${value} は falsy です`);
    }
});

これらの値は条件判定で偽として扱われます。

実践的な例です。

function processInput(input) {
    // 空文字列、null、undefinedをチェック
    if (!input) {
        console.log('入力が空です');
        return;
    }
    
    console.log(`入力値: ${input}`);
}

processInput(''); // '入力が空です'
processInput(0);  // '入力が空です'（0もfalsyなので）
processInput(null); // '入力が空です'

0も有効な値として扱いたい場合は、より具体的にチェックしましょう。

if (input === null || input === undefined || input === '') {
    console.log('入力が無効です');
    return;
}

このように書けば、0は有効な値として扱われます。

まとめ

JavaScriptのif文について学びました。

基本的な使い方

• if、else if、elseで条件分岐
• 比較演算子（===、!==、>、<、>=、<=）
• 論理演算子（&&、||、!）

実践的な応用

• フォームの入力チェック
• ショッピングカートの計算
• ゲームのスコア判定

読みやすいコードの書き方

• 早期リターンパターンの活用
• 適切な条件の組み合わせ
• falsy値の理解

if文を適切に使いこなすことで、ユーザーの入力や状況に応じて動的に変化するプログラムを作成できます。

まずは簡単な例から始めて、だんだんと複雑な条件分岐に挑戦してみましょう。 きっと、もっと便利で使いやすいプログラムが作れるようになりますよ。

ぜひ今日から、これらの技術を活用してみませんか？