三項演算子が便利すぎて感動した

数ヶ月前、三項演算子に出会って感動したので、まだこの感動を味わっていない方向けに記事を書きました。

三項演算子の便利さ  

このような処理をしようとしているとします。

変数 age には数値（年齢）が入る
age が18以上なら、変数 message に「あなたは成人です」を代入する
その他の場合は、変数 message に「あなたは成人ではありません」を代入する

三項演算子を知らない人がプログラムを書くと、こんな感じになると思います。

let message;
if (age >= 18) {
    message = "あなたは成人です";
} else {
    message = "あなたは成人ではありません";
}

しかし、三項演算子を使うと…

const message = age >= 18 ? "あなたは成人です" : "あなたは成人ではありません";

なんと美しいコード…

では、三項演算子について解説していきます。

三項演算子の使い方  

三項演算子は「if-else」文をまとめたものですが、三項演算子には、三項演算子自身が条件判定で得られたデータに「化ける」という性質があります。これは if 文にはない性質です。

このことにより、三項演算子を変数に代入することができます。

次に、使い方についです。

三項演算子は長いですが、3つの部分に分かれます。

① 条件式

② ①が true と判定されたときの処理

③ ②が false と判定されたときの処理

① の書き方は if 文の条件式と同じなので、覚えやすいです。&& や || を使い、条件式を複数連結させられます。 ①の後には “?” が必要です 。

② ①の条件式が true のときに、三項演算子が何に化けるかを指定します。文字列でも数値でも数式でも、何でもOKです。

③ ①の条件式が false のときに、三項演算子が何に化けるかを指定します。文字列でも数値でも数式でも、何でもOKです。

なお、②と③の間には “:” が付きます。

ここまで読んだ上で先ほどのサンプルコートを見てみると、初見のときとは違ったものが感じられます…

ぜひ、今回ご紹介した「三項演算子」を使ってみてください！！

参考  

• 条件 (三項) 演算子 - JavaScript | MDN

関連記事

2021年8月8日 • 6 分 で読了

Chrome 拡張機能を作って公開しよう⑥　〜コンテキストメニューを作る〜

1回15分でサクッと開発。今回は、拡張機能をコンテキストメニューからも起動できるようにします。

2021年8月7日 • 3 分 で読了

Chrome 拡張機能を作って公開しよう⑤　〜権限多すぎ問題を解決〜

1回15分でサクッと開発。今回は「権限多すぎ問題」を解決していきます。

2021年8月4日 • 14 分 で読了

Chrome 拡張機能を作って公開しよう④　〜コピー機能の実装〜

1回30分でサクッと開発。要となるコピー機能の実装を行います

2021年8月3日 • 6 分 で読了

Chrome 拡張機能を作って公開しよう③　〜形にする〜

1回15分でサクッと開発。いよいよ形にしていきます！

2021年8月2日 • 5 分 で読了

Chrome 拡張機能を作って公開しよう②　〜ポップアップの作成〜

1回15分でサクッと開発。今回はポップアップの作成。

2021年7月30日 • 3 分 で読了

Chrome 拡張機能を作って公開しよう①　〜環境構築〜

環境構築するほどのことでもないが。