はじめに
記事をご覧いただきありがとうございます。
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を追加します。
追加すると下記のようになります。
{
"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
作成したら以下を追加します。
build
coverage
node_modules
.next
試しに動かしてみる
以下のコードで実行します。
--writeでコードを上書きします
npx prettier --write .
package.jsonでコマンド化
package.jsonに記述すると楽になります。
scriptsに追記します
"format": "npx prettier --write ."
さらに詳しく知りたい方は以下のリンクからどうぞ
Huskyの設定
Commitzenの設定（日本語化）
GitHub Actionsの設定
動作確認
# 参考リンク