JavaScript三項演算子を完全攻略！使い方と例

2024年11月21日

当ページのリンクには広告が含まれています。

JavaScriptの三項演算子は、コードを簡潔に書くために役立つ強力なツールです。

この記事を読めば、JavaScriptの三項演算子の基本から応用までを理解し、他の省略形の演算子についても学ぶことで、より効率的にコードを書けるようになります。

わかりやすく解説しているので、初心者でも安心して読み進められます。具体的なサンプルコードや実用的なシナリオも多く紹介しているので、学んだ内容をすぐに実践できますよ。

本記事の監修者：Zetto

現役ITエンジニア
Java Gold保有
TypeScript(Vue.js)
Java(SpringBoot)
Programming Dream編集長

JavaScript三項演算子とは？基本から学ぼう

まずは三項演算子が何なのかを理解しましょう。三項演算子は、条件に応じて異なる値を選択するための特別な演算子で、「条件式 ? 真の場合の値 : 偽の場合の値」という形で表現されます。これにより、if-else文と同じ効果を一行で実現できます。

JavaScriptの三項演算子を使うと、コードの長さを短縮するだけでなく、条件が単純な場合は読みやすさも向上します。例えば、ある条件に応じて異なるメッセージを表示する必要がある場合、三項演算子を使うことでコードが非常に簡潔に書けます。

例えば以下の例を見てみましょう。

let message = (score >= 60) ? "合格です" : "不合格です";

このコードは、scoreが60以上であれば「合格です」を、そうでなければ「不合格です」をmessageに代入します。このように、条件に応じて値を分ける処理を一行で記述できるのが三項演算子の利点です。

三項演算子の基本的な定義

三項演算子は「条件式 ? 真の値 : 偽の値」という構文で記述されます。この構文の中で「条件式」は、trueまたはfalseを返す評価式です。例えば、score >= 60のような比較式が条件式になります。この条件がtrueであれば「真の値」が、falseであれば「偽の値」が選択されます。

このシンプルな構文により、if-else文のような条件分岐を一行で記述できるので、コードが短く、見やすくなるという利点があります。また、変数を代入する場面や、関数の戻り値に使うなど、多様な用途で活用できます。

三項演算子と条件分岐の違い

if-else文との違いを理解することは、三項演算子の使いどころを考える上で非常に重要です。if-else文は、複雑な条件や複数の処理を行いたいときに適していますが、三項演算子はシンプルな条件分岐を一行で書きたい場合に便利です。

例えば、if-else文を使って同じ処理を書くと以下のようになります。

let message;
if (score >= 60) {
    message = "合格です";
} else {
    message = "不合格です";
}

この場合、コードはより長くなりますが、複雑な処理を行いたい場合や可読性を重視したい場合には有効です。一方で、三項演算子を使うとシンプルに処理をまとめることができるため、短く読みやすいコードにすることが可能です。

三項演算子のメリットとは

三項演算子を使うことで得られるメリットは以下の通りです。

コードが短くなる：if-else文に比べて簡潔に書けるため、コード全体の量が減ります。
読みやすさが向上：簡単な条件分岐の場合、三項演算子を使うことで一目で条件と結果がわかります。
見た目がすっきりする：短いコードを好む開発者にとって、三項演算子を使うとコードの見た目がより洗練されます。

ただし、三項演算子は複雑になりすぎると、かえって可読性を損なうこともあります。特にネストされた三項演算子は読みづらくなるため、シンプルなケースでの使用が推奨されます。次のセクションで、その点についても詳しく解説します。

三項演算子の実際の使い方を解説

次に、三項演算子の具体的な使用例について見ていきましょう。使い方を理解するために、さまざまなシチュエーションでの使用例を見ていきます。

JavaScriptでの三項演算子の基本的な使用例

三項演算子は、例えば変数に値を代入する際によく使われます。例えば、ユーザーがログインしているかどうかによって異なるメッセージを表示する場合、以下のように書けます。

let welcomeMessage = isLoggedIn ? "ようこそ" : "ログインしてください";

この例では、isLoggedInがtrueの場合は「ようこそ」を、falseの場合は「ログインしてください」をwelcomeMessageに代入します。このように、短い条件によって出力を変えたい場合に非常に便利です。

三項演算子を利用することで、複雑な条件分岐を単純な代入文で処理できるようになります。コードを短くできるだけでなく、ロジックを見通しやすくするのにも役立ちます。

