[JP] よりクリーンで一貫したフロントエンドコードへの第一歩

ℹ️ This article also has an English version here!

はじめに

フロントエンド開発において、React.jsやVue.jsなど、プロジェクトに使うフレームワークやパッケージマネージャーなどの技術選定は重要である。しかし、一度プロジェクトがスタートすると、今度はそのコードベースのメンテナンスが長期的な課題になる。これは一見大変な作業だが、PrettierやESLintのようなツールを使いこなすことで効率化できる。

本記事では、フロントエンドのコードの保守性向上に活用できるツールについて私の知見を紹介する。第一部ではこれらのツールの初期化方法について紹介する。第二部では、これらのツールを最大限活用するより具体的な方法と、個人のニーズに合わせたカスタマイズ方法について紹介する。

こんな人におすすめ

• コードの一貫性を維持したい方

FE品質を向上させるツール

ESLint は、JavaScriptの人気な静的解析ツールである。コード内のエラーを特定し、警告を表示し、場合によっては自動的に修正できる。カスタマイズ性が高く、プロジェクトのニーズに合わせて柔軟に調整できる。

一方、PrettierはJavaScriptなどに対応する人気のコードフォーマッタである。既存コードをコーディングスタイルに従って再フォーマットすることが特徴である。

これらのツールは比較的簡単に導入できるにもかかわらず、既存コードベースに対して計り知れないメリットをもたらす。多様なコードエディタとの優れた連携性を備えているため、ほぼ全ての開発環境に適合している。本記事では主にESLintとPrettierに焦点を当てるが、その他にもコードの品質保証を強化するためのツールがいくつか存在している。

その他の注目ツール

stylelint

CSS向けのリンティングツールであり、ESLintのCSS版と言える存在である。多くの機能が標準で備わっており、HTMLやMarkdown、CSS-in-JSに埋め込まれたスタイルや、SCSS、Sass、Lessといった言語まで対応できる。

cspell

上記のツールに比べると軽量ではあるが、関数名や変数名などのスペルミスを気にする場合には有用である。

静的解析ツールとコードフォーマッターの併用

コードを最初からエラーなく、常に決められたコーディングスタイルに合わせることは面倒な作業である。人間は誰しも間違えるものであり、開発者も例外ではない。複数人が同じコードベースで間違いを重ねれば、コードの品質が必ず崩れてしまう。

ESLintやPrettierのようなツールをプロジェクトの初期段階で導入すれば：

• レビュアーがこれらの間違いを指摘する負担を完全に取り除ける
• 関数名の誤りや参照の不足をESLintが教えてくれるので、見逃すこともない
• ファイルを保存した瞬間にPrettierがすべてを綺麗にしてくれるので、セミコロンの付け忘れやインデントのスペース数を気にする必要もない
• コードレビューにおいても、ありがちなミスや形式的な修正に気を取られずに済む

チーム開発という大きな枠組みにおいては、全員のローカル環境が同じ基準に揃っている安心感を得られる。この2つのツールだけでも、一度基準を決めてしまえば、それ以降は考える必要がない。

初期設定について

Prettierの導入

Prettierにはフォーマットに関する多くの設定がデフォルトで組み込まれている。開発者はコーディングスタイルを気にせず、実際のコーディングに集中できるようになる。また、一度導入してしまえば、ほとんど手間をかけずに運用できる点も特徴である。

Prettierの導入には、下記のステップで行う：

1. 好きなパッケージマネージャーでインストール
   • 例）npm install --save-dev --save-exact prettier
   • --save-devは開発環境のみのパッケージを指している
   • --save-exactを指定するによって、バージョンを固定し、チーム内の一貫性を保てる
2. 空の.prettierrcを作成（後でここに設定を記述する）
3. .prettierignoreも追加し、フォーマットの対象外とするフォルダやファイルを指定
4. Prettierを使うように自分のコードエディタを設定
   • ほとんどのコードエディタはPrettier用の拡張機能を持っている（例：VSCodeはprettier-vscode、Vimはprettier-vim）
5. Prettierを実行するためのキーボードショートカットを定義するか、あるいは保存時に自動で実行されるように設定する
   • VSCodeの場合は、settings.json に "editor.formatOnSave": true を追加すればよい

ESLintの導入

ESLintの導入は便利な初期化ツールによって簡単に行える：

