JavaScript三項演算子の使い方完全ガイド！初心者でも簡単に条件分岐

1. 三項演算子の基本的な書き方

1. 三項演算子の基本的な書き方

三項演算子は、JavaScriptで条件分岐を簡単に書ける演算子です。形式は次の通りです。

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

この場合、ageが20以上なら「成人です」、そうでなければ「未成年です」と表示されます。if文を使うより短く書けます。

2. 複数の条件を組み合わせる

2. 複数の条件を組み合わせる

三項演算子は入れ子にして複数の条件も書けます。例えば成績に応じた評価を表示してみます。

const score = 85;
const grade = score >= 90 ? "A" :
              score >= 80 ? "B" :
              score >= 70 ? "C" : "D";
console.log(grade);

スコア85の場合、条件に沿って「B」と出力されます。三項演算子を使うと、条件ごとに短く評価を分けられます。

3. 三項演算子で関数の返り値を変える

3. 三項演算子で関数の返り値を変える

三項演算子は関数内で使うこともできます。条件によって返す値を変えたいときに便利です。

function checkNumber(num) {
  return num % 2 === 0 ? "偶数" : "奇数";
}
console.log(checkNumber(7));
console.log(checkNumber(10));

7の場合は「奇数」、10の場合は「偶数」と返ります。関数で条件分岐を短く書くのに最適です。

4. HTML要素に三項演算子を使う例

4. HTML要素に三項演算子を使う例

Webページ上で、条件に応じて表示内容を変えるときにも三項演算子が使えます。

const isLoggedIn = true;
document.getElementById("status").textContent =
  isLoggedIn ? "ログイン中" : "ログアウト中";

isLoggedInがtrueなら「ログイン中」、falseなら「ログアウト中」と表示されます。コードがシンプルになり、読みやすくなります。

5. 三項演算子と論理演算子を組み合わせる

5. 三項演算子と論理演算子を組み合わせる

条件が複雑な場合は論理演算子と組み合わせて使えます。

const temp = 25;
const weather = temp > 30 ? "暑い" :
                temp >= 20 && temp <= 30 ? "快適" : "寒い";
console.log(weather);

温度が25度の場合、「快適」と表示されます。複数の条件を簡潔に表現できる点が三項演算子の強みです。

6. 三項演算子の注意点

6. 三項演算子の注意点

三項演算子は便利ですが、複雑にしすぎると読みづらくなります。基本的には単純な条件分岐や値の設定に使い、複雑な場合はif文を使う方が安全です。

const value = condition1 ? "A" :
              condition2 ? "B" :
              condition3 ? "C" : "D";

条件が増えすぎると可読性が下がるので、入れ子は2～3段程度に留めるのがおすすめです。

7. 三項演算子を使った便利な短縮コード

7. 三項演算子を使った便利な短縮コード

三項演算子を使えば、短いコードで簡単に条件分岐できます。例えば、ボタンの有効無効を切り替える場合も短く書けます。

const isDisabled = false;
const buttonText = isDisabled ? "無効" : "有効";
console.log(buttonText);

このように短いコードでも条件に応じた値を設定できるので、初心者でも読みやすくなります。

8. まとめ

8. まとめ

JavaScriptの三項演算子は、条件に応じて値を簡単に切り替える便利な演算子です。if文より短く書けるため、コードがすっきりします。ただし、条件が複雑になりすぎると読みにくくなるので、使いすぎには注意しましょう。

簡単な条件分岐や、値の設定、関数の返り値、HTML表示の切り替えなど、幅広く使えるのが三項演算子の特徴です。短くても可読性を意識して書くことで、初心者でもわかりやすく扱えます。

まとめ

まとめ

本記事では、JavaScriptにおける三項演算子の基本から応用まで詳しく解説しました。三項演算子は、条件分岐を短く、かつシンプルに書ける便利な演算子であり、条件 ? 値1 : 値2という形で条件がtrueかfalseかによって返す値を切り替えることができます。通常のif文よりもコンパクトに書けるため、コードの可読性を高めながら、初心者でも理解しやすい形で条件分岐を実装できます。

さらに、三項演算子は入れ子にすることで複数の条件にも対応可能です。成績に応じた評価表示や、温度に応じた天気表現など、条件が複数ある場合も短いコードで実現できます。ただし、入れ子が深くなりすぎると可読性が低下するため、2～3段程度に留めることが推奨されます。論理演算子と組み合わせることで、より複雑な条件設定も簡潔に書ける点も三項演算子の強みです。

また、関数の返り値やHTML要素の表示切替など、さまざまな場面で三項演算子は活用できます。例えば、数値の偶奇判定やログイン状態の表示切り替え、ボタンの有効無効設定など、日常的に頻出する処理を短く書くことができ、コード全体の読みやすさが向上します。さらに、三項演算子を使った短縮コードは、初心者でも理解しやすく、保守性の高いコードを書くのに役立ちます。

三項演算子の利用にあたっては、以下のポイントに注意するとより安全に使えます。単純な条件分岐や値の設定に限定すること、入れ子の段数を適度に抑えること、論理演算子と組み合わせる際は可読性を意識することです。これらを意識することで、三項演算子はJavaScriptコードを簡潔かつ効率的にする強力なツールになります。

まとめると、三項演算子はJavaScriptで条件分岐を短く書く方法として必須の知識であり、初心者から上級者まで幅広く活用可能です。if文では長くなりがちな条件設定や返り値の切り替え、HTML要素の表示制御などを簡潔に書ける点は大きな利点です。短くても可読性を意識し、適切に使い分けることで、保守性の高いコードを書けるようになります。

例として、ユーザーの年齢に応じて表示メッセージを変える簡単な三項演算子のコードを再掲します。

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

このように簡単な条件分岐なら一行で書け、コードがすっきりと見やすくなります。

また、複数条件を組み合わせる場合も、入れ子にすることで柔軟に対応できます。

 const score = 85; const grade = score >= 90 ? "A" : score >= 80 ? "B" : score >= 70 ? "C" : "D"; console.log(grade);

スコア85の場合は「B」と表示されます。複雑に見えますが、入れ子を適度に使うことで条件の判定を簡単に書くことができます。

さらに、三項演算子はHTML要素の表示切替にも有効です。例えば、ログイン状態に応じて表示するテキストを切り替える場合です。

 const isLoggedIn = true; document.getElementById("status").textContent = isLoggedIn ? "ログイン中" : "ログアウト中";

このように条件によって表示を変える処理も一行で書けるため、JavaScriptでのDOM操作をシンプルに保つことができます。

三項演算子の活用によって、条件分岐を短く書くテクニックを身につけることができれば、より読みやすく、保守性の高いコードを書けるようになります。特に初心者にとって、if文だけで書くよりも短く簡潔に条件分岐を表現できることは学習効率にもつながります。条件分岐が多い場合でも、適切に入れ子を使い、論理演算子と組み合わせることで複雑なロジックも整理して書くことが可能です。

最終的に、三項演算子を使うとJavaScriptのコードは短く、直感的で読みやすいものになります。関数の返り値、変数の設定、HTML要素の表示切替など幅広い場面で活用でき、初心者から上級者まで効率的にコードを書くための必須知識と言えます。