はじめに

記事をご覧いただきありがとうございます。
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

目次

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

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

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

コマンドラインからプロジェクトを作成します。

ターミナル

 npx create-next-app <アプリ名> -app --use-npm --typescript --eslint --src-dir

※オプションの設定は以下のリンクを参照ください。
create-next-appの詳細設定

ESlintのセットアップ

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

インストール

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

ターミナル

npm install --save-dev eslint-config-prettier eslint-plugin-import

eslintrc.jsonの設定

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

eslintrc.json

{
    "extends": ["next/core-web-vitals", "prettier", "plugin:import/typescript"]
}

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

Prettierのセットアップ

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

インストール

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

ターミナル

npm install --save-dev --save-exact prettier @trivago/prettier-plugin-sort-imports

.prettierrc.jsonの作成

ターミナル

echo {}> .prettierrc.json

IgnoringFileの作成

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

ターミナル

touch .prettierignore

作成したら以下を追加します。

.prettierignore

build
coverage
node_modules
.next

試しに動かしてみる

以下のコードで実行します。
--writeでコードを上書きします

ターミナル

npx prettier --write .

package.jsonでコマンド化

package.jsonに記述すると楽になります。
scriptsに追記します

package.json

"format": "npx prettier --write ."

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

Huskyの設定

Commitzenの設定（日本語化）

GitHub Actionsの設定

動作確認

#　参考リンク

終わりに