【JavaScript】三項演算子の書き方と使い方の基本

JavaScriptの三項演算子について解説します。三項演算子は、if...else文のような条件分岐を1行で簡潔に記述できる便利な構文です。基本的な書き方から、複数の条件を扱う応用例まで、サンプルコードを使って分かりやすく説明します。if文との違いを学び、コードをより短く書く方法を習得しましょう。

作成日: 2025年12月21日更新日: 2025年12月21日

開発環境

OS: Windows10
Editor: Visual Studio Code
JavaScript: ES6以降

JavaScriptの三項演算子とは

三項演算子は、「条件式」、「条件が真（true）の場合に返す値」、「条件が偽（false）の場合に返す値」という3つの要素（オペランド）で構成される演算子です。

この演算子を使うと、「ある条件が満たされた場合はAという値を、満たされなかった場合はBという値を返す」といった処理を、わずか1行で簡潔に記述することができます。

機能的にはif文と似ており、簡単な条件分岐であればif文よりもコードを短く書けるため、if文の省略形としてよく使われます。

三項演算子の書き方


1条件式 ? 真の場合の値 : 偽の場合の値;

三項演算子は、もし〜ならA、そうでなければB、というような条件分岐を1行で簡潔に記述するための書き方です。主に if...else 文をより短く表現したい場合に使用されます。

この構文は、以下の3つの部分で構成されています。

条件式: true (真) または false (偽) の結果になる式を記述します。
真の場合の値: 条件式 の結果が true だった場合に、採用される値です。? の後に記述します。
偽の場合の値: 条件式 の結果が false だった場合に、採用される値です。: の後に記述します。

このように、処理に必要な項目が「条件式」「真の場合の値」「偽の場合の値」の3つであるため、三項演算子と呼ばれています。

サンプルコード

このセクションでは、JavaScriptの条件分岐について解説します。条件によって処理を分けるための基本的な構文であるif文と、それを簡潔に記述できる三項演算子を学びます。

javascript/chapter09/index.html

まず、作成したJavaScriptファイルを読み込むためのHTMLファイルです。 <body>タグの最後でscriptタグを使い、script01.jsとscript02.jsの2つのファイルを読み込んでいます。defer属性は、HTMLの読み込みを優先し、その後にJavaScriptを実行するための記述です。


1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <title>JavaScriptチュートリアル</title>
7  </head>
8
9  <body>
10    <h1>JavaScriptチュートリアル</h1>
11    <script src="./script01.js" defer></script>
12    <script src="./script02.js" defer></script>
13  </body>
14</html>
15

javascript/chapter09/script01.js

このコードは、変数の値に応じて処理を分ける基本的な例です。ここでは「年齢」を基準に、「成人」か「未成年」かを判定しています。

if文を使用する場合 if文は、指定した条件が正しい（真）場合に、続く{}内の処理を実行します。age >= 18は「変数ageが18以上」という条件です。この条件に当てはまらない（偽の）場合はelseブロックの処理が実行されます。この例ではageが20なので、条件は真となり、status変数には'成人'が代入されます。

三項演算子を使用する場合 三項演算子は、if...else文を一行で簡潔に書くための構文です。 (条件式) ? 真の場合の値 : 偽の場合の値 の形式で記述します。この例では、条件age >= 18が真なので、?の直後にある'成人'がstatus変数に代入されます。if文を使った場合と全く同じ結果になります。


1// 例: 成人か未成年を表示
2// 年齢が18歳以上であれば成人、そうでない場合は未成年と表示する
3
4// 年齢を設定する
5let age = 20;
6
7// if文を使用する場合
8let status;
9if (age >= 18) {
10  status = '成人';
11} else {
12  status = '未成年';
13}
14console.log(status);  // 成人
15
16// 三項演算子を使用する場合
17status = (age >= 18) ? '成人' : '未成年';
18console.log(status);  // 成人

javascript/chapter09/script02.js

このコードは、3つ以上の選択肢がある場合の条件分岐の例です。ここでは、数値が「正の数」、「負の数」、「ゼロ」のいずれであるかを判定しています。

if文を使用する場合 if...else if...else文を使うことで、複数の条件を順番に判定できます。

最初のif (number > 0)で「0より大きいか」を判定します。
1の条件に当てはまらない場合、次のelse if (number < 0)で「0より小さいか」を判定します。
どの条件にも当てはまらない場合、最後のelseブロックの処理が実行されます。この例ではnumberが-5なので、2番目のelse ifの条件が真となり、result変数には'負の数'が代入されます。

三項演算子を使用する場合 三項演算子を入れ子（ネスト）にすることで、3つ以上の分岐を表現することも可能です。まず、number > 0が判定されます。今回は偽なので、:の後の式が評価されます。次に、内側の((number < 0) ? '負の数' : 'ゼロ')が評価されます。number < 0は真なので、'負の数'がresult変数に代入されます。複雑な条件分岐ではif文の方が読みやすい場合もありますが、このように記述することもできます。


1// 例: 数値が正の数か、負の数か、またはゼロかを判定する
2// 数値が0より大きければ「正の数」、0より小さければ「負の数」、0なら「ゼロ」と表示する
3
4// 数値を設定する
5let number = -5;
6
7// if文を使用する場合
8let result;
9if (number > 0) {
10  result = '正の数';
11} else if (number < 0) {
12  result = '負の数';
13} else {
14  result = 'ゼロ';
15}
16console.log(result);  // 負の数
17
18// 三項演算子を使用する場合
19result = (number > 0) ? '正の数' : ((number < 0) ? '負の数' : 'ゼロ');
20console.log(result);  // 負の数
21

おわりに

今回は、if...else文を1行で簡潔に記述できる三項演算子について学習しました。「成人」か「未成年」かを判定した例のように、シンプルな条件分岐でコードが非常に見やすくなることを確認できたかと思います。また、三項演算子をネストさせれば「正の数・負の数・ゼロ」の判定のような複数の分岐も表現できますが、複雑な場合はかえって読みにくくなることもあります。これからは状況に応じてif文と三項演算子を適切に使い分け、読みやすいコードを書くことを意識していきましょう。