javascriptの三項演算子の使い方【現役SEが紹介】

javascriptの三項演算子について知りたい。

たまに？とか：が入っていてよくわからない。

未経験者にも分かりやすく教えてほしい。

上記のお悩みを解決します。

■本記事の内容

本記事で以下の内容をお伝えします。

・javascriptの三項演算子の使い方
・可読性を意識して他の条件文と使い分ける
・処理を簡単に実装できる

■本記事の信頼性

ささそらと

この記事を書いている私は、プログラミングを仕事として始めて10年以上ほど経ちます。今も現役のシステムエンジニアです。

javascriptの三項演算子について初心者向けに分かりやすく説明していきます。

たまにプログラムに ? や : を使用したコードを見かけたりしませんか？
それは三項演算子と呼ばれるものでif文と似たような条件分岐処理の一つになります。

if文でも全く同じ処理を書くことができますが、三項演算子を利用することで1行で書くことができるのでコードを見やすくする上で役立ちます。

この機会に見かた書き方を理解しておくと良いです。

javascriptの三項演算子の使い方

javascriptの三項演算子の使い方を学ぶ前にif文の書き方を知らない場合は先に学んでおくと良いです。

以下にまとめていますので参考にしていただけたらと思います。

三項演算子とは３つのオペランドを取る演算子のことです。

ただ、上記だと良く分からないと思うのでif文を1行で簡潔に記載する手法だと思ってもらえれば良いです。

通常if文を利用する場合は、if～elseといった形で複数行を記載する必要がありますが、参考演算子を使用することで処理を1行で実現できるようになります。

具体的な書き方は次項で説明します。

では、javascriptで三項演算子の書き方を説明します。

const weather = '雨';
const result = weather === '雨' ? '傘を持つ' : '傘は持たない';
console.log(result);

上記は天気が「雨」だった場合、resultに「傘を持つ」という文字列が入ります。

もし、上記をif文で書くと以下のような形になります。

const weather = '雨';
let result = '';
if (weather === '雨') {
  result = '傘を持つ';
} else {
  result = '傘は持たない';
}
console.log(result);

いかがでしょう？if文で書くほうがコード量が増えているかと思います。
三項演算子を使用することで2行目から7行目までを1行で表現することができます。

三項演算子の書き方を解説すると以下のような形です。

const (格納したい変数) = (条件) ? (条件を満たす場合の処理) : (条件を満たさない場合の処理);

条件を書いた後に？を書き、はじめのブロックを条件を満たす場合すなわり条件がtrueになる場合の処理を書く形です。

その後、：を書くことでfalseになる処理を書くといった感じです。

可読性とはコードの読みやすさだと思ってください。
複雑で冗長的な書き方をしてしまうと自分では内容が分かっていても、他人から見たときにどういう処理をしているのかが分かりにくくなります。

従って、コードを書くときは誰が見ても分かりやすいコードを心がけましょう。

前置きはこの辺にして、具体的にどういったことかを説明していきます。

const weather = '雨';
const result = weather === '雨' ? '傘を持つ' : weather === '雪' ? 'コートを着る' : '普通に出かける';
console.log(result);

三項演算子の中に三項演算子を入れることも可能です。
ですが、パッと見た感じどうでしょう？少し分かりにくく感じませんか？

if文で書くと以下のような形です。

if (weather === '雨') {
  result = '傘を持つ';
} else if ( weather === '雪') {
  result = 'コートを着る';
} else {
  result = '普通に出かける';
}

どうでしょう？こちらの方が処理の内容が分かりやすくないでしょうか？
まだこの程度の少ない処理であれば三項演算子でもなんとなく分かりますが、さらに条件が増えると理解するのに苦労します。

三項演算子はできれば単純処理があるif文で使用する程度にとどめておくほうがよいかと思います。
コーディング規約によっては三項演算子自体禁止！ということもありますので、実際にプログラミングする際はそのルールに従ってください。

ちなみに上記の処理ですとswitch文を使用するとなお良いです。

switch (weather) {
  case '雨':
    result = '傘を持つ';
    break;
  case '雪':
    result = 'コートを着る';
    break;
  default:
    result = '普通に出かける';
}

※switch文については以下の記事でまとめていますので、もし知らない場合は参考にしてください。
初心者向け！javascriptのswitch文の使い方【現役SEが紹介】

javascriptの三項演算子ついて説明しました。

上記説明したように条件分岐には色々書き方があります。

最悪、if文さえ知っていればすべて実現できるのですが、他の書き方も知ることで上記のように見やすく尚且つ少ないコード数で実現することができます。

選択肢は多いほうがいいのと、他のプログラマーが使用している場合に知識があれば何をしているかすぐ理解できるかと思うのでこれを機会に三項演算子を理解しておきましょう。