Next.js13.4+TypeScript+ESLint+Prettier+Husky+Commitzenでチーム開発に最強な環境構築を行う

# はじめに
記事をご覧いただきありがとうございます。
1人でプロジェクト開発をしている際には気にならないことですが複数人での開発となると人それぞれのコードの書き方があります。
例えば

- 　インデントのスペースは2か4か
- 　ダブルクオーテーションかシングルクオーテーションか
- 　文末にはセミコロンを使用すべきか

現在私はインターンに参加しており、複数人でとあるサービスのコードを書く機会をいただきました。
ここで私たちはコードの保守性・品質を高めるべく以下のツールを使用することにしました。
この記事はプロジェクトの環境構築をする際に少し手こずったので忘れないように、そして次にまたプロジェクトを作成する際に役立てられるように書きます。

### 使用技術

- Next.js13.4
    - Next.jsの最新のバージョンで、高速でパフォーマンスの優れたウェブアプリケーションを構築するためのフレームワークです。
- TypeScript
    - 静的型付け言語で、開発効率やコードの可読性を向上させることができます。
- ESLint
    - コードの品質や一貫性を確保するための静的解析ツールです。
- Prettier
    - コードの自動整形ツールで、コードのフォーマットを一貫性のあるスタイルに保つことができます。
- Husky
    - Git操作をフックにして、ESLintとPrettierの実行を自動化することができます。
- Commitzen-ja
    - コミットメッセージを簡単・簡潔に記述したいときに使えるのがCommitizenです。
    Commitizenはインタラクティブにコミットメッセージを作成できるツールで、
        - このコミットのタイプ
        - スコープ
        - コミットのサマリー
        - コミットの詳細
        
      などについて対話的に記述していくことで、適切なコミットメッセージを作成できます。

### 解説すること
- 各パッケージの設定方法
- Next.jsの環境構築手順と解説
- ESlintやPrettierについて
- Huskyやlint-stagedを使ったcommit、push時にCI実行
- Commitzenの設定と日本語化方法
- GitHub Actionsを自動化するための方法

### 解説しないこと
- Next.jsの機能
- Linux基本コマンドについて
- VSCodeの基本操作について

### バージョン情報など

- npm   9.7.2
- Next.js  13.4.10
- React  18.2.0
- TypeScript 5.1.6
- ESLint  ^8.49.0
- Prittier ^3.0.3
- Husky  ^8.0.3
- lint-staged ^14.0.1
- Commitzen  4.3.0
- cz-conventional-changelog-ja 0.0.2



# 目次
進め方は以下の通りです。

1. Next.jsのプロジェクトを新規作成
2. ESlintのセットアップ
3. Prettierのセットアップ
4. Huskyの設定
5. Commitzenの設定（日本語化）
6. GitHub Actionsの設定

# Next.jsのプロジェクトを新規作成
コマンドラインからプロジェクトを作成します。
```Linux:ターミナル
 npx create-next-app <アプリ名> -app --use-npm --typescript --eslint --src-dir
```
※オプションの設定は以下のリンクを参照ください。
[create-next-appの詳細設定](https://nextjs.org/docs/app/api-reference/create-next-app)

# ESlintのセットアップ
ESLintは、JavaScriptコードの静的解析ツールです。
潜在的なエラーやバグ、コーディング規約に従っていない箇所をコードから検出し、コードの品質とコーディングスタイルを向上させるために使用されます。

### インストール
コマンドラインからインストールします。
eslint-config-prettierはprettierとESLintを共存させるツールです。

```Linux:ターミナル
npm install --save-dev eslint-config-prettier eslint-plugin-import
```

### eslintrc.jsonの設定
package.json内のextendsにprettierとplugin:import/typescriptを追加します。
追加すると下記のようになります。

```JavaScript:eslintrc.json
{
    "extends": ["next/core-web-vitals", "prettier", "plugin:import/typescript"]
}
```

さらに詳しく知りたい方は以下のリンクからどうぞ



https://eslint.org/docs/latest/

# Prettierのセットアップ

Prettierとはコードフォーマッターツールです。
ソースコードを整形し、一貫したスタイルに矯正することでコードの可読性や保守性を向上させることができます。

### インストール
コマンドラインからインストールします。
@trivago/prettier-plugin-sort-importsが便利なので一緒に入れています。これはimportの並び順を自動的に揃えてくれるツールです。

```Linux:ターミナル
npm install --save-dev --save-exact prettier @trivago/prettier-plugin-sort-imports
```

### .prettierrc.jsonの作成
```Linux:ターミナル
echo {}> .prettierrc.json
```

### IgnoringFileの作成
特定のファイルやフォルダーを無視する場合に使用します。

```Linux:ターミナル
touch .prettierignore
```
作成したら以下を追加します。
```:.prettierignore
build
coverage
node_modules
.next
```

### 試しに動かしてみる
以下のコードで実行します。
--writeでコードを上書きします
```Linux:ターミナル
npx prettier --write .
```

### package.jsonでコマンド化
package.jsonに記述すると楽になります。
scriptsに追記します

```JacaScript:package.json
"format": "npx prettier --write ."
```

さらに詳しく知りたい方は以下のリンクからどうぞ

https://prettier.io/docs/en/

# Huskyの設定
# Commitzenの設定（日本語化）
# GitHub Actionsの設定
# 動作確認
#　参考リンク
# 終わりに