JavaScript 三項演算子

概要：このチュートリアルでは、JavaScript の三項演算子を使用してコードを簡潔にする方法を学びます。 

JavaScript 三項演算子の概要

条件が true と評価された場合にブロックを実行したい場合は、多くの場合、if…else ステートメントを使用します。例えば

let age = 18;
let message;

if (age >= 16) {
  message = 'You can drive.';
} else {
  message = 'You cannot drive.';
}

console.log(message);Code language: JavaScript (javascript)

この例では、年齢が 16 歳以上の場合は、運転できるというメッセージを表示します。あるいは、if-else ステートメントの代わりに、次のように三項演算子を使用することもできます。

let age = 18;
let message;

age >= 16 ? (message = 'You can drive.') : (message = 'You cannot drive.');

console.log(message);Code language: JavaScript (javascript)

または、次のように式の中で三項演算子を使用することもできます。

let age = 18;
let message;

message = age >= 16 ? 'You can drive.' : 'You cannot drive.';

console.log(message);Code language: JavaScript (javascript)

三項演算子の構文は次のとおりです。

condition ? expressionIfTrue : expressionIfFalse;Code language: JavaScript (javascript)

この構文では、condition は true または false のいずれかのブール値に評価される式です。

条件が true の場合、最初の式 (expresionIfTrue) が実行されます。false の場合は、2 番目の式 (expressionIfFalse) が実行されます。

式で使用される三項演算子の構文を以下に示します。

let variableName = condition ? expressionIfTrue : expressionIfFalse;Code language: JavaScript (javascript)

この構文では、condition が true の場合、variableName は最初の式 (expressionIfTrue) の結果を取得し、そうでない場合は expressionIfFalse の結果を取得します。

JavaScript 三項演算子の例

三項演算子を使用する例をいくつか見てみましょう。

1) JavaScript 三項演算子を使用して複数のステートメントを実行する

次の例では、三項演算子を使用して複数の操作を実行しています。各操作はコンマで区切られています。例えば

let authenticated = true;
let nextURL = authenticated
  ? (alert('You will redirect to admin area'), '/admin')
  : (alert('Access denied'), '/403');

// redirect to nextURL here
console.log(nextURL); // '/admin'Code language: JavaScript (javascript)

この例では、三項演算子の戻り値は、コンマ区切りのリストの最後の値です。

2) 三項演算子の例を簡略化する

次の例を参照してください。

let locked = 1;
let canChange = locked != 1 ? true : false;Code language: JavaScript (javascript)

locked が 1 の場合、canChange 変数は false に設定され、そうでない場合は true に設定されます。この場合、次のようにブール式を使用して簡略化できます。

let locked = 1;
let canChange = locked != 1;Code language: JavaScript (javascript)

3) 複数の JavaScript 三項演算子を使用する例

次の例は、同じ式で 2 つの三項演算子を使用する方法を示しています。

let speed = 90;
let message = speed >= 120 ? 'Too Fast' : speed >= 80 ? 'Fast' : 'OK';

console.log(message);Code language: JavaScript (javascript)

出力

FastCode language: JavaScript (javascript)

コードの可読性が向上する場合に三項演算子を使用することをお勧めします。ロジックに多くの if...else ステートメントが含まれている場合は、三項演算子の使用は避けるべきです。

まとめ

• JavaScript の三項演算子 (?:) を使用して、コードを簡潔にします。