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

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

三項演算子（条件演算子）とは

条件演算子（三項演算子）は、まず式を評価してその結果が真（true）か偽（false）かを判定し、評価結果に応じて2つの値のうちいずれかを返す演算子です。「?」と「:」を組み合わせて使うことから「三項演算子」と呼ばれます。if...else文を1行で簡潔に表現できるため、簡単な条件分岐をコードに組み込みたい場合に非常に便利です。

基本構文

condition ? 値X : 値Y

条件（condition）がtrueの場合は「値X」が、falseの場合は「値Y」が返されます。

番号演算子と説明
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>
</body>
</html>

実行結果

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

この例では、変数aは10、bは20です。最初の式「(a > b)」はfalseと評価されるため、代わりに「値Y」である200が返されます。一方、「(a < b)」はtrueと評価されるため、「値X」である100が返されます。

モダンなJavaScriptでの書き方

現在の開発では、varの代わりにconstやletを使うのが一般的です。同じ処理は以下のように書けます。

const a = 10;
const b = 20;

const result = (a > b) ? 100 : 200;
console.log(result); // 200

使いこなすためのポイント

  • 三項演算子は「条件 ? 真の場合の値 : 偽の場合の値」という形式で記述します。
  • 条件に応じた値の代入や関数の戻り値を簡潔に書きたい場合に特に有効です。
  • 入れ子（ネスト）にしすぎると可読性が大きく低下するため、複雑な分岐には素直にif...else文を使うことをおすすめします。
  1. C#の三項演算子（条件演算子）とは？基本構文と使い方を実例付きで解説

    三項演算子とは三項演算子は、C#における条件演算子の一つです。「?」と「:」を使って3つのオペランドを受け取り、ブール式（true / false）を評価することで、条件に応じた値を選択します。if文を使わずに1行で条件分岐を記述できるため、シンプルな条件判定ではコードを簡潔にまとめられるのが大きな特徴です。基本構文y = (z == 1) ? 100 : 180;この構文では、まず最初のオペランドである条件式「z == 1」が評価されます。条件式が true（1） の場合 → 2番目のオペランド「100」が返される条件式が false（0） の場合 → 3番目のオペランド「180」が返される

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

    三項演算子（条件演算子）とは三項演算子は、C#における条件演算子（Conditional Operator）とも呼ばれる演算子で、「?」と「:」を使って条件分岐を1行で簡潔に記述できます。名前の通り、3つのオペランド（引数）を受け取り、ブール式（真偽値）を評価した結果に応じて、いずれか一方の値を返します。基本構文条件式 ? 真の場合の値 : 偽の場合の値;例えば、次のように記述します。y = (x == 1) ? 70 : 100;この場合、最初のオペランドである条件式「(x == 1)」が true（1）と評価されれば、2番目のオペランド「70」が返されます。逆に false（0）と評価され