トラス構造が幾何学的に組まれた建築物のファサード
ニュース深掘り

ESLint・Prettier導入は何を自動化すべきか。CIで止める設定の判断基準

目次を見る

フロントエンドのコードレビューで、インデントやクォートの種類を巡る指摘が繰り返されているなら、それはツールで解決すべき問題です。エンジニアが50人を超える規模の開発組織では、個人の好みに任せたスタイルの揺れが、レビューの摩擦とコードベースの劣化を招くことが知られています。

この記事では、ESLint(JavaScript/TypeScriptの静的解析ツール)やPrettier(コード整形ツール)をどこまで自動化し、どこをCI(継続的インテグレーション)で強制するかを、チーム規模別に整理します。導入するかどうかで迷っているチームが、自分たちのケースに当てはめて判断できる基準を示します。

どんな場面でこの判断が必要になるか

プルリクエストのレビューで「タブかスペースか」「セミコロンの有無」といったコメントが付くようになったら、ルール整備のタイミングです。

チームの人数が増えると、暗黙の了解だけではスタイルが揃わなくなります。新しく参加したメンバーが前任者のコードを真似ようとしても、リポジトリ内に複数の書き方が混在していれば、どれが「正しい」書き方か判断できません。

また複数のリポジトリを横断して開発するようになった場合も、判断が必要になる場面です。フロントエンドとバックエンドでLintルールがバラバラだと、リポジトリを移動するたびにエンジニアの認知負荷が上がります。

判断軸1: 強制力をどこに置くか

スタイルルールをどこで強制するかは、大きく3段階に分かれます。

  • エディタの拡張機能のみ(保存時に自動整形されるが強制力なし)
  • pre-commitフック(コミット前にローカルで検査。Huskyなどが代表的)
  • CIパイプライン(プルリクエスト作成時にサーバー側で検査し、失敗すればマージ不可)

エディタ設定だけに頼ると、設定していないメンバーのコードだけスタイルが崩れます。pre-commitフックはローカルで検知できますが、git commit --no-verify のようなオプションで回避されるリスクが残ります。

CIでのハードフェイル(検査に失敗したらマージボタンを押せなくする設定)まで踏み込むと、スタイル議論は「人と人の対立」から「機械のルール」に変わります。レビュアーが感情的にならずに指摘できる状態を作れるのが利点です。

判断軸2: ルールをゼロから決めるか、既存の設定に乗るか

ESLintの設定をゼロから積み上げるのか、Airbnb JavaScript Style GuideやPSR-12(PHPのコーディング規約)のような確立された設定を採用するのかも分かれ道です。

自前でルールを積み上げる場合、チームの合意形成に時間がかかります。ルールの数だけ議論が発生し、決定に時間を取られます。

既存の設定を採用する場合は、議論の対象が「採用するかどうか」の1点に絞られます。細部の好みを一つずつ決める必要がなく、導入までの速度が上がります。

ただし既存設定をそのまま使うと、チーム固有の事情(レガシーな書き方が残る部分など)に合わないルールが混じることもあります。そこは overrides 設定で例外を局所的に許可するのが現実的です。

判断軸3: フォーマッタとリンターの役割分担

Prettierのようなフォーマッタと、ESLintのようなリンターは役割が異なります。この違いを理解していないと設定が重複したり衝突したりします。

フォーマッタは見た目(インデント・改行・クォート)を機械的に統一します。判断の余地がなく、意見の対立が起きにくい領域です。

リンターはコードの品質・安全性に関わるルール(未使用変数の検出、型の不整合、危険なパターンの禁止)を担当します。こちらは「なぜそのルールが必要か」の説明が必要になる場面もあります。

eslint-config-prettier のようなパッケージで、ESLintのフォーマット関連ルールを無効化し、Prettierと役割が重ならないようにする設定が一般的です。導入時にはこの重複がないか確認しておくと、後々のルール衝突を避けられます。

判断軸4: プルリクエストのサイズ管理をどこまでルール化するか

コードの一貫性だけでなく、プルリクエストのサイズも大規模チームの摩擦要因になります。20ファイル・800行を超えるような巨大な差分は、レビューが表面的な「LGTM」(Looks Good To Meの略。「問題なさそうです」の意味の定型承認コメント)で終わりやすく、隠れたバグを見逃すリスクが高まります。

差分を200〜300行程度に抑え、機能を段階的なプルリクエストに分割する運用が実践されています。たとえばDBスキーマ変更・コアロジック・UI表示を別々のプルリクエストに分ける進め方です。

この分割を機械的にチェックすることは難しいため、レビュー文化とテンプレートでの運用が現実的な落としどころになります。プルリクエストのテンプレートに「変更行数の目安」を明記しておくだけでも、意識づけとしては有効です。

未完成の機能を安全に本番へデプロイする手段として、Feature Flag(機能フラグ。コードは配置しつつ機能の有効・無効を切り替える仕組み)を使う運用もあります。LaunchDarklyやFlagsmithといったサービス、あるいは自前のフラグ管理で、デプロイとリリースのタイミングを切り離せます。

選択肢の比較

選択肢強制力導入コスト向いている規模
エディタ設定のみ低い(個人依存)ほぼゼロ数人のチーム
pre-commitフック中(ローカルで検知)低い(Husky等導入のみ)10〜30人規模
CIでハードフェイル高い(機械的に強制)中(パイプライン整備が必要)30人以上・複数リポジトリ

ケース別の推奨

チームが10人未満で、リポジトリが1つなら、pre-commitフックまでで十分なことが多いです。Huskyと lint-staged を組み合わせ、コミット時に変更ファイルだけ検査する構成が軽量です。

チームが30人を超え、複数チームが同じリポジトリを触るなら、CIでのハードフェイルまで踏み込む価値があります。プルリクエストのマージボタンを機械的にブロックすることで、レビューの心理的コストを下げられます。

複数リポジトリ・複数言語(フロントエンドとバックエンド混在)なら、共通の設定パッケージを社内npmレジストリなどで配布し、各リポジトリが同じ設定をextendsする形が管理しやすくなります。設定変更を1箇所で行い、全リポジトリに波及させられます。

あえて見送るべき条件

数人規模のプロトタイプ開発や、仕様が固まっていない検証段階のプロジェクトでは、CIでの厳格な強制はむしろ足かせになります。ルール整備に使う時間より、機能検証のスピードを優先すべき局面です。

また、既存の大規模コードベースに後からLintルールを一括適用しようとすると、初回実行で数千件のエラーが出て手が付けられなくなることがあります。この場合は新規追加分のみに適用する差分Lint(eslint --diff のような仕組みや、CIでの変更ファイル限定チェック)から始めるのが現実的です。

導入前に確認すること

ESLintやPrettierの導入自体は難しくありませんが、どこまで強制するかの設計を誤ると形骸化します。

  • 現在のレビューで繰り返されるスタイル指摘が何かを1週間分洗い出す
  • 既存の設定(Airbnb・PSR-12など)で代替できないか確認する
  • CIでハードフェイルにする前に、警告のみのモードで1〜2週間試す
  • プルリクエストのサイズについてもテンプレートに目安を明記する

まずは自分のチームのプルリクエスト履歴を振り返り、直近のスタイル指摘コメントの数を数えるところから始めてみてください。そこで見えた摩擦の量が、どの段階まで自動化すべきかの判断材料になります。

参考

Writing Maintainable Code in Large Teams: Principles, Patterns, and Pipeline Architecture

この記事について: 本記事は AI を活用して作成し、forva AI 編集部が内容を確認・監修しています。

AI 駆動開発のご相談は forva AI へ。まずはお気軽にどうぞ。