JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptの条件演算子（三項演算子）とは？基本構文と使い方を解説

条件演算子とは

条件演算子（? :）は、三項演算子とも呼ばれるJavaScriptの演算子です。まず式を評価してその結果が true か false かを判定し、評価結果に応じて2つの値のうちどちらか一方を返します。if...else 文を1行で簡潔に記述できるため、コードを読みやすくしたい場面で非常に便利です。

基本構文

条件式 ? 値X : 値Y

条件式が true と評価されれば「値X」が、false と評価されれば「値Y」が結果として返されます。

No.演算子と説明
1? :（条件演算子）
条件が true の場合は値Xを、そうでない場合は値Yを返します。

サンプルコード

以下のコードを実行すると、JavaScriptにおける条件演算子の実際の動作を確認できます。

<html>
   <body>
      <script>
         <!--
            var a = 10;
            var b = 20;
            var linebreak = "<br />";
            document.write ("((a > b) ? 100 : 200) => ");
            result = (a > b) ? 100 : 200;
            document.write(result);
            document.write(linebreak);
            document.write ("((a < b) ? 100 : 200) => ");
            result = (a < b) ? 100 : 200;
            document.write(result);
            document.write(linebreak);
         //-->
      </script>
      <p>変数に別の値や演算子を設定して、いろいろ試してみてください。</p>
   </body>
</html>

実行結果

((a > b) ? 100 : 200) => 200
((a < b) ? 100 : 200) => 100

コードの解説

この例では、変数 a には10、変数 b には20が代入されています。

  • 最初の式 (a > b) は「10 > 20」となり false と評価されるため、結果は 200 が返されます。
  • 次の式 (a < b) は「10 < 20」となり true と評価されるため、結果は 100 が返されます。

このように条件演算子を使うことで、簡単な条件分岐を短くスマートに表現できます。ただし、条件が複雑になる場合やネストが深くなる場合は、可読性を考慮して if...else 文を使う方が適切なこともあります。

  1. JavaScriptの論理演算子の種類を解説！&&・||・! の違いと使い方

    JavaScriptの論理演算子とは 論理演算子は、複数の条件を組み合わせたり、真偽値（Boolean）を反転させたりするために使われる演算子です。JavaScriptには主に次の3種類の論理演算子があります。 &&（AND：論理積） ||（OR：論理和） !（NOT：否定） AND演算子（&&） AND演算子（&&）は、左右の両方の式が true の場合にのみ true を返し、どちらか一方でも false であれば false を返します。 サンプルコード <html> <body> <p id=&quo

  2. JavaScriptのPromiseとは？非同期処理の基本をわかりやすく解説

    JavaScriptのPromiseとは？Promise（プロミス）は、JavaScriptで非同期処理を扱うためのオブジェクトです。Promiseが生成された時点では、最終的な結果の値はまだ確定していません。処理が完了した将来のタイミングで、成功または失敗の結果を受け取ることができます。これにより、APIからのデータ取得やファイル読み込みなど、時間のかかる処理を効率的に記述できます。Promiseの3つの状態Promiseは、必ず以下の3つの状態のいずれかを持ちます。pending（待機）：初期状態。処理がまだ完了していない状態です。fulfilled（履行）：処理が正常に完了し、結果の値が