if文でOR条件を使う！JavaScript論理演算子の基本

みなさん、JavaScriptでif文を書いていて困ったことはありませんか？

「複数の条件のうち、どれか一つでも満たされたら処理を実行したい」「AまたはBの場合にメッセージを表示したい」

こんな場面に遭遇している初心者の方、きっと多いですよね。

実は、JavaScriptには**OR条件（||演算子）**という便利な仕組みがあります。 この機能をマスターすることで、より柔軟で効率的な条件分岐を書けるようになるんです。

この記事では、JavaScript if文でのOR条件の使い方を基本から実践まで、初心者にも分かりやすく解説します。 AND条件との違いや実用的なサンプルコードまで、しっかりと理解できるよう説明していきますよ！

OR条件（||演算子）って何？基本を理解しよう

OR条件の基本的な意味

**OR条件（||演算子）**とは、複数の条件のうち「どれか一つでも真（true）なら全体が真になる」論理演算子です。

簡単に言うと、「または」という意味なんです。 条件1または条件2のどちらかが満たされていれば、処理が実行されます。

基本的な書き方はこちらです。

if (条件1 || 条件2) {
    // 条件1または条件2のどちらかが真の場合に実行
}

実際の例で理解しよう

まずは簡単な例から見てみましょう。

const age = 20;
const hasParentPermission = true;

// 18歳以上または保護者の許可がある場合
if (age >= 18 || hasParentPermission) {
    console.log('サービスを利用できます');
} else {
    console.log('サービスを利用できません');
}
// 出力: サービスを利用できます

この例では、18歳以上という条件と保護者の許可があるという条件のどちらかが満たされれば、サービスを利用できるようになっています。 20歳なので最初の条件が満たされ、結果として利用可能になるんです。

OR条件の基本的な使い方をマスターしよう

複数の値との比較

ユーザーの権限をチェックする例を見てみましょう。

const userRole = 'editor';

// 管理者または編集者の場合
if (userRole === 'admin' || userRole === 'editor') {
    console.log('コンテンツを編集できます');
} else {
    console.log('閲覧のみ可能です');
}
// 出力: コンテンツを編集できます

userRoleが'admin'または'editor'のどちらかであれば、編集権限が与えられます。 この場合、'editor'なので条件が満たされ、編集可能になるんです。

数値の範囲チェック

点数による合否判定の例も見てみましょう。

const score = 85;

// 80点以上で合格
if (score >= 80 || score >= 95) {
    console.log('合格です！');
} else {
    console.log('不合格です');
}
// 出力: 合格です！

この例では85点なので、最初の条件（80点以上）が満たされて合格になります。 二つ目の条件（95点以上）は満たされませんが、OR条件なのでどちらか一つで十分なんです。

複雑な条件の組み合わせ

より実用的な例として、時間帯によるサービス利用可否を判定してみましょう。

const currentHour = 14;
const isWeekend = false;
const isHoliday = false;

// 平日の営業時間（9-18時）または休日の特別時間（10-16時）
if ((!isWeekend && !isHoliday && currentHour >= 9 && currentHour < 18) || 
    ((isWeekend || isHoliday) && currentHour >= 10 && currentHour < 16)) {
    console.log('サービス利用可能です');
} else {
    console.log('サービス利用時間外です');
}
// 出力: サービス利用可能です

この例では、平日の営業時間か休日の特別時間のどちらかであれば利用できます。 現在14時で平日なので、最初の条件が満たされてサービス利用可能になります。

AND条件との違いを理解しよう

OR条件とAND条件の比較

OR条件（||）とAND条件（&&）の違いを実際のコードで確認してみましょう。

const isLoggedIn = true;
const hasPermission = false;

console.log('=== OR条件の場合 ===');
// OR条件：どちらか一つでも真なら実行
if (isLoggedIn || hasPermission) {
    console.log('OR: アクセス可能'); // これが実行される
} else {
    console.log('OR: アクセス拒否');
}

console.log('=== AND条件の場合 ===');
// AND条件：両方とも真でないと実行されない
if (isLoggedIn && hasPermission) {
    console.log('AND: アクセス可能'); // これは実行されない
} else {
    console.log('AND: アクセス拒否'); // こちらが実行される
}

この例では、ログイン状態は真ですが権限は偽です。 OR条件では一つでも真があれば条件が満たされますが、AND条件では両方とも真でなければなりません。

真偽値表で確認しよう

OR条件とAND条件の動作を表で整理してみましょう。

function showTruthTable() {
    const testCases = [
        { a: true, b: true },
        { a: true, b: false },
        { a: false, b: true },
        { a: false, b: false }
    ];
    
    console.log('条件A | 条件B | OR(||) | AND(&&)');
    console.log('------|-------|-------|-------');
    
    testCases.forEach(({a, b}) => {
        const orResult = a || b;
        const andResult = a && b;
        
        console.log(`${a.toString().padEnd(5)} | ${b.toString().padEnd(5)} | ${orResult.toString().padEnd(5)} | ${andResult.toString().padEnd(5)}`);
    });
}

