• Home
  • Web制作
  • JavaScriptの条件(三項)演算子を使いこなそう！ 短く簡潔なコードの秘訣

JavaScriptの条件(三項)演算子を使いこなそう！ 短く簡潔なコードの秘訣

schedule
Tags: JavaScript

条件(三項)演算子とは？ if文との違いをわかりやすく解説

JavaScriptでコードを書いていると、条件によって処理を分岐させたい場面によく遭遇しますよね。 そんな時に便利なのが 条件(三項)演算子 です。

条件(三項)演算子とは、条件式に応じて異なる値を返すことができる、JavaScriptにおける便利な記法です。
イメージとしては、if文をより短く、シンプルに記述できるものだと考えていただければ良いでしょう。

if文で記述した場合

let message;
let age = 20;

if (age >= 18) {
  message = "あなたは成人です。";
} else {
  message = "あなたは未成年です。";
}

条件(三項)演算子で記述した場合

let age = 20;
let message = age >= 18 ? "あなたは成人です。" : "あなたは未成年です。";

ご覧の通り、条件(三項)演算子を使うことで、より簡潔にコードを記述することができます。

条件(三項)演算子の基本的な構文

条件(三項)演算子の構文は、以下の通りです。

条件式 ? 式1 : 式2
  • 条件式: 真偽値(true/false)を返す式を記述します。
  • 式1: 条件式がtrueの場合に評価される式を記述します。
  • 式2: 条件式がfalseの場合に評価される式を記述します。

具体的な使用例を見てみよう

例1: 数値の偶数・奇数判定

let num = 10;
let result = num % 2 === 0 ? "偶数です" : "奇数です";
console.log(result); // 出力結果: 偶数です

この例では、変数numの値が偶数かどうかを判定し、結果に応じてメッセージを変数resultに代入しています。

例2: 関数の戻り値に利用

function getDiscount(isMember) {
  return isMember ? 0.2 : 0.1;
}

let discount = getDiscount(true);
console.log(discount); // 出力結果: 0.2

この例では、関数getDiscount内で条件(三項)演算子を用いて、会員かどうか(isMember)によって割引率を変えています。

条件(三項)演算子をネストして使う

条件(三項)演算子は、必要に応じてネストして使うことも可能です。 ただし、ネストが深くなりすぎるとコードの可読性が低下する可能性があるので、注意が必要です。

let score = 85;
let grade = score >= 90 ? "A" : score >= 80 ? "B" : "C";
console.log(grade); // 出力結果: B

この例では、点数に応じて成績をA, B, Cに分類しています。

まとめ: 条件(三項)演算子をマスターして、より簡潔で可読性の高いJavaScriptコードを書こう！

今回は、JavaScriptの条件(三項)演算子について解説しました。 if文と比較して、より簡潔にコードを記述できることがお分かりいただけたかと思います。

ただし、条件(三項)演算子は、可読性を損なう可能性も秘めていることを忘れてはいけません。 複雑な条件分岐には、無理に条件(三項)演算子を使うのではなく、if文を用いるなど、状況に応じて適切な方法を選択することが重要です。

関連記事