フロントエンド開発チームの開発ルールを自動化して守り抜く方法

こんにちは、FLINTERSで主にフロントエンド周りの開発をしているエンジニアです。今回は、FLINTERSブログ祭りということで寄稿しています。テーマは #フロントエンド #Next.js #自動化です。

フロントエンド開発は日々進化しています。新しいフレームワークやツールが登場する中で、開発チームのコード品質と生産性を維持するためには開発ルールの自動化が欠かせません。

この記事では、Next.jsとTypeScriptを使ったフロントエンド開発チームを例に、開発ルールの自動化について説明します。

コーディング規約を自動化するメリット

「プログラマが知るべき97のこと」では、コーディング規約を自動化することの重要性が強調されています。手動でコーディング規約をチェックするのは非効率であり、人的エラーも増え、いずれ守られなくなります。

しかし、自動化することでコードの一貫性を保ち続け、開発者がコーディングスタイルに関する細かな部分に悩まされることなく、実際の開発に集中できるようになります。

Next.js、TypeScriptをインストールする

Next.js、TypeScriptをベースに設定を進めていきます。

npx --yes create-next-app my-next-app --ts

✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … Yes
✔ Would you like to use `src/` directory? … No
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to customize the default import alias (@/*)? … No

自動化する対象

今回自動化する対象は以下の4つです。

import/export文を一定のルールに従って並び替える
未使用のimport文を削除する
ESLintによる静的コード解析で、コードの品質を向上し、潜在的なバグを検出する
Prettierによるコードフォーマットで、コードスタイルの一貫性を保つ

import/export文を一定のルールに従って並び替える

import/export文の並び替えを自動化することで、コードの可読性が向上します。

eslint-plugin-simple-import-sortを使用すれば、import文をnode内蔵モジュール、外部モジュール、プロジェクトファイルのアルファベット順に並べ替えることが可能です。

npm install --save-dev eslint-plugin-simple-import-sort

.eslintrc.jsonの設定：

{
    "plugins": ["simple-import-sort"],
    "rules": {
        "simple-import-sort/imports": "error",
        "simple-import-sort/exports": "error"
    }
}

未使用のimport文を削除する

未使用のimport文が残っていると、コードが不要に膨らみ、メンテナンス性が低下します。

eslint-plugin-unused-importsを使用すると、自動的に未使用のimport文を検出し削除することができます。

合わせて私が良く使う_から始まる変数はESLintの警告から除外する設定も紹介しておきます。

npm install --save-dev eslint-plugin-unused-imports

.eslintrc.jsonの設定：

    "plugins": ["unused-imports"],
    "rules": {
        "unused-imports/no-unused-imports": "error",
        "unused-imports/no-unused-vars": [
        "warn", {
        "vars": "all",
        "varsIgnorePattern": "^_",
        "args": "after-used",
        "argsIgnorePattern": "^_"
        }
    }

ESLintによる静的コード解析で、コードの品質を向上し、潜在的なバグを検出する

ESLintは、コードの品質を向上させ、潜在的なバグを検出するための静的コード解析ツールです。

Next.jsのプロジェクトで標準的に使用される設定を適用することで、効率的にコーディング規約を守ることができます。"next/core-web-vitals"は、Next.jsの基本的なESLint設定と、より厳格なCore Web Vitalsルール設定を含みます。

※ Next.jsインストール時にESLintもインストールされているため、明示的にインストールする必要はありません

.eslintrc.jsonの設定：

{
    "extends": ["next/core-web-vitals"]
}

Prettierによるコードフォーマットで、コードスタイルの一貫性を保つ

Prettierは、コードフォーマットを自動化し、一貫したスタイルを提供するツールです。

eslint-config-prettierは、ESLintからPrettierのルールの重複する部分を無効化するプラグインです。

※ 2024/06/12現在、create-next-appのeslintはv8なので、eslint-config-prettierはv3を利用する必要があります。eslintがv9になっていれば、eslint-config-prettierはv4を使うようにしてください。

npm install --save-dev prettier eslint-config-prettier@^3

.eslintrc.jsonの設定

{
    "extends": ["prettier"]
}

最終的な状態

.eslintrc.json

{
    "extends": ["next/core-web-vitals","prettier"],
    "plugins": ["simple-import-sort","unused-imports"],
    "rules": {
        "simple-import-sort/imports": "error",
        "simple-import-sort/exports": "error",
        "unused-imports/no-unused-imports": "error",
        "unused-imports/no-unused-vars": [
        "warn", {
        "vars": "all",
        "varsIgnorePattern": "^_",
        "args": "after-used",
        "argsIgnorePattern": "^_"
        }
      ]
    }
}

package.json

{
  "scripts": {
    "lint": "next lint",
    "lint:fix": "eslint ./app -ext .js,.jsx,.ts,.tsx --fix",
    "format": "prettier --check ./app",
    "format:fix": "prettier --write ./app"
  }
}