先生と生徒の会話形式で理解しよう

生徒

「先生、JavaScriptで条件によって違う結果を1行で書ける方法ってありますか？」

先生

「はい、それが三項演算子（さんこうえんざんし）というものです。条件に応じて値を変えたいときに便利で、コードを短くスッキリ書けますよ。」

生徒

「三項演算子ってどんな書き方をするんですか？普通のif文とどう違うんでしょう？」

先生

「三項演算子は、条件式を使った「もし〇〇なら△△、そうでなければ□□」という処理を1行で書く方法です。コードが短くなるので読みやすくなります。」

生徒

「具体的にどう書くか教えてください！」

先生

「では、基本の書き方から見ていきましょう！」

1. 三項演算子とは？基本構文を理解しよう

三項演算子は、英語で「ternary operator」と呼ばれ、JavaScriptで条件分岐を1行で簡潔に書ける便利な構文です。基本の形は「条件 ? 式1 : 式2」となっており、「もし条件が真（true）なら式1、そうでなければ式2」という意味になります。日常会話の「〇〇なら△△、それ以外なら□□」という考え方にとても近いため、初心者の方でもイメージしやすいのが特徴です。

ここでいう「条件」とは、数値の大小比較や等しいかどうかの判定など、結果がtrueかfalseになる式のことです。三項演算子は、その判定結果に応じて値を選ぶために使われます。


条件 ? 式1 : 式2;

例えば、「もし点数が60点以上なら合格、それ以外は不合格」と判定したい場合、次のように書けます。これは、if文で書く処理をコンパクトにまとめた形です。


let result = score >= 60 ? "合格" : "不合格";

この1行で、条件の判定と結果の代入を同時に行っています。短く書けるだけでなく、「何をしたい処理なのか」が一目で分かる点も、三項演算子の大きなメリットです。

2. if文との違いと使い分け

JavaScriptの条件分岐といえばif文がよく使われますが、三項演算子はその簡略版のような位置づけです。if文は処理の流れを分けるために使われることが多く、複数行にわたって処理を書くことができます。一方、三項演算子は「条件によって値を決めたい」という場面に向いています。

例えば、次のif文は点数によって結果を変える一般的な書き方です。処理の流れが分かりやすく、初心者の方にも理解しやすいのが特徴です。


let score = 70;
let result;

if (score >= 60) {
  result = "合格";
} else {
  result = "不合格";
}

これと同じ内容を三項演算子で書くと、次のように1行で表現できます。処理がシンプルな場合は、コード全体がすっきり見えるようになります。


let result = score >= 60 ? "合格" : "不合格";

このように、「条件を判定して、どちらかの値を代入するだけ」の場合は三項演算子が便利です。ただし、条件の中で複雑な処理をしたり、何段階も分岐させたりする場合は、無理に三項演算子を使わず、if文を選んだほうが読みやすくなります。

使い分けの目安としては、「短く書けて意味がすぐ分かるなら三項演算子」「少しでも迷いそうならif文」と覚えておくと安心です。

3. 三項演算子の具体例：合格・不合格判定

ここでは、三項演算子を使って「点数が合格ラインを超えているかどうか」を判定してみます。合格・不合格のように結果が二つに分かれる処理は、三項演算子がとても得意な場面です。条件を確認して、その結果に応じた文字を選ぶだけなので、初心者の方でも流れを追いやすいです。

まずは点数をscoreに入れて、60点以上なら「合格」、それ以外なら「不合格」という文字をresultに代入します。最後にconsole.log()で結果を表示します。


let score = 75;
let result = score >= 60 ? "合格" : "不合格";
console.log(result);


合格

このコードのポイントは、score >= 60という部分が「条件」になっていることです。ここがtrueなら「合格」が選ばれ、falseなら「不合格」が選ばれます。つまり、三項演算子は「条件で値を選んで代入する」書き方だと覚えると理解が早いです。

もう一つ、点数を変えた場合も見てみましょう。点数が低いときは結果がどう変わるか、同じ形のまま確認できます。


let score = 40;
let result = score >= 60 ? "合格" : "不合格";
console.log(result);


不合格

このように、三項演算子を使うと「条件を満たすかどうか」で表示や結果をサッと切り替えられます。点数判定だけでなく、年齢チェック、ログイン状態の表示切り替えなど、JavaScriptの開発ではよく登場する考え方なので、ここでしっかり慣れておくと後が楽になります。

4. 三項演算子の活用例：表示するメッセージを変える

