【ITニュース解説】Ternary Operator: Is It Just a Fading if/else?

システムエンジニアを目指す皆さんにとって、プログラミングの学習は新しい発見の連続だろう。その中でも、コードをより簡潔に、効率的に記述するための様々なテクニックが存在する。今回は「三項演算子」と呼ばれる便利な機能について、その基本的な使い方から、どのような場合に活用できるのか、そして注意すべき点までを詳しく解説する。

三項演算子は、別名「条件演算子」とも呼ばれ、プログラミングにおいて非常に一般的な「もし～ならば、これを行い、そうでなければ、あれを行う」という条件分岐の処理を、より短く記述するための仕組みだ。これは、普段よく使うif-else文の簡易版と考えると分かりやすいだろう。つまり、ある条件が真（true）であるか偽（false）であるかに基づいて、二つの異なる値のうちどちらか一方を返す、という役割を担っている。

この三項演算子の最大の特徴は、JavaScriptの演算子の中で唯一、三つの要素（オペランド）を取ることだ。その三つの要素とは、以下の通りである。

1. 条件: まず最初に評価される部分で、結果が真か偽かになる式。
2. 真の場合に実行される式: 条件が真と評価された場合に返される値や実行される処理。
3. 偽の場合に実行される式: 条件が偽と評価された場合に返される値や実行される処理。 なお、JavaScriptにおける偽と評価される値（falsy値）には、false、null、undefined、0、空文字列（""）、NaNなどがある。これら以外の値は基本的に真と評価される（truthy値）。

そして、その記述の仕方は非常にシンプルで、次のようになる。 条件 ? 真の場合の式 : 偽の場合の式; この構文を見ると、疑問符（?）とコロン（:）が区切りとして使われているのがわかる。例えば、ある人の年齢が18歳以上かどうかを判断し、「Adult」（大人）か「Not an adult」（大人ではない）かを返す関数を考えてみよう。

通常のif-else文で書く場合、以下のようになる。

Copy
1function isAdult(age){
2    if (age >= 18){
3        return "Adult";
4    }
5    return "Not an adult";
6}

これを三項演算子を使って書き換えると、驚くほど簡潔になる。

Copy
1function isAdult(age){
2    return age >= 18 ? "Adult" : "Not an adult";
3}

このように、if-else文で複数行にわたる処理が、三項演算子を使うことでたった一行で表現できるようになった。コードの行数が減るため、一見すると非常に効率的で読みやすいと感じるかもしれない。しかし、この「簡潔さ」が常に「読みやすさ」に繋がるわけではない、という点には注意が必要だ。この後で詳しく説明するが、三項演算子を使いすぎたり、複雑な条件で使ったりすると、かえってコードが理解しにくくなることもある。

三項演算子には、「右結合性」という特性がある。これは、複数の条件を連続してチェックする際に役立つ性質だ。まるでif-else if-else if-elseと続くような条件分岐を、三項演算子で表現できる。例えば、複数の条件を順に評価し、最初に見つかった真の条件に対応する値を返すような関数を考えてみよう。

Copy
1function myFunction(){
2  return condition1 ? value1
3       : condition2 ? value2
4       : condition3 ? value3
5       : value4;
6}

この例では、condition1が真ならばvalue1が返され、そうでなければcondition2が評価される。condition2が真ならばvalue2が返され、そうでなければcondition3が評価される、といった具合に続く。最終的にどの条件も真でなければ、最後のvalue4が返される。このように、複数の条件を連鎖させて一度にチェックできるため、特定の状況では非常に便利だ。ただし、複数の条件をこのように連鎖させる場合、特にそのロジックが複雑になってくると、if-else if-else文を使った方が、コードの意図がより明確になり、後から読み返す人にとっても理解しやすくなる場合が多いことを覚えておこう。

では、三項演算子は具体的にどのような場面で力を発揮するのだろうか。いくつかの代表的なユースケースを見ていこう。

一つ目は、変数に条件付きで値を代入する場合だ。例えば、ユーザーのログイン状態によって表示するメッセージを変えたいとする。「ようこそ、[ユーザー名]さん！」というメッセージと、「ログインしてください」というメッセージを切り替えたい場合、三項演算子を使うと簡潔に記述できる。

Copy
1let message = isLoggedIn ? `ようこそ、${username}さん！` : "ログインしてください";

このように、isLoggedInという条件に基づいてmessage変数に適切な値が代入される。

二つ目は、アロー関数で暗黙の戻り値（implicit return）を持つ場合だ。JavaScriptのアロー関数の中には、処理が一行で完結する場合にreturnキーワードを省略できる機能がある。三項演算子は「式」であるため、評価された結果を直接返す性質がある。このため、暗黙の戻り値を持つアロー関数と非常に相性が良い。

Copy
1const getStatus = (score) => score >= 60 ? "合格" : "不合格";

このgetStatus関数は、スコアが60以上なら「合格」、そうでなければ「不合格」という文字列を返す。return文を明示的に書く必要がなく、一行でスマートに記述できる。

三つ目は、Reactのようなフレームワークでの条件付きレンダリングだ。Webアプリケーション開発において、特定の条件に基づいて異なるUIコンポーネントを表示したり、表示・非表示を切り替えたりする場面は頻繁にある。Reactでは、JSX（JavaScriptの拡張構文）内でJavaScriptの式を直接記述できるため、三項演算子はそのような条件付きレンダリングに非常に重宝される。

Copy
1<div>
2  {isLoggedIn ? <WelcomeMessage /> : <LoginPrompt />}
3</div>

この例では、isLoggedInが真ならば<WelcomeMessage />コンポーネントが、偽ならば<LoginPrompt />コンポーネントが表示される。WebアプリケーションのUIを動的に変更する際、三項演算子は非常に強力なツールとなる。

しかし、三項演算子の便利さゆえに、使い方を誤るとコードの可読性を著しく損なう可能性がある点には注意が必要だ。開発現場では、コードが正しく動作することと同じくらい、あるいはそれ以上に「他の人が読んだ時にすぐに理解できるか」という可読性が重視される。

特に、複数の条件をチェーンさせすぎたり、三項演算子を深くネストさせたりするようなケースは避けるべきだ。例えば、先ほど見たようなcondition1 ? value1 : condition2 ? value2 : condition3 ? value3 : value4;といった記述は、条件が2つくらいまでならまだしも、3つ、4つと増えていくと、一目でどの条件でどの値が返されるのかを把握するのが難しくなる。このような複雑なロジックを扱う場合は、迷わずif-else if-else文を使った方が、断然読みやすくなるだろう。コードが長くなるように見えても、各条件とそれに対応する処理が明確に分かれているため、全体として理解しやすくなるのだ。

プログラミングにおいて、特に複雑な処理を記述する際には、「シンプルであること」が最も良いアプローチとなることが多い。凝った書き方をして一行で済ませることにこだわるよりも、多少行数が増えても、誰が読んでも迷いなく理解できる、人間にとって読みやすいコードを書くことを心がけることが、良いシステムエンジニアへの第一歩だ。三項演算子は非常に便利なツールだが、その特性を理解し、適切な場面で、そして適切な範囲で利用することが、クリーンで保守しやすいコードを書くための鍵となる。