Zenn
🌟

Next.js13.4+TypeScript+ESLint+Prettier+Huskyのよくばりセットで環境を構築してみました

2023/05/23に公開
Next.js
TypeScript
ESLint
Prettier
husky
tech

はじめに

こんにちは！ご訪問いただきありがとうございます！
環境構築シリーズ第4弾です！

今回はフロントエンド開発への理解を深めるため、以下の技術を組み合わせた、よくばりセットで開発環境を構築しました。

  • Next.js13.4
    • Next.jsの最新のバージョンで、高速でパフォーマンスの優れたウェブアプリケーションを構築するためのフレームワークです。
  • TypeScript
    • 静的型付け言語で、開発効率やコードの可読性を向上させることができます。
  • ESLint(TypeScript&Airbnbスタイル)
    • コードの品質や一貫性を確保するための静的解析ツールです。今回はTypeScriptとAirbnbのスタイルガイドに準拠しています。
  • Prettier
    • コードの自動整形ツールで、コードのフォーマットを一貫性のあるスタイルに保つことができます。
  • Husky
    • Git操作をフックにして、ESLintとPrettierの実行を自動化することができます。

本記事では、具体的な手順を追って、どのように開発環境を構築したのかを紹介します。
これらの技術に関心をお持ちで、情報が足りず困っているという方のヒントになれば嬉しいです。

Next.jsのプロジェクトを新規作成

新しいNext.jsプロジェクトを作成しましょう。

create next-app

新しいプロジェクトを作成するために、任意のディレクトリに移動し次のコマンドを使用します。

yarn create next-app

対話形式でプロジェクトを新規作成

コマンドを実行すると対話形式のプロンプトが表示されます。以下の通り質問に回答します。

  • What is your project named?
    • nextjs-study
  • Would you like to use TypeScript with this project?
    • Yes
  • Would you like to use ESLint with this project?
    • Yes
  • Would you like to use Tailwind CSS with this project?
    • No
  • Would you like to use src/ directory with this project?
    • Yes
  • Use App Router (recommended)?
    • Yes
  • Would you like to customize the default import alias?
    • No

.yarnrc.ymlの作成

ルートディレクトリに.yarnrc.ymlを作成し、以下の内容を記述します。

.yarnrc.yml
nodeLinker: node-modules

絶対パスを使用するための設定をtsconfig.jsonに追記

ルートディレクトリのtsconfig.jsonに以下の内容を記述します。
ここでは、baseUrlをプロジェクトのルートディレクトリに設定し、絶対パスを使用してモジュールのインポートができるように設定しています。

tsconfig.json
{ "compilerOptions": { "baseUrl": "." } }

ESlintのセットアップ

ESLintをセットアップしましょう。
ESLintはコードの品質や一貫性を確保するための静的解析ツールで、AirbnbのスタイルガイドとTypeScriptに準拠しています。

必要なパッケージのインストール

TypeScript用のESLintパーサーとプラグイン、AirbnbのESLint設定、AirbnbのTypeScript用のESLint設定がインストールされます。

yarn add --dev @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-airbnb eslint-config-airbnb-typescript

.eslintrc.jsonの修正

ルートディレクトリの.eslintrc.jsonに以下の内容を追記します。

.eslintrc.json
{
  "extends": [
    "airbnb",
    "plugin:@typescript-eslint/recommended",
    "airbnb-typescript",
    "next/core-web-vitals"
  ],
  "parserOptions": {
    "project": "./tsconfig.json"
  }
}

セットアップが完了したことを確認

セットアップが完了したので、ESLintを実行してみましょう。

yarn next lint --fix

Prettierのセットアップ

Prettierをセットアップしましょう。
Prettierはコードの自動整形ツールであり、コードのフォーマットを一貫性のあるスタイルに保つことができます。

必要なパッケージをインストール

PrettierとPrettierのESLint設定がインストールします。

yarn add --dev prettier eslint-config-prettier

.prettierrcの作成

ルートディレクトリに.prettierrcを作成し、以下の内容を記述します。
本記事では、文字列をシングルクォートで囲う設定をしてます。

.prettierrc
{ "singleQuote": true }

.eslintrc.jsonの修正

ルートディレクトリの.eslintrc.jsonに以下の内容を追記します。
Prettierの設定がESLintの設定と統合され、コードフォーマット時にPrettierのルールが適用されるようになります。

{
  "extends": [
    "airbnb",
    "plugin:@typescript-eslint/recommended",
    "airbnb-typescript",
    "next/core-web-vitals",
+   "prettier"
  ],
  "parserOptions": {
    "project": "./tsconfig.json"
  }
}

Huskyの設定

Huskyの設定を行いましょう。
Huskyを使用すると、Git操作をフックにして、ESLintとPrettierの実行を自動化することができます。

husky とlint-stagedをインストール

lint-stagedはステージに追加されたファイルに対して指定されたコマンドを実行するツールです。

yarn add --dev husky lint-staged

Huskyの初期化

Huskyがプロジェクトに必要なファイルを生成します。

npx husky install

Huskyの設定ファイルの生成

pre-commitフックの設定ファイルを生成します。
なお、pre-commitの部分は他のフック（例: pre-push）に変更することもできます。

npx husky add .husky/pre-commit "npx lint-staged"

Huskyの設定ファイルの内容を確認

生成されたpre-commitに以下の内容が記述されているいか確認します。
pre-commitフックがトリガーされた際にlint-stagedコマンドが実行されるようになります。

pre-commit
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx lint-staged

.lintstagedrc.jsを作成し、lint-stagedの設定を追記

ルートディレクトリに.lintstagedrc.jsを作成し、以下の内容を追記します。

.lintstagedrc.js
const path = require('path');

const buildEslintCommand = (filenames) =>
  `next lint --fix --file ${filenames
    .map((f) => path.relative(process.cwd(), f))
    .join(' --file ')}`;

module.exports = {
  '*.{js,jsx,ts,tsx}': [buildEslintCommand, 'prettier --write'],
};

今回のNext.jsのセットアップは以上です。
ここまでお疲れ様でした！

終わりに...

今回はNext.jsの開発環境構築についてご紹介しました。

これらの設定を適切に行うことで、効率的かつ品質の高いNext.jsプロジェクトを開発することができます。また、これらの設定はあくまで基本的なものであり、プロジェクトの要件や好みに応じてカスタマイズすることもできます。

もし環境構築に困った時は、またこの記事に戻ってきてください。
ここまでご覧いただき、ありがとうございました。

Discussion