1. HOME
  2. »
  3. ミニハウツー
  4. »
  5. プログラミング
  6. »
  7. JavaScript
  8. »
  9. 絶対分かる!JavaScriptでの三項演算子の使い方

絶対分かる!JavaScriptでの三項演算子の使い方

プログラミングで真理値の条件分岐を行ないたいとき、三項演算子を使うと便利です。
今回はJavaScriptでの三項演算子の使い方について紹介していきたいと思います。

目次
  1. JavaScriptでの三項演算子の書き方
  2. 実際に三項演算子を使ってみる
  3. 入れ子構造の三項演算子
  4. まとめ

JavaScriptでの三項演算子の書き方

三項演算子は、真理値(true false)による条件分岐を、短く書くことができる書き方です。

もっともかんたんな例は、以下のようなものです。

console.log( true ? 'その通り':'嘘' );
console.log( false ? 'その通り':'嘘' );

実行結果:

その通り
嘘

上記例では、trueのとき「その通り」と表示され、falseのとき「嘘」と表示されます。
三項演算子の基本的な書き方は、下のようなものです。

条件 ? trueの場合 : falseの場合

この条件には、実際はtrueやfalseではなく、式を入れます。

console.log( 21 === 4 ? 'その通り':'嘘' );

実行結果:

もちろん、21は4ではないので、「嘘」と表示されます。

では次の場合はどうでしょうか。

console.log( 21 === 21 ? 'その通り':'嘘' );

実行結果:

その通り

なにを言ってるんだと思われるかもしれませんが、21は21ですので、「その通り」と表示されます。

実際に三項演算子を使ってみる

たとえば、80ポイント以上ならゲームクリア、それ未満ならばゲームオーバーと表示するプログラムを作るとします。

条件分岐にはif〜elseがよく使われます。if〜elseを使って作るならば、このようになります。

let point = 90;
let result;

if ( point >= 80 ) {
	result = 'ゲームクリア';
}
else {
	result = 'ゲームオーバー';
}
console.log( result );

では、上のプログラムを、三項演算子を使ったものに書き換えてみます。

let point = 90;
const result = point >= 80 ? 'ゲームクリア':'ゲームオーバー';
console.log( result );

三項演算子は2行目で使っています。しかし、はじめて見た方は、なんのことかさっぱり分からないと思います。

これは、resultという変数に、「point >= 80」という条件で、trueの場合は「ゲームクリア」、falseの場合は「ゲームオーバー」を入れる、という意味になります。

また、どちらも実行結果は以下のようになります。

実行結果:

ゲームクリア

入れ子構造の三項演算子

三項演算子は入れ子にすることもできます。

さきほどの例で、80ポイント未満だったとしても、70ポイント以上だったときは、「おしい!」と表示させるようにしてみましょう。

let point = 75;
const result = point >= 80 ? 'ゲームクリア':point >= 70 ? 'おしい!':'ゲームオーバー';
console.log( result );

すこし読みにくいのですが、順番にひとつずつ見ていけば、理解することができます。

  • 条件「point >= 80」がtrueのときは「ゲームクリア」
  • 条件「point >= 80」がfalseのときは、条件「point >= 70」で分岐
  • 条件「point >= 70」がtrueのときは「おしい!」
  • 条件「point >= 70」がfalseのときは「ゲームオーバー」

実行結果:

おしい!

三項演算子は便利なのですが、このように入れ子にしていくと、どんどん分かりにくくなります。
入れ子構造の使いすぎには注意しましょう。

まとめ

プログラミングで真理値の条件分岐を行ないたいときは、三項演算子を使うと便利です。

三項演算子を使うことで、長くなってしまう条件分岐の記述を、一行で書くことができます。
しかし、入れ子構造にすると、どんどん分かりにくくなります。そんなときは、見やすいように改行を入れるか、それでも見にくい場合は、if〜elseを使うようにしましょう。

スポンサードリンク

関連コンテンツ

オススメ記事

HTMLでカラーピッカーを表示し、JavaScriptで値を取得する方法

Webツールなどの作成で、カラーピッカーを表示したいときのハウツーです。 今回は、HTMLでのカラーピッカーの表示と、JavaScriptでの色の値の取得の方法を紹介します。 H

zshで色(256色)と数値を一覧表示して素早く確認する方法

zshのプロンプトをカスタマイズしているときに、文字の色を変えたり、背景色を変更したいときがあります。しかし、どの数値がどの色を示しているのかなんて覚えていられないし、そのたびに検索するのも大変です

tkinterで「No module named ‘_tkinter’」と表示されるときの対処法

MacにインストールしたPythonでtkinterを使おうとしたとき、「ModuleNotFoundError: No module named '_tkinter'」というエラーメッセージが表示