よくある実用例とその応用方法

三項演算子は、ユーザーインターフェースの表示や、入力されたデータに応じた処理をする場合にも頻繁に使われます。例えば、ユーザーの年齢に応じて特定のメッセージを表示したいとします。

let age = 20;
let ageGroup = (age >= 18) ? "大人" : "未成年";

この場合、ageが18以上であれば「大人」、それ以外の場合は「未成年」と表示します。このように、状況に応じて変わるメッセージや値を簡単に指定することが可能です。

三項演算子での表示切り替え例

例えば、ウェブサイトで「在庫あり」と「在庫なし」の表示を切り替えるケースです。

let stockStatus = (stock > 0) ? "在庫あり" : "在庫なし";
console.log(stockStatus);

このように、在庫数によって表示を動的に変更することが簡単にできます。三項演算子は、条件ごとの文字列表示やUI要素の制御においても強力なツールです。

三項演算子での値の検証と代入

入力された値が有効かどうかを確認し、適切なデフォルト値を設定する場合にも三項演算子は有効です。

let input = "";
let validInput = (input !== "") ? input : "デフォルト値";
console.log(validInput);

ここでは、inputが空の場合に「デフォルト値」を設定しています。こうした使い方により、コードをより簡潔に保つことができます。

さらに、フォーム入力時などでユーザーから値が入っているかどうかを判断し、デフォルトの設定を行うシチュエーションなどにおいてもよく利用されます。

具体的な例を使って理解する三項演算子

三項演算子を使うことで、非常に短く簡潔に条件分岐を記述することができます。しかし、実際に使う際にはいくつかの注意点があります。ここでは、より具体的な例を見て三項演算子の使い方を深く理解しましょう。

例えば、変数に対して条件を満たす場合に特定の値を代入する場合を考えます。

let discount = (isMember) ? 0.1 : 0.05;

ここで、isMemberがtrueの場合は0.1（10%の割引）を、falseの場合は0.05（5%の割引）を適用します。このように、ユーザーがメンバーかどうかに応じて割引率を変えることができます。

また、たとえば以下のように、ユーザーの年齢層を判定してメッセージを設定することもできます。

let ageCategory = (age < 13) ? "子供" : (age < 20) ? "ティーン" : (age < 65) ? "成人" : "高齢者";
console.log(ageCategory);

ここで三項演算子をネストしていますが、これによって複数の条件を一行で処理できます。ただし、このようなネストは可読性を損ねる可能性があるため、適度に使用することが推奨されます。

ネストされた三項演算子の使用例

ネストされた三項演算子を使うと、さらに複雑な条件を一行で処理することができます。しかし、その分可読性が低下する可能性があるため、使い方には注意が必要です。

let category = (age < 13) ? "子供" : (age < 20) ? "ティーンエイジャー" : "大人";

この例では、年齢に応じて「子供」、「ティーンエイジャー」、「大人」を選択しています。ただし、このようなネストされた三項演算子はコードの理解を難しくするため、可能であれば避けるべきです。

ネストすることで一見して効率的に見えるものの、読み手には負担をかけやすくなるため、シンプルに分割して書くことも考慮するべきです。

三項演算子を使う上での注意点

三項演算子は非常に便利ですが、注意して使わなければコードが読みづらくなることがあります。特に、複数の三項演算子を組み合わせて使う「ネストされた三項演算子」は、可読性が低下しやすいです。

三項演算子のデメリットとは？

三項演算子の主なデメリットは、可読性が損なわれる可能性があることです。特に、複数の三項演算子を一つの式にまとめると、コードの意図を理解するのが難しくなることがあります。

例えば、以下のようなコードは非常に読みづらいです。

let status = (age >= 18) ? (age >= 65 ? "高齢者" : "大人") : "未成年";

このコードは、年齢に応じて「高齢者」、「大人」、「未成年」を分けて表示しますが、三項演算子がネストされているため、意図を理解するのに時間がかかります。このような場合は、if-else文に書き換えた方が可読性が向上する場合もあります。

三項演算子を使う際に避けるべき間違い

初心者の方がよくやりがちなミスとして、三項演算子を無理に使いすぎることがあります。三項演算子は確かに便利ですが、条件が複雑になる場合には逆に可読性が低下します。そのため、コードが読みやすいことを最優先に考え、if-else文との使い分けを意識することが大切です。