たとえば、Webページでユーザーの年齢によって表示するメッセージを変えたい場合を考えてみましょう。


let age = 20;
let message = age >= 18 ? "成人です" : "未成年です";
console.log(message);


成人です

このように簡単に条件に応じた文字列を表示できます。

5. 三項演算子をネストして多段階条件分岐も可能

三項演算子は入れ子（ネスト）にして複数の条件を判定することもできます。たとえば、点数によって「優」「良」「可」「不可」と評価を分ける場合です。


let score = 85;
let grade = score >= 90 ? "優" :
            score >= 75 ? "良" :
            score >= 60 ? "可" : "不可";
console.log(grade);

良

このように、三項演算子を連続して使うことで、複数の条件を短く書けます。ただし、あまり複雑にすると読みづらくなるので注意してください。

6. 三項演算子の注意点と使い方のポイント

読みやすさを重視する
簡単な条件なら三項演算子が便利ですが、複雑すぎるとコードが分かりにくくなるので、適切に使い分けましょう。
値を返すことに使う
三項演算子は「値を返す」ために使います。処理の流れを分けるだけのときはif文が適しています。
式の中に書ける
三項演算子は関数の引数や変数の初期化など、式として使いたいときに便利です。

7. よくある質問：三項演算子で処理を書くときのコツは？

三項演算子はシンプルに書くのがコツです。条件式と結果の値がわかりやすいと、後から見返したときに理解しやすいです。

例えば、長い条件や複雑な処理はif文に分けて書いたほうがメンテナンスしやすいです。

まとめ

三項演算子の基本を振り返ろう

ここまで、JavaScriptの三項演算子（条件演算子）について、基本構文から具体的な使い方、注意点まで順番に解説してきました。三項演算子は、「条件 ? 真のときの値 : 偽のときの値」という形で書くことで、条件分岐を一行で表現できる仕組みです。if文と比べてコードが短くなり、シンプルな条件分岐であれば読みやすさも向上します。

特に、点数による合否判定や、年齢による表示メッセージの切り替えなど、「条件によって代入する値を変えたい」場面では三項演算子がとても役立ちます。変数への代入、表示用メッセージの決定、関数の戻り値の切り替えなど、さまざまな場面で自然に使えるのが特徴です。

if文との違いを理解することが大切

三項演算子は便利ですが、すべての条件分岐を置き換えるものではありません。条件が複雑になったり、処理の中身が長くなったりする場合は、無理に三項演算子を使うとかえって読みづらくなってしまいます。そのような場合は、素直にif文を使うほうが、後からコードを読む人にとって親切です。

「値を決めたいだけなのか」「処理の流れを分けたいのか」を意識して使い分けることで、JavaScriptのコードはぐっと分かりやすくなります。三項演算子は、あくまでシンプルな条件分岐をコンパクトに書くための道具だと考えるとよいでしょう。

三項演算子の基本形をもう一度確認


// 条件によって代入する値を変える基本形
let result = condition ? "真の場合の値" : "偽の場合の値";

この形をしっかり覚えておくことで、三項演算子は自然と使えるようになります。最初は短くて分かりやすい条件から使い始め、少しずつ慣れていくのがおすすめです。

先生と生徒の振り返り会話

生徒

「三項演算子って、最初は難しそうに見えたけど、if文を短く書いているだけなんですね。点数の判定とか、メッセージの切り替えがすごく分かりやすくなりました。」

先生

「その通りです。三項演算子は、条件によって値を決めたいときにとても便利な書き方です。ただし、無理に使いすぎないことも大切ですよ。」

生徒

「ネストもできるって学びましたけど、たくさん重ねると読みにくくなりそうですね。」

先生

「いいところに気づきましたね。複雑になりそうだと感じたら、if文に切り替える判断も立派なスキルです。コードは、動くだけでなく、読みやすさもとても重要なんです。」

生徒

「これからは、簡単な条件分岐では三項演算子を使って、複雑な場合はif文を使うように意識してみます。」

先生

「それが一番いい使い方ですね。三項演算子を上手に使えるようになると、JavaScriptのコードが一段とスマートになりますよ。」

この記事を通して、JavaScriptの三項演算子の基本構文、if文との違い、具体的な活用方法、そして使いどころの判断ポイントまで理解できたはずです。小さな条件分岐から少しずつ実際のコードで使ってみることで、自然と身についていきます。ぜひ、日々のJavaScript学習やWeb開発の中で活用してみてください。