JavaScriptにおける三項演算子の使い方10選！初心者向けに徹底解説

はじめに
●JavaScriptの三項演算子とは
- ○三項演算子の基本
●三項演算子の使い方
まとめ

はじめに

JavaScriptの三項演算子は、コードの効率性と可読性を高める優れた機能です。

この記事では、三項演算子の基本から応用まで、詳しく解説していきます。

初心者の方にも理解しやすいよう、具体的な例を交えながら説明しますので、ぜひ最後までお付き合いください。

●JavaScriptの三項演算子とは

三項演算子は、JavaScriptプログラミングにおいて非常に便利なツールです。

条件分岐を簡潔に表現できるため、コードの可読性を向上させ、開発効率を高めることができます。

ここでは、三項演算子の基本的な概念と使い方について詳しく説明します。

○三項演算子の基本

三項演算子は、条件分岐を簡潔に記述できるJavaScriptの機能です。

通常のif-else文を一行で表現できるため、コードがすっきりと整理されます。

基本的な構文は次の通りです。

条件 ? 真の場合の値 : 偽の場合の値

この構文を使うと、条件に応じて異なる値を返すことができます。

例えば、ユーザーの年齢が20歳以上かどうかを判定し、適切なメッセージを表示する場合、次のように書けます。

const age = 25;
const message = age >= 20 ? "お酒を飲めます" : "お酒は20歳になってから";
console.log(message); // "お酒を飲めます"

このように、三項演算子を使うと、簡潔かつ読みやすいコードを書くことができます。

●三項演算子の使い方

三項演算子は、様々な場面で活用できる柔軟な機能です。

単純な条件分岐から、複雑な論理判断まで、幅広い用途に対応します。

ここでは、実際のコード例を通じて、三項演算子の具体的な使用方法を見ていきましょう。

この例を通じて、三項演算子の実用的な応用方法を学ぶことができます。

○サンプルコード1：年齢に応じたメッセージの表示

年齢によって異なるメッセージを表示する例を見てみましょう。

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

このコードでは、ageが18以上であれば「成年です。」、そうでなければ「未成年です。」というメッセージが表示されます。

三項演算子を使うことで、if-else文を使うよりも簡潔に記述できています。

○サンプルコード2：オブジェクトのプロパティが存在するかチェックする

オブジェクトのプロパティの有無を確認し、存在しない場合にデフォルト値を設定する例を見てみましょう。

const user = {
  firstName: "太郎",
  lastName: "山田"
};

const middleName = user.middleName ? user.middleName : "未設定";
console.log(middleName); // 未設定

このコードでは、userオブジェクトにmiddleNameプロパティが存在しない場合、「未設定」という値が代わりに使用されます。

これにより、プロパティの存在チェックとデフォルト値の設定を1行で行うことができます。

○サンプルコード3：配列の要素が存在するかチェックする

配列の特定の位置に要素が存在するかを確認し、ない場合はデフォルト値を返す例を見てみましょう。

const fruits = ["りんご", "バナナ", "ぶどう"];

const fourthFruit = fruits[3] ? fruits[3] : "果物がありません";
console.log(fourthFruit); // 果物がありません

このコードでは、fruits配列の4番目の要素（インデックス3）が存在しないため、「果物がありません」というメッセージが表示されます。

三項演算子を使うことで、配列の要素の存在チェックとデフォルト値の設定を簡潔に行えます。

○サンプルコード4：関数が存在するかチェックする

オブジェクトに特定の関数が存在するかを確認し、存在しない場合はエラーメッセージを返す例を見てみましょう。

const obj = {
  testFunction: function() {
    console.log("こんにちは、世界！");
  }
};

const result = obj.testFunction ? obj.testFunction() : "関数が存在しません。";

このコードでは、objオブジェクトにtestFunction関数が存在する場合はその関数を実行し、存在しない場合は「関数が存在しません。」というメッセージを返します。

三項演算子を使うことで、関数の存在チェックと実行を1行で行うことができます。

○サンプルコード5：ネストした三項演算子を使用する

複数の条件を組み合わせて、より複雑な分岐を表現する例を見てみましょう。

const score = 85;

const grade = score >= 90 ? "A" :
              score >= 80 ? "B" :
              score >= 70 ? "C" :
              score >= 60 ? "D" : "F";

console.log(grade); // B

このコードでは、scoreの値に応じて適切な成績（A、B、C、D、F）を返します。

ネストした三項演算子を使うことで、複数の条件分岐を簡潔に表現できています。

○サンプルコード6：三項演算子を使った簡単な計算

条件に応じて異なる計算を行う例を見てみましょう。

const price = 100;
const isDiscounted = true;

const finalPrice = isDiscounted ? price * 0.8 : price;
console.log(finalPrice); // 80

このコードでは、isDiscountedがtrueの場合、価格に20%の割引を適用します。

三項演算子を使うことで、条件に応じた計算を1行で表現できています。

○サンプルコード7：変数にデフォルト値を設定する

変数が未定義の場合にデフォルト値を設定する例を見てみましょう。

let userName;
const defaultName = "ゲスト";

const displayName = userName ? userName : defaultName;
console.log(displayName); // ゲスト

このコードでは、userNameが未定義の場合、「ゲスト」というデフォルト値が使用されます。

三項演算子を使うことで、変数の存在チェックとデフォルト値の設定を簡潔に行えます。

○サンプルコード8：クリックイベントに応じてテキストを変更する

ボタンをクリックするたびにテキストを切り替える例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
  <script>
    let isGreeting = true;

    function toggleText() {
      const element = document.getElementById("text");
      element.innerHTML = isGreeting ? "さようなら！" : "こんにちは！";
      isGreeting = !isGreeting;
    }
  </script>
</head>
<body>
  <button onclick="toggleText()">クリック</button>
  <p id="text">こんにちは！</p>
</body>
</html>

このコードでは、ボタンをクリックするたびに「こんにちは！」と「さようなら！」のテキストが切り替わります。

三項演算子を使うことで、条件に応じたテキストの切り替えを簡潔に表現できています。

○サンプルコード9：フォームの入力内容に応じて警告メッセージを表示する

フォームの入力内容が条件を満たさない場合に警告メッセージを表示する例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
  <script>
    function validateInput() {
      const input = document.getElementById("input").value;
      const warningElement = document.getElementById("warning");
      warningElement.innerHTML = input.length < 5 ? "入力が短すぎます。" : "";
    }
  </script>
</head>
<body>
  <input type="text" id="input" oninput="validateInput()">
  <p id="warning"></p>
</body>
</html>

このコードでは、入力された文字列が5文字未満の場合に警告メッセージが表示されます。

三項演算子を使うことで、入力の検証と警告メッセージの表示を1行で行えます。

○サンプルコード10：三項演算子を使ってクラス名を切り替える

条件に応じて要素のクラス名を変更する例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
  <style>
    .red { color: red; }
    .blue { color: blue; }
  </style>
  <script>
    function toggleColor() {
      const element = document.getElementById("text");
      element.className = element.className === "red" ? "blue" : "red";
    }
  </script>
</head>
<body>
  <button onclick="toggleColor()">色を変える</button>
  <p id="text" class="red">色が変わります。</p>
</body>
</html>

このコードでは、ボタンをクリックするたびにテキストの色が赤と青で切り替わります。

三項演算子を使うことで、条件に応じたクラス名の切り替えを簡潔に表現できています。