Next.jsを勉強してみるその⑤ 〜ESLintを導入する編〜

やなさん

2020.04.22

まいどです。バックエンドエンジニアのやなさんです。

さて、これまでNext.jsの環境構築、画面遷移、バリデーションについての記事を書きました。

今回はESLintの導入です。

ESLintとは: ESLintはJavaScriptやTypeScriptなどの静的解析ツールです。ESLintを導入することで、単純な構文エラーはもちろん、プロジェクト固有のコーディング規約（スタイルガイド）を定義することができます。複数人で開発するようなプロジェクトでも、厳密なルールを定義することによって、システム全体のプログラムコードの一貫性を維持できるツールです。

これがないと、複数人で開発する場合や、担当者が変わるたびにその人の癖が含まれたソースコードとなってしまい、結果的に保守性の低いプログラムコードになりかねません。

また、今は各プロジェクトでESLintのようなLinterの導入がデファクトスタンダードなようなので、このプロジェクトにも導入してみたいと思います。

では、さっそく。

※ このブログは、わからないなりにとりあえず動かすことを目標にしております。本来Reactで推奨する使い方と異なる部分があるかもしれませんが、それはご愛嬌ということで大目にみてください。

なお、以降の記述は、このシリーズで作成しているものを使っています。

必要なものをインストール
.eslintrc.jsonファイルを作成
package.jsonにscriptを追加
さいごに

必要なものをインストール

まず、ESLintを使ってTypeScriptを解析するためのライブラリを、nodeのルートディレクトリ（app）からターミナルを使ってインストールします。

# eslint,@typescript-eslint/parser,@typescript-eslint/eslint-plugin,eslint-plugin-reactをインストール
# Next.jsのプロジェクトルートで実行すること
npm install --save eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react

.eslintrc.jsonファイルを作成

eslintrc.jsonファイルを作成し、以下の設定を記述します。

{
  "parser": "@typescript-eslint/parser", 
  "extends": [
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true // Allows for the parsing of JSX
    }
  },
  "rules": {
    "react/prop-types": "off",
    "@typescript-eslint/no-empty-interface": 0
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

parser	parserの種類を指定する。指定しない場合はEspreeというparserが指定されます。
extends	ここに定義することでルールの拡張が可能です。
parserOptions	JavaScriptの言語オプションの指定が可能です。指定しない場合はECMAScript5構文が選択されます。
parserOptions	JavaScriptの言語オプションの指定が可能です。指定しない場合はECMAScript5構文が選択されます。
rules	設定したルールを拡張（上書き）することが可能です。
settings	構成ファイルへの共有設定が可能。今回はeslint-plugin-reactを使用し、Reactのバージョンを自動検出するために利用しています。