1. パッケージマネージャーで初期化ツールを実行する
   • 例）npm init @eslint/config@latest
2. eslint.config.js や .eslintignore ファイルでさらに設定を行う（詳細は第二部で解説）

ESLintとPrettierを併用するための設定

ESLint自体もコードフォーマッティングを行うが、これらはPrettierに任せた方が効率的である。eslint-config-prettier のインストールをしてから、

npm install --save-dev --save-exact eslint-config-prettier

新しく作成した eslint.config.js ファイルに追加する：

eslint.config.js

export default defineConfig([
  // ...
  prettier
]);

ワークフローへの活用

ESLintとPrettierを両方手動でCLIで実行するコマンドがある：

npx eslint file1.js file2.js
npx prettier path/to/file1.js --write

しかし、毎回同じコマンドを叩くと非常に繰り返しが多くなるので、自動化した方が効率的である。自分の環境で設定できる自動化には、下記の3つの段階がある：

1. ファイルを保存したときに自動で実行
2. 一連の処理をまとめて実行するスクリプトコマンド
3. CI/CDワークフローに統合

保存時に実行

最初におすすめする設定は、コードを変更してファイルを保存するたびにESLint・Prettierを自動で実行することである。これにより、新規に追加されたコードが自動でチェック・フォーマットされる。

ここではVSCodeを例にするが、他のエディタでも同様の設定が可能である：

1. ユーザー設定JSONファイルを開く（「Open User Settings (JSON)」）
2. JSONファイルに以下を追加する
   • "editor.defaultFormatter": "esbenp.prettier-vscode"
     • Prettierをデフォルトのフォーマッタに設定
   • "editor.formatOnSave": true
     • 保存時にフォーマットを実行
   • "editor.codeActionsOnSave": { "source.fixAll.eslint": true }
     • 保存時にESLintを実行
3. 設定を保存
4. VSCodeに正しく設定が反映されているか確認するためにリロード

コマンドとして使う

あるファイルの変更が他のファイルに影響を与えることがあるが、該当ファイルを開くか、ツール等で全ファイルをチェックしない限り気づかない。そこで、簡単に実行できるコマンドとして設定しておけば、リポジトリ全体のチェックも容易になる。package.jsonにCLIコマンドをまとめて記述し、パッケージマネージャーで簡単に実行できるコマンドにする。

ここでは npm を例にする：

"scripts": {  
  "lint": "npx eslint --cache --config eslint.config.js --fix ."
  "format": "npx prettier --cache --config .prettierrc.js --log-level error --write"
  "fix": "npm run lint && npm run format" 
}

上記を説明すると：

• lint はESLintで全ファイルをスキャンし、--config で指定した eslint.config.js を参照しながら自動で修正可能なエラーを解決する。またキャッシュファイル（--cache）を保存するため、次回以降は変更のあったファイルのみスキャンされ、処理が高速化される。
• format は同様に作業ディレクトリ内の全ファイルに対してPrettierを実行し、設定ファイルを参照しつつキャッシュも保存する。--write フラグはフォーマットが必要なファイルを上書きするようにし、--log-level error はコンソールにエラーのみ表示するようにしている
• fix は上記のスクリプトをまとめて実行する

これにより、ワークスペース全体をESLintとPrettierを実行するのに npm run fix を1回実行するだけで済む。共有リポジトリにコードをコミットする前に一度実行しておくのが開発フローとして好ましい。

コミット前のフックに使う

特にチームで作業する場合、リモートリポジトリにプッシュされるコードが全員と一貫していることを保証したい。推奨される方法の一つは、以下のいずれかのツールを使うことである：

• lint-staged + Husky
• Lefthook

これらのツールを用いることで、コミット前にコードが常にフォーマットされ、チェックされることが保証される。これにより多くの手間やトラブルを避けることができるため、CI/CD導入の第一歩となるだろう。

おわりに

プロジェクトにESLintとPrettierを導入すれば、コードが一貫し、現代的なコーディング標準に従っているという一定の安心感を得られる。これにより、日常的なメンテナンスの手間が減り、開発プロセスがスムーズになるはずである。

第二部では、ESLintとPrettierの設定をより詳しく解説し、どのようにカスタマイズすれば自分のニーズに最適化できるかを紹介する。