ESLintのno-nested-ternaryを使用して三項演算子の可読性を担保しよう!!

トップ

フロントエンド

2022-11-11

JavaScript ESLint

三項演算子とは
なぜ入れ子になった三項演算子がダメなのか
ESLintのno-nested-ternaryルールを使用する
まとめ

どうもReactおじさんです。
先日、三項演算子についてツイートした際に反響があったので詳しく深掘りしていこうと思います。

たまに三項演算子の中に三項演算子を書く人がいるけど可読性悪すぎてNGな気がする。
基本、１つの三項演算子で解決できないのであればif文使って書いた方が良い。
— Reactおじさん (@react_nextjs) November 8, 2022

特に初学者の方には刺さる内容だと思うので最後まで読んで、現場で今回解説する出来事があればこの記事の内容を元にドヤってみてください。

三項演算子とは

三項演算子が分からない方向けに軽く解説します。
めちゃくちゃ噛み砕いて説明すると、if 〜 else 〜 と書きたい時に一文で済ませる演算子のことです。

if文の場合

const num = 4

if (num === 4) {
  // 真の処理
} else {
  // 偽の処理
}

三項演算子の場合

const num = 4

num === 4 ? /* 真の処理 */ : /* 偽の処理 */

三項演算子の場合、if文と比べて一文で記載できるので可読性が良くなりましたね！

では、次に三項演算子の入れ子について見ていきましょう。

なぜ入れ子になった三項演算子がダメなのか

まずは入れ子になった三項演算子とはどのようなものかサンプルを作りました。

入れ子の三項演算子

const num = 4;
const num1 = 5;

num === 4
  ? console.log('4です')
  : num1 === 5
  ? console.log('5です')
  : console.log('4でも5でもないです');

一つずつ確認していきましょう。

まず、numが4の時は「4です」がログに表示されます。
numが4じゃない時は、num1が5であれば「5です」が表示され、num1が5でない時は「4でも5でもないです」がログに表示される三項演算子になります。

めちゃくちゃ読みづらいですよね、、
自分でサンプル作ってても可読性悪すぎて頭が混乱してきましたw

この程度の簡単な処理であれば最悪読めなくもないのですが、これがReactのJSX内で記述されていた時には中々読み取るのに時間もストレスもかかってしまうでしょう、、

Twitterでも記載しましたが、入れ子になる場合はif文を使用して可読性を高めましょう。

入れ子になった三項演算子をif文で書いた場合

const num = 4;
const num1 = 5;

if (num === 4) {
  console.log('4です');
} else if (num1 === 5) {
  console.log('5です');
} else {
  console.log('4でも5でもないです');
}

入れ子になっていた時よりもソース量は若干増えますが、パッと見た時になんの処理を書いているのかすぐにわかるようになりました。

ESLintのno-nested-ternaryルールを使用する

ここで三項演算子の入れ子をした時にエラーを出すESLintのルールno-nested-ternaryを紹介します。
公式: no-nested-ternary

ESLint自体の詳細は割愛させていただきますが、eslint.json,yml,jsなどのrulesに1行追加するだけです。(eslintはnpm installする必要あり)

eslint.json

{
	  "parser": "@typescript-eslint/parser",
	  "plugins": ["import", "@typescript-eslint", "prettier"],
	  "ignorePatterns": ["*.config.js", "*.setup.js", "*.js"],
	  "extends": [
	    "eslint:recommended",
	    "next",
	    "plugin:@typescript-eslint/recommended",
	    "plugin:@typescript-eslint/recommended-requiring-type-checking",
	    "plugin:import/recommended",
	    "prettier"
	  ],
	  ...
	  "rules": {
	   ...
            "no-nested-ternary": "error", // 追加
	   ...
  	  }
}

エディタでエラーが出ているか確認

入れ子になった場合はエラーが出てますね！

まとめ

三項演算子について色々書いてきましたが、基本if 〜 else 〜 の場合は使用した方がよく、入れ子になる際はif文を使用しましょう。

プロジェクトによっては、そもそも三項演算子を禁止して全部if文で書くところもあるそうです。

大事なのはケースバイケースで使い分けれることだと思います。

プロジェクトでメンバーのスキルがバラバラな場合は、no-nested-ternaryを使用し、ルールを統一してソースコードの品質を担保していきましょう。

これはJavaScriptのみにならず、三項演算子が使用される言語全てに共通していることなので是非参考にしてみてください。

間違っている部分やもっと良い方法があればTwitterでDMお願いします。