簡潔な条件分岐 | 条件演算子(三項演算子) | JavaScript 超完全入門 基本から発展までのすべて

スポンサーリンク
スポンサーリンク

簡潔な条件分岐(条件演算子)とは?

JavaScriptでは、簡潔な条件分岐を実現するために「条件演算子(?:)」を使用します。この演算子は、従来のif文に代わって、1行で条件式を書くことができる便利な方法です。条件演算子は、「三項演算子」とも呼ばれ、次のような構文を持っています。

条件式 ? 真の時の値 : 偽の時の値

条件式がtrueの場合は「真の時の値」が返され、falseの場合は「偽の時の値」が返されます。これにより、簡潔に条件分岐を記述できます。

基本的な使用例

簡潔な条件分岐の基本的な使用例を見てみましょう。

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

この例では、年齢が18歳以上であれば「成人です」、それ未満であれば「未成年です」というメッセージが表示されます。if文を使わずに、条件に応じたメッセージを1行で記述しています。

条件演算子とif文の違い

条件演算子を使うと、if文よりもコードを短く記述できますが、複雑な条件式には向いていません。次の表に、条件演算子とif文の比較を示します。

条件 条件演算子 if
シンプルな条件 age >= 18 ? "成人" : "未成年"
if (age >= 18) {
    return "成人";
} else {
    return "未成年";
}
複雑な条件 条件演算子は不向き
if (condition1) {
    // 処理1
} else if (condition2) {
    // 処理2
} else {
    // 処理3
}

ネストされた条件演算子

条件演算子をネストすることで、複数の条件を扱うこともできますが、コードの可読性が低下する可能性があります。

let score = 85;
let grade = score >= 90 ? "A" :
            score >= 80 ? "B" :
            score >= 70 ? "C" :
            "F";
console.log(grade); // "B"

この例では、スコアに応じて成績を決定していますが、条件が複雑になると可読性が低くなることに注意が必要です。

複数行の条件式

条件演算子は、複数行にまたがって使用することもできます。コードの見やすさを保つため、条件式が長くなる場合は、次のようにインデントを使って分けることが推奨されます。

let isMember = true;
let fee = isMember ? 
          1000 : 
          1500;
console.log(fee); // 1000

この例では、会員かどうかで料金が変わります。条件式が長くなる場合は、適切に改行して可読性を維持します。

条件演算子の使用上の注意

条件演算子は簡潔に条件を表現できる反面、コードが複雑になりすぎると逆に読みづらくなります。単純な条件であれば条件演算子を使用し、複雑な条件やネストされた条件が増える場合は、if文を使う方が適しています。

まとめ

条件演算子(?:)を使うと、シンプルな条件分岐を1行で記述でき、コードを簡潔に保つことができます。ただし、複雑な条件式にはif文がより適しており、使い分けが重要です。条件演算子を適切に使いこなすことで、効率的で見やすいコードを書くことができるでしょう。