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

JavaScript三項演算子の使い方、サンプルコード、応用例JS
この記事は約7分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればサンプルコードを活用して機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、JavaScriptの三項演算子を使って効率的にコードを書くことができるようになります。

●JavaScriptの三項演算子とは

○三項演算子の基本

三項演算子は、条件式を評価し、その結果に基づいて2つの値のいずれかを返す演算子です。

JavaScriptでは、次のように使用します。

条件式 ? 値1 : 値2

条件式が真の場合、値1が返され、偽の場合には値2が返されます。

●三項演算子の使い方

ここでは、JavaScriptの三項演算子を使った10のサンプルコードを紹介します。

三項演算子は、条件式を評価し、その結果に応じて2つの異なる値から1つを選択する際に使用します。

基本的な形式は、条件式 ? 値1 : 値2 です。条件式が真の場合、値1が選択され、偽の場合は値2が選択されます。

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

年齢に応じて、成年か未成年かを判定し、適切なメッセージを表示します。

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

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

オブジェクトのプロパティが存在するかどうかを確認し、存在しない場合はデフォルト値を返します。

const user = {
  firstName: "Taro",
  lastName: "Yamada"
};

const middleName = user.middleName ? user.middleName : "N/A";
console.log(middleName); // N/A

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

配列の要素が存在するかどうかを確認し、存在しない場合はデフォルト値を返します。

const fruits = ["apple", "banana", "grape"];

const fruit = fruits[3] ? fruits[3] : "No fruit";
console.log(fruit); // No fruit

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

オブジェクトに関数が存在するかどうかを確認し、存在しない場合はエラーメッセージを返します。

const obj = {
  testFunction: function() {
    console.log("Hello, World!");
  }
};

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

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

複数の条件式を組み合わせて、一連の条件に応じて異なる値を選択します。

const score = 85;

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

console.log(grade); // B

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

条件に応じて、異なる計算式を適用し、結果を返します。

const price = 100;
const discount = true;

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

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

変数が未定義の場合、デフォルト値を設定します。

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

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

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

ボタンをクリックするたびに、テキストが切り替わるようにします。

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

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

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

入力内容が不適切な場合、警告メッセージを表示します。

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

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

条件に応じて、要素に適用するクラス名を変更します。

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

まとめ

この記事では、JavaScriptの三項演算子について徹底解説しました。

三項演算子の使い方、注意点、カスタマイズ方法と10のサンプルコードを紹介しました。

初心者の方でも理解しやすいように、各サンプルコードには詳細な説明を加えました。

三項演算子を使うことで、コードがシンプルで読みやすくなり、開発効率も向上します。

ただし、適切なバランスを見つけて使用することが重要です。

この記事を参考に、JavaScriptの三項演算子を活用して、効率的なコーディングを楽しみましょう。