[ESLint]関数の最大長を設定し、リファクタリングに役立てる。

関数の行数は絶対的な指標ではないですが、リファクタリング対象の関数を検出するのに使うことができます。

例えば、300行の関数があったと想像してみましょう。
多分、この関数はやりたいことが多すぎる気がしています。
関数内でごちゃごちゃやってそうなので、テストもしづらいでしょう。
関数名も実態を表していないがしてきました。
また、300行のどこかにコメントが書いてあったとして、メンテ忘れも発生しそうですね。
よくないことだらけです。

そんな行数の関数書かないよと思うかもしれませんが、
何年も稼働しているサービスだと300行まではいかなくても、
長めの関数はそこそこあるのではないでしょうか。

ESLintにルールを設定して、長すぎるコードを検出して、
既存プロジェクトのリファクタリングをしていきましょう。

ESLintのmax-statementsを設定する。

ESLintのmax-statementsルールを使うことで、関数の最大長を指定できます。

enforce a maximum number of statements allowed in function blocks (max-statements)

ESLintのルールに記述しましょう。今回は.eslintrc.jsonに記述します。

{
  ~~
  "rules": {
    "max-statements": ["warn", 30]
  }
}

errorでもいいですが、とりあえずwarnで設定しました。

スクロールしなくてすむ限界値かなということで30行で設定しています。
チーム次第ではもっと短くした方がいいと思います。
これで、30行以上の関数に警告が出るようになったかと存じます。

ただ、これだと関数コンポーネントも警告対象になってしまいます。
JSXやpropsの記述もあるのでコンポーネントが30行縛りだとちょっと苦しいですね。

関数コンポーネント内の関数を検出対象にする

オプションとしてignoreTopLevelFunctionsを設定すればOKです。

{
  "extends": [
		// 省略
  ],
  "rules": {
		// 省略
    "max-statements": ["warn", 30, { "ignoreTopLevelFunctions": true }]
  }
}

これで、関数コンポーネント内の関数のみ警告が出るようになります。

---

他の人が読みやすいコードという前提で、関数は短い方がいいと思います。
リファクタリング対象を見つけてどんどん短くしていきましょー。