showTruthTable();

実行すると以下のような結果が表示されます。

条件A | 条件B | OR(||) | AND(&&) ------|-------|-------|------- true | true | true | true true | false | true | false false | true | true | false false | false | false | false

OR条件では、少なくとも一つが真であれば結果が真になることが分かりますね。

実践的な使用例を見てみよう

ユーザー権限チェック機能

実際のWebアプリケーションでよく使われる、ユーザー権限チェック機能を作ってみましょう。

function checkUserAccess(user) {
    const { role, department, isActive, hasSpecialPermission } = user;
    
    // アクティブでない場合は即座に拒否
    if (!isActive) {
        return {
            access: false,
            message: 'アカウントが無効です',
            level: 'none'
        };
    }
    
    // 管理者、HR部門、特別権限のいずれかを持つ場合
    if (role === 'admin' || department === 'HR' || hasSpecialPermission) {
        return {
            access: true,
            message: 'フルアクセス許可',
            level: 'full'
        };
    }
    
    // 一般ユーザーで営業部門または開発部門の場合
    if (department === 'sales' || department === 'development') {
        return {
            access: true,
            message: '限定アクセス許可',
            level: 'limited'
        };
    }
    
    return {
        access: false,
        message: 'アクセス拒否',
        level: 'none'
    };
}

この関数を使ってテストしてみましょう。

const users = [
    { role: 'admin', department: 'IT', isActive: true, hasSpecialPermission: false },
    { role: 'user', department: 'sales', isActive: true, hasSpecialPermission: false },
    { role: 'user', department: 'marketing', isActive: true, hasSpecialPermission: true },
    { role: 'user', department: 'finance', isActive: false, hasSpecialPermission: false }
];

users.forEach((user, index) => {
    const result = checkUserAccess(user);
    console.log(`ユーザー${index + 1}: ${result.message} (${result.level})`);
});

実行結果はこのようになります。

ユーザー1: フルアクセス許可 (full) ユーザー2: 限定アクセス許可 (limited) ユーザー3: フルアクセス許可 (full) ユーザー4: アカウントが無効です (none)

営業時間チェック機能

お店の営業時間をチェックする機能も作ってみましょう。

function checkBusinessHours() {
    const now = new Date();
    const day = now.getDay(); // 0=日曜日, 1=月曜日, ..., 6=土曜日
    const hour = now.getHours();
    
    // 平日（月〜金）の営業時間：9-18時
    const isWeekdayOpen = (day >= 1 && day <= 5) && (hour >= 9 && hour < 18);
    
    // 土曜日の営業時間：10-16時
    const isSaturdayOpen = (day === 6) && (hour >= 10 && hour < 16);
    
    // 営業中かどうか（平日の営業時間または土曜日の営業時間）
    if (isWeekdayOpen || isSaturdayOpen) {
        const closeTime = day === 6 ? '16:00' : '18:00';
        return {
            isOpen: true,
            message: '営業中です',
            closeTime: `${closeTime}に閉店します`
        };
    }
    
    // 営業時間外の場合
    if (day === 0) {
        return {
            isOpen: false,
            message: '日曜日は定休日です',
            nextOpen: '月曜日 9:00に開店します'
        };
    }
    
    if (day === 6) {
        return {
            isOpen: false,
            message: '営業時間外です',
            nextOpen: '今日 10:00〜16:00が営業時間です'
        };
    }
    
    return {
        isOpen: false,
        message: '営業時間外です',
        nextOpen: '今日 9:00〜18:00が営業時間です'
    };
}

// 使用例
const businessStatus = checkBusinessHours();
console.log(businessStatus.message);
if (businessStatus.closeTime) {
    console.log(businessStatus.closeTime);
} else if (businessStatus.nextOpen) {
    console.log(businessStatus.nextOpen);
}

この関数では、平日の営業時間または土曜日の営業時間のどちらかに該当すれば営業中と判定されます。

フォームバリデーション

ユーザー登録フォームのバリデーション機能も見てみましょう。

function validateUserForm(userData) {
    const errors = [];
    
    // メールアドレスまたは電話番号のどちらか一つは必須
    if (!userData.email && !userData.phone) {
        errors.push('メールアドレスまたは電話番号のどちらか一つは必須です');
    }
    
    // 18歳以上または保護者の同意がある場合のみ登録可能
    const isAdult = userData.age >= 18;
    const hasParentConsent = userData.parentConsent === true;
    
    if (!isAdult && !hasParentConsent) {
        errors.push('18歳未満の場合は保護者の同意が必要です');
    }
    
    // 利用規約またはプライバシーポリシーのどちらかには同意必須
    if (!userData.agreeToTerms && !userData.agreeToPrivacy) {
        errors.push('利用規約またはプライバシーポリシーのどちらかには同意してください');
    }
    
    return {
        isValid: errors.length === 0,
        errors: errors
    };
}

