JavaScriptの三項演算子とは？if文との違いや使い方を実例付きで徹底解説

JavaScriptの三項演算子（条件演算子）は、条件式を評価し、その結果に応じて2つの値のうちいずれかを返す演算子です。条件がtrueの場合とfalseの場合それぞれに対して、返す値を指定できます。基本構文は「condition ? trueの場合の値 : falseの場合の値」です。

特定の条件が満たされたときにだけ、あるコードを実行したい場面は開発において頻繁にあります。

例えば、ECサイトに生年月日の入力欄があり、18歳以上の顧客のみ商品を購入できるというルールがあるとしましょう。この場合、ユーザーがサイトを利用する前に、年齢要件を満たしているかどうかを確認する仕組みが必要です。

判定結果は「true」か「false」のどちらかに必ずなるため、こうしたケースでは三項演算子が非常に役立ちます。

本記事では、三項演算子の基本的な考え方から実践的な使い方まで、実際のコード例とともにわかりやすく解説します。

JavaScriptの三項演算子とは？

JavaScriptの三項演算子は「条件（三項）演算子」とも呼ばれ、if...else文とよく似た働きをします。条件が満たされているかどうかをチェックし、その評価結果に応じて異なる処理を実行します。

三項演算子の構文は以下の通りです。

(condition) ? 条件がtrueの場合に実行 : 条件がfalseの場合に実行

まず条件式を書き、その後に疑問符（?）を続けます。条件が満たされれば最初の式が実行され、満たされなければ2番目の式が実行される仕組みです。

基本のおさらい：if文

JavaScriptで最も基本的な条件分岐は「if文」です。if文は、条件が満たされた場合にコードブロックを実行します。条件が満たされなかった場合は、任意で記述できる「else」節の中身が実行されます。

以下はif文の例です。先ほど紹介した、ECサイトがユーザーの年齢を確認するシナリオを使ってみましょう。

// 顧客オブジェクトを定義
let customer = {
	name: "Joe",
	age: 15
}

if (customer.age >= 18) {
	user_is_right_age = true;
} else {
	user_is_right_age = false;
}

このif文が実行されると、user_is_right_ageにはfalseが代入されます。プログラムはまず顧客の年齢が18歳以上かどうかを確認します。Joeは15歳なので条件を満たさず、else節が実行されてuser_is_right_ageにfalseが代入されるのです。

このコードは正しく動作しますが、少し冗長ですね。顧客の年齢を確認するだけで5行ものコードが必要になっています。

もし、同じ処理をたった1行で書けるとしたらどうでしょう？そこで登場するのが三項演算子です。

JavaScript三項演算子の実例

先ほどのif文は、三項演算子を使うと次のように簡潔に書き換えられます。

user_is_right_age = customer.age >= 18 ? true : false;

このコードを実行すると、先ほどのif文とまったく同じ結果（false）が得られますが、行数はぐっと少なくなります。もし条件がtrue、つまりユーザーの年齢が18歳以上であれば、プログラムはtrueを返します。

先ほどの例では、ユーザーが年齢要件を満たしているかどうかを確認しました。ユーザーは18歳未満だったため条件は満たされず、コードはfalseを返したわけです。

次に別の例を見てみましょう。今度は、サイトの顧客が速達配送の対象かどうかを確認したいとします。これもJavaScriptの三項演算子で簡単に実現できます。

let userIsExpressCustomer = true;

let shippingTimeForCustomer = userIsExpressCustomer ? 48 : 72;

この三項演算子は、ユーザーが速達会員かどうかをチェックし、その結果に応じて配送時間を決定します。上の例ではユーザーは速達会員なので条件はtrueとなり、48時間配送が適用されます。もし速達会員でなければ条件はfalseとなり、72時間配送になる仕組みです。

ネストした三項演算子

ネストした三項演算子とは、三項演算子の中にさらに別の三項演算子を組み込んだものです。複数の条件を順番に評価したい場合に便利ですが、書き方を誤るとコードの可読性が大きく低下するため注意が必要です。

例えば、ECサイトが3種類の配送時間を提供しているとします。通常配送（72時間）、速達配送（48時間）、翌日配送（24時間）の3つです。選択肢が3つある場合、三項演算子をどのように使えばよいのでしょうか？if...else文に切り替えるべきでしょうか？

ご安心ください。JSの三項演算子でも、ネストを活用すれば3つの式を問題なく扱えます。以下がその実装例です。

let userIsExpressCustomer = false;
let userIs24HourCustomer = true;

let shippingTimeForCustomer = userIsExpressCustomer ? 48 : userIs24HourCustomer ? 24 : 72;

この場合、顧客の配送時間は24時間になります。プログラムはまずユーザーが速達会員かどうかを確認します（ここではfalse）。次に24時間配送の会員かどうかを確認し、これはtrueです。そのため、shippingTimeForCustomerには24が代入されます。

ユーザーが速達会員でも24時間配送会員でもない場合は、配送時間は72時間になります。

まとめ

JavaScriptの三項演算子は、条件がtrueかfalseかを評価したいときに、if文の代わりとして使える強力な構文です。また、三項演算子の中に別の三項演算子を入れ子にすることで、複数の条件を扱うことも可能です。

三項演算子のような条件分岐は、特定の条件が満たされたときにだけコードを実行する仕組みです。条件分岐はほぼすべてのプログラミング言語における重要な要素であり、あなたが書くほぼすべてのJavaScriptプログラムで登場することでしょう。

さらにJavaScriptについて学びたい方は、学習方法を体系的にまとめた完全ガイドもぜひ参考にしてください。知識を一段階深めるために必要なリソースがすべて揃っています。