Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

三項演算子を書き換えるなら

More than 1 year has passed since last update.

三項演算子が便利すぎて、読みづらいコードが出来てしまった時の個人的回避術になります。

同値の代入

const result = a ? a : b

コンフィグの初期設定等で使われます。

const contentType = type ? type : 'application/json'

三項演算子に同じ変数が複数回書かれているのが冗長かもしれません。
下記の論理和に纏めたパターンであれば、重複を解消できそうです。

const result = a || b

入れ子

const result = a ? b ? c : d : e

ワンライナー感覚で使われたりします。

三項演算子を入れ子にすると、大体は読み辛くなります。
基本的には1個の三項演算子で完結するように考えるのが良さそうです。

この場合、最初の三項演算子を素直にif-else文に置き換えると、チャンクで若干見通しが良くなります。

aの条件分岐をif-else文に置き換え
let result
if (a) {
  result = b ? c : d
} else {
  result = e
}

あるいはbの条件分岐を関数化するのも良いかもしれません。

bの条件分岐を関数化
const fnc = b => {
  return b ? c : d
}

const result = a ? fnc(b) : e

否定

const result1 = a ? fnc(a) : true // fnc() : return true / false

フォーム入力のバリデーション等で使われます。

const validate = tel => {
  // 電話番号の整合チェック結果に応じて true / false を返すロジック
}
const valid = tel ? validate(tel) : true 

三項演算子のfalseの返り値がtrue(否定)なので、コードを読んだ時に若干分かりづらいです。trueの返り値がfalseの場合もまた然りです。

この場合、論理和の式に変換できます。

論理和の式に変換
const result = !a || fnc(a)

あるいは、関数に押し付けたりすることができます。責務の観点で見ると、こちらの方がテストもしやすくて良いかもしれません。

関数に責務を押し付ける
const fnc = val => {
  if (!val) {
    return true
  }
  // return true or false
}

const result = fnc(a)

肥大化

const result = a ? {
  hoge: 'hoge'
} : {
  fuga: 'fuga'
}

返り値に直接、オブジェクトだったり関数を定義しており、三項演算子が肥大化しています。
機能拡張等で中のオブジェクトや関数の規模が拡大した場合、三項演算子の?:の位置が離れていき可読性が極端に下がっていく可能性があります。

予め返り値を定義して、三項演算子の記述範囲を狭めた方が良さそうです。

予め定義する
const obj1 = {
  hoge: 'hoge'
}
const obj2 = {
  fuga: 'fuga'
}
const result = a ? obj1 : obj2

三項演算子が最適な場合

const result = a ? b : c

日英の言語判定等で使われます。

const msg = isJa ? 'こんにちは' : 'Hello'

aを判定してbかcを返すシンプルな処理の場合、三項演算子が一番マッチしているので書き換える必要はないと思っています。
const宣言と条件毎の初期化が同時にできるのが三項演算子の強みですね。

if文を使って置き換える場合は下記のような書き方になるかと思います。
この場合はlet宣言になり、scope内で書き換えられる可能性が出てきます。

if文に置き換える
let result = c
if (a) {
  result = b
}

あるいはif-elseに置き換えることも可能です。
代入が同層で行っているので↑より可読性は高くなりそうです。

if-else文に置き換える
let result
if (a) {
  result = b
} else {
  result = c
}
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away