JavaScriptの三項演算子を書いてみよう｜実例付きで学べる

（最終更新月：2023年11月）

✔以下のような方に向けて書かれています

✔当記事を読むことで得られる知識

• JavaScriptの三項演算子の基礎
• 三項演算子の書き方とその応用方法
• 三項演算子の使用例

当記事では、JavaScriptの三項演算子の基本的な使い方から、具体的な応用例まで幅広く扱い、詳細な解説を行います。

最後までお読みいただけると幸いです。

JavaScriptと三項演算子: 一体何？

こちらでは、JavaScriptと三項演算子の基本についてお伝えします。

これらの要素についての知識は、プログラミングの基本を学ぶ上で不可欠です。

• JavaScriptとは何か？
• 三項演算子の基本: 構文と引数

JavaScriptとは何か？

JavaScriptは、ウェブページに動的な要素を追加するためのプログラミング言語です。

例として、HTMLで記述されたボタンをクリックすると、ポップアップが表示されるような動作が考えられます。

このような動的な機能を実現するためには、JavaScriptが必要です。

三項演算子の基本: 構文と引数

三項演算子は、JavaScriptでの条件判定を簡潔に書く方法のひとつです。

基本の構文は 以下のとおり。

条件 ? trueの時の値 : falseの時の値

以下は、aがbより大きい場合に”a is greater”を、そうでない場合に”b is greater”をresultに代入する例です。

var result = (a > b) ? "a is greater" : "b is greater";

三項演算子の詳細な解説

三項演算子を詳しく見ていきましょう。

三項演算子の使い方や注意点を詳しく学ぶことで、エラーを避け、コードの読みやすさを保てます。

• 基本的な使いどころと使い方
• nullやundefinedの判定: どう扱う？
• 処理の改行方法の探求

基本的な使いどころと使い方

三項演算子は主に短い条件判定に用いられます。

例えば、ユーザーがログインしているかどうかを確認し、メッセージを表示する場合などです。

var message = isLoggedin ? "Welcome back!" : "Please login.";

このコードでは、isLoggedinがtrueの場合、”Welcome back!”を、falseの場合”Please login.”をmessageに代入します。

nullやundefinedの判定: どう扱う？

JavaScriptでは、変数がnullやundefinedの場合、特別な取り扱いが必要です。

三項演算子を使用する際には、これらの値を適切に判定し、エラーを防ぎましょう。

var output = (value !== null && value !== undefined) ? value : "Default value";

処理の改行方法の探求

長い三項演算子の場合、コードの読みやすさを保つために改行が推奨されます。

以下は改行の例です。

var result = (a > b)
  ? "a is greater" //trueのとき
  : "b is greater"; //falseのとき

実践！三項演算子の使用例

実際のコードで三項演算子をどのように使用するのか、具体的な例をとおして学びましょう。

• 分かりやすい例から学ぼう
• null 値への対応例
• 条件を連鎖させる方法

分かりやすい例から学ぼう

三項演算子の最も基本的な使い方は、ある条件に応じて２つの異なる値のうち、ひとつを選ぶことです。

var drink = (age >= 20) ? "Wine" : "Juice";

このコードでは、ageが20以上の場合は”Wine”、それ以下の場合は”Juice”をdrinkに代入します。

null 値への対応例

nullやundefinedの値を適切に処理することは、バグを防ぐ上で重要です。

var displayName = (username !== null) ? username : "Guest";

このコードでは、usernameがnullでない場合、その値を、nullの場合は”Guest”をdisplayNameに代入します。

条件を連鎖させる方法

複数の条件を連鎖させる場合、三項演算子をネスト(入れ子)できます。

var color = (sky == "sunny") ? "blue" : (sky == "cloudy") ? "gray" : "unknown";

まず”sky”が”sunny”かどうかを確認し、その次に”cloudy”かどうかを確認します。

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

三項演算子を更に効果的に使用するための応用テクニックを学びます。

これにより、より短く、しかし明確なコードを書けるでしょう。

• ネスト(入れ子)にする方法
• 複数の条件式を組み合わせるテクニック

ネスト(入れ子)にする方法

三項演算子をネスト(入れ子)にすることで、複数の条件を簡潔に表現できます。

ネストする際のポイントは、条件の優先順位を明確にすることです。

var status = (score >= 90) ? "Excellent" 
            : (score >= 70) ? "Good"
            : (score >= 50) ? "Pass"
            : "Fail";

このコードでは、scoreの値に応じて、4つの異なる結果をstatusに代入しています。

複数の条件式を組み合わせるテクニック

複数の条件を組み合わせることで、より複雑なロジックも三項演算子で表現できます。

&&や||などの論理演算子と組み合わせることが可能です。

var response = (age >= 20 && isMember) ? "Welcome to the club!" 
            : (age >= 20) ? "You can enter, but you're not a member."
            : "Sorry, you're too young.";

このコードでは、ageとisMemberの2つの条件を組み合わせて、3つの異なるメッセージを出力しています。

値を返す(return)とは？

こちらでは、関数内でのreturnの意味と重要性についてお伝えします。

returnを理解することで、関数の動作を正確に制御できるでしょう。

• returnの基本的な使い方
• 三項演算子と組み合わせたreturnの使用

returnの基本的な使い方

関数は特定のタスクを実行するコードのブロックです。

returnを使用することで、関数から値を返せます。

function greet(name) {
  return "Hello, " + name + "!";
}

この関数は、引数として与えられたnameに対して、挨拶のメッセージを返します。

三項演算子と組み合わせたreturnの使用

関数内で三項演算子を使用して、条件に応じた値を効率的に返せます。

function isAdult(age) {
  return (age >= 20) ? "Adult" : "Not an Adult";
}

この関数は、ageが20以上かどうかを判定し、結果に応じて”Adult”または”Not an Adult”を返します。

練習問題: 三項演算子を使ってみよう

三項演算子の知識を深めるための練習問題をいくつか提供します。

手を動かしながら学ぶことで、理解が深まるでしょう。

• ある数が偶数か奇数かを判定する関数を作成
• 年齢に応じて、成人か未成年かを返す関数を作成

ある数が偶数か奇数かを判定する関数を作成

以下のコードは、与えられた数が偶数か奇数かを判定する関数の例です。

function isEvenOrOdd(number) {
  return (number % 2 === 0) ? "Even" : "Odd";
}

年齢に応じて、成人か未成年かを返す関数を作成

以下のコードは、与えられた年齢に応じて、成人か未成年かを判定する関数の例です。

function checkAgeStatus(age) {
  return (age >= 20) ? "Adult" : "Minor";
}

まとめ

当記事では、JavaScriptの三項演算子について学習してきました。

また、関数内でのreturnと併用する方法も解説済み。

これらの知識を活用することで、効率的かつ読みやすいコードを書けるようになるでしょう。

練習問題を通じて、更に理解を深めてください。