また、三項演算子を使う場合は、常に条件とそれに続く結果が簡潔で理解しやすいかを考慮しましょう。無理に複雑な処理を三項演算子で書こうとすると、他の開発者にとって理解しづらいコードになってしまうことが多いです。

三項演算子を使うべき場面と使わないべき場面

使うべき場面：簡単な条件分岐で結果が明確な場合
使わないべき場面：条件が複雑でネストが必要な場合や、複数の処理が必要な場合

三項演算子はシンプルな場面でこそ威力を発揮します。もし条件が複雑になりすぎる場合は、無理に一行で書こうとせず、分かりやすくif-elseで記述することが重要です。

可読性を保つためのベストプラクティス

三項演算子を使う上でのベストプラクティスとして、以下の点を意識することが推奨されます。

条件がシンプルであること：三項演算子は単純な条件分岐で使うことが最適です。複数の条件を評価する必要がある場合には、if-else文の使用を検討しましょう。
ネストを避ける：三項演算子をネストすることは避け、代わりに分けて書くことでコードの見やすさを保ちましょう。
コメントをつける：複雑な場合にはコメントをつけて、他の開発者が意図を理解しやすくすることも重要です。

次に、三項演算子の応用テクニックについて見ていきましょう。より高度な使い方をマスターすることで、さらに効率的なJavaScriptコードを書けるようになります。

三項演算子の応用テクニック

三項演算子と論理演算子の組み合わせ

三項演算子と論理演算子を組み合わせることで、条件分岐の表現力をさらに高めることができます。例えば、以下のような例があります。

let accessAllowed = (age >= 18 && age < 65) ? "アクセス許可" : "アクセス拒否";

この例では、ageが18以上かつ65未満の場合に「アクセス許可」、それ以外の場合に「アクセス拒否」を設定しています。このように、論理演算子を組み合わせることで複雑な条件を簡潔に表現することができます。

また、三項演算子は特定の条件に基づいて複数の条件を評価する場面でも活躍します。例えば、複数の論理条件が絡む場合においても、論理演算子と三項演算子をうまく組み合わせることで、コード全体を一行にまとめることが可能です。

三項演算子を使った関数の簡略化

三項演算子を使うと、関数を短く簡潔に書くことができます。例えば、以下のような関数があります。

function getGreeting(isMorning) {
    return isMorning ? "おはようございます" : "こんにちは";
}

このように、関数内で条件に応じた結果を返す場合にも三項演算子を活用することで、コードがよりシンプルになります。また、以下の例のように、関数の戻り値を単純化するために三項演算子を用いることが可能です。

function calculateFee(isMember, amount) {
    return isMember ? amount * 0.9 : amount;
}

この関数では、メンバーであるかどうかによって料金を割引しています。このように、三項演算子は関数の処理を簡潔に記述するのに役立ちます。

三項演算子で条件に基づく値の設定

三項演算子は、特定の条件に基づいてオブジェクトのプロパティや配列の要素を設定する場合にも使われます。

let userStatus = {
    name: "太郎",
    isActive: (lastLogin > 30) ? false : true
};

この例では、lastLoginが30日以上前であればisActiveをfalseに設定し、それ以外の場合はtrueに設定します。このように、オブジェクトのプロパティを条件に基づいて簡単に設定することが可能です。

配列の中で特定の条件を満たす場合にのみ値を追加したり、特定のインデックスに条件付きで値を設定する場合などにも三項演算子を活用できます。

let scores = [85, 90, 78];
let extraCredit = (hasBonus) ? 5 : 0;
scores[0] += extraCredit;

ここでは、hasBonusがtrueの場合に、scoresの最初の要素に追加の得点を加算しています。このように、三項演算子は配列の操作にも便利です。

まとめ

この記事では、JavaScriptの三項演算子について基本から応用まで幅広く解説しました。三項演算子は、条件分岐を簡潔に表現できる便利なツールですが、使い方を誤ると可読性を損なう可能性もあります。そのため、シンプルな条件に適用し、複雑な条件や処理が必要な場合はif-else文を選ぶなど、状況に応じて使い分けることが重要です。

三項演算子を使う際は、その利便性を最大限に活かしつつ、読みやすいコードを書くことを心がけましょう。特に、ネストの使い方や条件の組み合わせに気をつけることで、他の開発者にとっても理解しやすいコードになります。