以前「ifと三項演算子って何が違うの？使い分ける必要ある？」という質問を受けたことがあったので、僕なりにアウトプットしてみました。
プログラミング初心者や独学で勉強しているとこういった「現場でよく使われるけど、教科書には詳しく載っていない」技術でつまづくこと、よくあると思います。
もしかしたら、同じような疑問を抱えている方もいるかもと思い投稿してみました。
三項演算子の基本的な使い方
三項演算子は、if-else文で書く条件分岐を、たった1行で簡潔に記述するためのものです。
基本的な書き方は以下の通りです。
条件式 ? trueのときの値 : falseのときの値
- 条件式: 真偽値（true/false）を返す式
- ?: 三項演算子の開始を意味する
- trueのときの値: 条件式がtrueだったときに返される値
- :: trueとfalseの値を区切る
- falseのときの値: 条件式がfalseだったときに返される値
if-else文との比較
例えば、「ユーザーの年齢が20歳以上なら『成人』、それ未満なら『未成年』と表示する」という処理を考えてみましょう。
・if-else文で書く場合
const age = 22;
let status;
if (age >= 20) {
status = '成人';
} else {
status = '未成年';
}
console.log(status); // 出力: 成人
・三項演算子で書く場合
const age = 22;
const status = age >= 20 ? '成人' : '未成年';
console.log(status); // 出力: 成人
このように三項演算子を使えば、わずか1行で同じ処理を書けることができます。
コードの行数が減り、よりシンプルで読みやすくなります。
三項演算子を使う場面
そんなにシンプルに書けるなら、ifなんて使わず全部三項演算子にしてしまえばいいかというと、そうではありません。
if文と三項演算子それぞれにメリット・デメリットがあるので、状況に応じて適切に使い分けないとかえって見にくいコードになってしまいます。
三項演算子のメリット
三項演算子の最大のメリットは、やはりその簡潔さです。
- コードの行数が減る: 短い条件分岐を1行にまとめることで、全体のコード量を削減できます。これは、特に個人開発でスピーディーにコードを書きたいときに重宝します。
- 可読性が向上する: 単純な条件式であれば、
if-else文よりも直感的に理解しやすくなります。「この条件が真ならこれ、偽ならこれ」という構造が明確になります。 - 変数の初期化に便利: 上記の例のように、条件によって変数に代入する値を切り替えたい場合に非常に有効です。letではなくconstで宣言できるケースが増えるため、意図しない値の変更を防ぐことにもつながります。
三項演算子のデメリット
一方で、三項演算子には注意すべきデメリットもあります。
- 複雑な条件式には向かない:
if-else ifのような複数の条件を組み合わせる場合や、条件式自体が非常に長い場合、三項演算子を無理に使うと逆にコードが読みにくくなってしまいます。 - ネスト（入れ子）は避けるべき: 三項演算子の中にさらに三項演算子を入れる「ネスト」は、コードの可読性を著しく低下させます。これは、読みやすいコードを書く上で避けるべき悪しき習慣です。
- 処理を複数実行できない: 三項演算子は「値を返す」ことに特化しています。if文のように、条件が満たされたときに複数の処理（ログを出力したり、別の関数を呼び出したり）を実行することはできません。
そもそも三項演算子って？
三項演算子は、条件によって異なる値を返す、一種の条件演算子です。
つまりは演算子です。
対してif文はあくまで文です。
要するに、
-
if文: 条件に応じた処理を指定できる - 三項演算子: 条件に応じた値を指定できる
- 論理演算子: 条件に応じて
TrueorFalseが出る
となります。
僕が使う三項演算子テクニック
ここからは、僕が実際の開発でよく使う三項演算子のテクニックを紹介します。
・関数内のreturn文で使う
三項演算子は、変数の代入だけでなく、関数のreturn文でも大活躍します。
例えば、「ユーザーの評価点に応じて、『Good』か『Bad』を返す」という関数を考えてみましょう。if-else文で書くと、
function getReviewStatus(score) {
if (score >= 3) {
return 'Good';
} else {
return 'Bad';
}
}
これ、少し長いので三項演算子を使って
function getReviewStatus(score) {
return score >= 3 ? 'Good' : 'Bad';
}
このようにすっきりします。さらには関数の役割がより明確になる感じがします。短い関数であれば、この書き方を積極的に採用してみるといいかもです。
・ネストするなら使わない
まずは以下のコードを見てください。
const userStatus = user.isPremium ? (user.isActive ? 'プレミアム会員' : '退会済') : '一般会員';
これは会員状態を出しているものです。一見すると短く書けていますが、パッと見てすぐに理解するのは難しいです。このようなケースでは、if-else文で丁寧に書く方が、後からコードを読んだ人（未来の自分も含む）にとって親切になります。
let userStatus;
if (user.isPremium) {
if (user.isActive) {
userStatus = 'プレミアム会員';
} else {
userStatus = '退会済';
}
} else {
userStatus = '一般会員';
}
これをもっとスッキリさせるなら、
let userStatus;
if (user.isPremium) {
userStatus = user.isActive ? 'プレミアム会員' : '退会済';
} else {
userStatus = '一般会員';
}
これぐらいの方が見やすいかなと思います。
このように、三項演算子を使うかどうかは、コードの読みやすさが一番の判断基準になると僕は考えます。「短く書くこと」も大事ですがそれよりも、「誰が読んでもすぐに理解できること」を優先することが、現場レベルのコードを書く上では非常に重要です。
まとめ
この記事では、三項演算子の基本的な使い方から、if文との違い、そして僕が実際に使うなら...な部分を解説しました。
改めて、今回のポイントをまとめます。
- 三項演算子は、条件分岐を1行で書ける便利な構文。
- 単純な条件分岐や、変数への代入、return文で使うと、コードの可読性が向上する。
- 複雑な条件式や、ネストさせるのは避けるべき。
- 最も重要なのは「読みやすいコード」を書くこと。
プログラミングは、ただ動くコードを書くだけではありません。他の人が読んでも理解しやすく、メンテナンスしやすいコードを書くことが大切です。三項演算子を適切に使いこなすことは、その第一歩になります。
この記事を読んで、三項演算子への理解が深まったという方は、ぜひご自身の個人開発や学習で積極的に試してみてください。最初は慣れないかもしれませんが、次第にその便利さがわかってくるはずです。
もし「この記事が参考になった！」と感じたら、ぜひ「いいね」や「ストック」をお願いします。
最後までお読みいただきありがとうございました。一緒に頑張りましょう！
【最後に告知！】僕が1 on 1でプログラミング教えます！
AI時代に求められる実務スキル & エンジニアのリアルを網羅したカリキュラムを実際の開発案件をもとに作り上げました！今、プログラミングスクールを検討している方で、
- Web開発系エンジニアを目指している
- システムエンジニアを目指している
- AI時代でも活躍できる技術力を身につけたい
そんな人だけを対象とした、エンジニアという仕事に興味を持ち、頑張ってみようと思っているあなたを現役エンジニアが応援・サポートする完全1 on 1スクールですので、こちらもご検討ください！