INDEX
～
ad. 価格範囲を指定して商品を探せます
条件演算子のネストとは？
条件演算子（?:）は、条件に応じて値を切り替えるための演算子です。
条件演算子のネストとは、条件演算子の中にさらに条件演算子を書くことです。これにより、複数の条件を1つの式として記述できます。
ただし、ネストが深くなると読みづらくなりやすいため、使いどころには注意が必要です。
基本的な条件演算子のネスト例
次の例では、点数に応じて評価を決めています。
const score = 85;
const grade = score >= 90 ? "A" :
score >= 80 ? "B" :
score >= 70 ? "C" :
"F";
console.log(grade);
実行結果
B
この例では、scoreが85なので、score >= 80の条件を満たし、"B"が返されます。
ネストされた条件演算子の仕組み
条件演算子のネストは、次のような構造になります。
条件1 ? 結果1 :
条件2 ? 結果2 :
条件3 ? 結果3 :
結果4;
最初の条件がtrueなら結果1が返されます。falseの場合は次の条件が評価され、順番に判定されていきます。
ネストされた条件演算子とif文の比較
同じ処理を、条件演算子とif文で比較してみます。
const score = 75;
const grade = score >= 90 ? "A" :
score >= 80 ? "B" :
score >= 70 ? "C" :
"F";
let grade2;
if (score >= 90) {
grade2 = "A";
} else if (score >= 80) {
grade2 = "B";
} else if (score >= 70) {
grade2 = "C";
} else {
grade2 = "F";
}
console.log(grade);
console.log(grade2);
実行結果
C
C
条件演算子を使うと短く書けますが、条件が増えると読みにくくなります。
一方、if文は行数は増えますが、処理の流れを追いやすいという利点があります。
ネストされた条件演算子の注意点
条件演算子のネストは便利ですが、多用するとコードの可読性が低下します。
特に、次のような場合はif文を使う方が分かりやすくなります。
- 条件が3つ以上ある場合
- 条件式が長い場合
- 処理内容が単純な値の返却ではない場合
- あとから条件が増えそうな場合
条件演算子のネストを使うべき場面
条件演算子のネストは、条件が短く、返す値もシンプルな場合に向いています。
- 表示するラベルを切り替える場合
- 短い条件で戻り値を決める場合
- JSX内で簡単な表示分岐を行う場合
ただし、原則として、可読性を優先するならif文を使う方が無難です。
アロー関数で使う例
関数の戻り値として短い条件分岐を書く場合は、条件演算子が便利です。
const getGrade = (score) =>
score >= 90 ? "A" :
score >= 80 ? "B" :
score >= 70 ? "C" :
"F";
console.log(getGrade(92));
console.log(getGrade(65));
実行結果
A
F
この程度の短い条件であれば、条件演算子でも読みやすく書けます。
まとめ
- 条件演算子のネストとは、条件演算子の中に別の条件演算子を書くことである。
- 複数の条件を1つの式で表現できる。
- 条件が短く単純な場合には便利である。
- 条件が多い場合や複雑な場合は
if文の方が読みやすい。 - 短さよりも可読性を優先して使い分けることが重要である。