ESLint とは

ESLint とは、JavaScript や TypeScript のコードを自動的に検査し、潜在的な問題やコーディングスタイルに関する問題を検出するためのツールです。開発者が一貫したコード品質を保つことができ、プロジェクトのメンテナンス性が向上します。

ESLint のインストール

ESLint をインストールしていない場合は、Next.js と TypeScript のプロジェクトに ESLint をインストールしましょう。プロジェクトのルートディレクトリで以下のコマンドを実行してください。

npm install --save-dev eslint eslint-config-next

ESLint の設定ファイルの作成

プロジェクトのルートディレクトリに .eslintrc ファイルを作成し、以下の内容を記述します。

{
  "extends": "next"
}

これにより、Next.js のデフォルト設定が適用されます。また、TypeScript のルールも含まれていますので、追加の設定は不要です。

カスタムルールの追加

プロジェクトに応じて、独自の ESLint ルールを追加していくことができます。例えば、以下のように .eslintrc ファイルを更新することで、追加のルールを設定できます。

{
  "extends": "next",
  "rules": {
    "eqeqeq": "error",
    "no-console": "warn"
  }
}

上記の設定では、以下のルールが追加されています。

• eqeqeq: 厳密な等価演算子（=== や !==）を使用するように強制します。
• no-console: console の使用を警告として報告します。

プラグインを利用したルール追加

ESLint のプラグインを利用することで、さらに柔軟なルール設定が可能になります。例えば、eslint-plugin-react を使って React 関連のルールを追加しましょう。

まず、プラグインをインストールします。

npm install --save-dev eslint-plugin-react

次に、.eslintrc ファイルを以下のように更新します。

{
  "extends": "next",
  "plugins": ["react"],
  "rules": {
    "eqeqeq": "error",
    "no-console": "warn",
    "react/jsx-uses-vars": "error",
    "react/jsx-uses-react": "error"
  }
}

上記の設定では、以下の React 関連のルールが追加されています。

• react/jsx-uses-vars: JSX 内で宣言された変数が使用されていることを確認します。
• react/jsx-uses-react: JSX 内で React が使用されていることを確認します。

ESLint の実行方法

プロジェクトのルートディレクトリで以下のコマンドを実行することで、ESLint によるコードチェックが実行されます。

npx eslint --ext .js,.jsx,.ts,.tsx ./

スクリプトの追加

毎回コマンドを手動で入力するのは面倒ですので、package.json に以下のスクリプトを追加しましょう。

{
  "scripts": {
    "lint": "eslint --ext .js,.jsx,.ts,.tsx ./"
  }
}

これにより、以下のコマンドで ESLint を実行できるようになります。

npm run lint

自動修正の設定

ESLint は、一部の問題について自動修正を行うことができます。自動修正を実行するには、以下のコマンドを実行します。

npx eslint --ext .js,.jsx,.ts,.tsx --fix ./

スクリプトへの追加

package.json の scripts に以下の内容を追加して、自動修正を簡単に実行できるようにしましょう。

{
  "scripts": {
    "lint": "eslint --ext .js,.jsx,.ts,.tsx ./",
    "lint:fix": "eslint --ext .js,.jsx,.ts,.tsx --fix ./"
  }
}

これにより、以下のコマンドで自動修正を実行できます。

npm run lint:fix

以上で、Next.js と TypeScript のプロジェクトにおける ESLint の設定方法について解説しました。この設定を活用し、一貫したコード品質を保ち、開発効率を向上させましょう。