テストデータで動作を確認してみましょう。

const testData = [
    {
        email: 'test@example.com',
        phone: '',
        age: 25,
        parentConsent: false,
        agreeToTerms: true,
        agreeToPrivacy: false
    },
    {
        email: '',
        phone: '',
        age: 16,
        parentConsent: false,
        agreeToTerms: false,
        agreeToPrivacy: false
    }
];

testData.forEach((data, index) => {
    const result = validateUserForm(data);
    console.log(`テストケース${index + 1}: ${result.isValid ? '有効' : '無効'}`);
    if (!result.isValid) {
        result.errors.forEach(error => console.log(`  - ${error}`));
    }
});

よくある間違いと対処法を知ろう

文字列の比較での注意点

文字列を比較する際の大文字小文字の問題を見てみましょう。

// ❌ 間違い：大文字小文字を考慮していない
function badRoleCheck(userRole) {
    if (userRole === 'Admin' || userRole === 'Editor') {
        return 'アクセス許可';
    }
    return 'アクセス拒否';
}

// ✅ 正しい：大文字小文字を統一
function goodRoleCheck(userRole) {
    const role = userRole.toLowerCase();
    if (role === 'admin' || role === 'editor') {
        return 'アクセス許可';
    }
    return 'アクセス拒否';
}

// ✅ さらに良い：配列を使った方法
function betterRoleCheck(userRole) {
    const allowedRoles = ['admin', 'editor', 'moderator'];
    if (allowedRoles.includes(userRole.toLowerCase())) {
        return 'アクセス許可';
    }
    return 'アクセス拒否';
}

実際にテストしてみましょう。

console.log(badRoleCheck('admin'));   // アクセス拒否（間違い）
console.log(goodRoleCheck('admin'));  // アクセス許可（正しい）
console.log(betterRoleCheck('ADMIN')); // アクセス許可（正しい）

配列を使った方法なら、複数の権限を簡単に管理できます。

undefinedとnullの扱い

undefinedやnullの値を扱う際の注意点も見てみましょう。

// ❌ 間違い：0や空文字が適切にチェックできない
function badValueCheck(value) {
    if (value || value === 0) {
        return '値が存在します';
    }
    return '値が存在しません';
}

// ✅ 正しい：null と undefined を明示的にチェック
function goodValueCheck(value) {
    if (value !== null && value !== undefined) {
        return '値が存在します';
    }
    return '値が存在しません';
}

// テスト
console.log(badValueCheck(0));        // 値が存在しません（間違い）
console.log(goodValueCheck(0));       // 値が存在します（正しい）
console.log(goodValueCheck(''));      // 値が存在します（正しい）
console.log(goodValueCheck(null));    // 値が存在しません（正しい）

0や空文字は有効な値として扱いたい場合が多いので、適切にチェックすることが大切です。

演算子の優先順位

演算子の優先順位についても理解しておきましょう。

function demonstratePrecedence() {
    const a = true;
    const b = false;
    const c = true;
    const d = false;
    
    console.log('=== 演算子の優先順位 ===');
    
    // && の方が || より優先順位が高い
    console.log(`${a} || ${b} && ${c} || ${d}`);
    console.log(`結果: ${a || b && c || d}`); // true || false && true || false = true
    
    // 意図を明確にするために括弧を使用
    console.log(`(${a} || ${b}) && (${c} || ${d})`);
    console.log(`結果: ${(a || b) && (c || d)}`); // (true || false) && (true || false) = true
}

demonstratePrecedence();

複雑な条件を書く際は、括弧を使って意図を明確にすることをおすすめします。

まとめ

JavaScript if文でのOR条件（||演算子）について、基本から実践的な使い方まで詳しく学習しました。

重要なポイントをおさらいしましょう。

• OR条件は「どちらか一つでも真なら実行」される
• 短絡評価により効率的な処理が可能
• AND条件との違いを理解して適切に使い分ける
• 括弧を使って条件の優先順位を明確化する

実践で役立つテクニックも身につきました。

• 大文字小文字を統一した文字列比較
• 配列を使った複数値のチェック
• null/undefinedの適切なハンドリング
• 複雑な条件の分かりやすい書き方

次のステップとして、以下を試してみてください。

• 実際のプロジェクトでOR条件を使ってみる
• AND条件とOR条件を組み合わせた複雑な条件分岐を作成する
• パフォーマンスを考慮した条件の順序を検討する

OR条件を適切に使いこなすことで、より柔軟で効率的な条件分岐を実装できるようになります。 ぜひ今日から、実際のコードでOR条件を活用してみてくださいね！