Zenn
🎃

[Next.js]huskyとGitHubActionsで綺麗に開発し続けられる環境を整える

2023/06/16に公開
Next.js
GitHub Actions
ESLint
Prettier
tech

この記事で書くこと

プロジェクトの最初にESLintやPrettierを使用して開発環境を整えることは当然だと思います。
それを更に拡張して、huskyとGitHubActionsを利用して常に綺麗に開発し続けられる環境を整える方法を記述します。

やらないこと

  • DBを用いたテスト(dockerで構築したRDB+Prisma)
    • (記事にするのが大変過ぎたのでカット。。。)

huskyでやること

  • Prettier
  • ESLint
  • commitlint
  • 単体テスト(jestを使用)

GitHubActionsでやること

  • ESLint
  • 単体テスト(jestを使用)

実装

Next.js

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

 # 任意のプロジェクト名を設定する
 export app_name=〇〇
 npx create-next-app $app_name -app --use-npm --typescript --tailwind --eslint --src-dir

オプションの設定は以下を御覧ください。
API Reference: create-next-app | Next.js

Git

コマンドラインからGitの初期化をします

git init

.gitignoreが自動的に生成されるので、必要な記述を追加します。
私はInteliJIDEAを使っているので.ideaを追加しました。

Prettier

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

インストール

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

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

Install · Prettier

.prettierrc.jsonの作成
echo {}> .prettierrc.json
IgnoringFileの作成

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

touch .prettierignore

以下を追加します。

build
coverage
node_modules
.next
フォーマットを実行する

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

npx prettier --write .

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

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

IDEに関連づけると更に楽になります。
InteliJIDEAの場合、InteliJIDEA -> setting -> 言語フレームワーク -> JavaScript -> Prettierで設定できます。

ESLint

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

インストール

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

npm install --save-dev eslint-config-prettier eslint-plugin-import
eslintrc.json

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

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

Tailwind

Tailwindを使うならぜひprettier-plugin-tailwindcssを入れましょう。

インストール

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

npm install --save-dev prettier-plugin-tailwindcss

prettierrc.jsonに以下を追加します。

prettierrc.json
 {
   "plugins": [
     "prettier-plugin-tailwindcss"
   ],
 }

commitlint

commitlintはGitのコミットメッセージの品質を保つためのツールです。のツールは、コミットメッセージがプロジェクトやチームのコンベンションに従っているかをチェックします。

インストール

コマンドラインからインストールします

npm install -g @commitlint/cli @commitlint/config-conventional

commitlint - Lint commit messages

commitlint.config.jsの作成
echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js

Jest

Jestはシンプルさを重視した、快適な JavaScript テスティングフレームワークです。

インストール

コマンドラインからインストールします。

npm install --save-dev jest @types/jest ts-jest
npx ts-jest config:init

はじめましょう · Jest

jest.config.jsの設定

moduleNameMapperに以下の設定を追加します。
tsconfig.jsonのpathsと合わせる必要があります。
追加後のコードは以下のようになります。

jest.config.js
/** @type {import('ts-jest').JestConfigWithTsJest} */
module.exports = {
  preset: "ts-jest",
  testEnvironment: "node",
  moduleNameMapper: {
    "^@/(.*)$": "<rootDir>/src/$1",
  },
};
動作確認ファイルの作成

どこでもいいのでファイルを作成します。
適当にsrcフォルダ配下に作成するとします。

sum.ts
describe("sum", () => {
  const sum = (a: number, b: number) => a + b;
  
  test("adds 1 + 2 to equal 3", () => {
    expect(sum(1, 2)).toBe(3);
  });
});
package.json

便利になるので以下を追加します。
--runInBandを指定することでテストを1つずつ実行します。
DBを使ってテストするときにこの設定がないと別のテストで作成した値を引きずってテストが失敗することがあるので必須です。

package.json
  "test": "jest --runInBand",
  "test:watch": "jest --watch --runInBand",
  "test:cov": "jest --coverage --runInBand"

husky

huskyは、Gitフックを簡単に管理できるようにするツールです。
Gitフックとは、Gitリポジトリの特定の操作（コミット、プッシュなど）が行われる前後に自動的に実行されるスクリプトです。これにより、コードの品質を維持したり、特定のプロセスを自動化するのに役立ちます。

インストール

コマンドラインからインストールします

npx husky-init && npm install

Getting started | 🐶 husky

pre-commitの設定

.husky/pre-commitが自動的に作成されているはずです。
pre-commitファイルにprettierとESLintの設定を追加します。
追加後のファイルは以下の通りになります。

 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
 npm run format
 npm run lint
 npm run test
commit-msgの設定

commitlint用の設定をします。

npx husky add .husky/commit-msg  'npx commitlint --edit ${1}'
動作確認

テストコードを失敗させるなどしてから、git commitします。
huskyが走って、テストが失敗して、コミットできないはずです。

GitHubActions

GitHub Actionsは、GitHubリポジトリ内でCI/CDや自動化タスクを実行するためのサービスです。
コードのビルド、テスト、デプロイなどを自動化するためのワークフローを定義できます。
これは、YAMLファイルを使用してGitHubリポジトリ内で設定され、イベント（例：プルリクエスト、コミット）に基づいてトリガーされます。

設定ファイルの作成

.github/workflows/pull-request.ymlを作成します。
以下のコードをコピペします。

pull-request.yml
code:yml
 name: pull-request
 
 on: [pull_request]
 
 jobs:
   app:
     runs-on: ubuntu-latest
     steps:
       - name: Check out repository
         uses: actions/checkout@v3
         with:
           fetch-depth: 0 # https://www.chromatic.com/docs/github-actions#support-for-codeactionscheckoutv2code-and-above
 
       - run: npm ci
 
       # GitHub ActionsでResource not accessible by integrationが出た時の対処法
       # https://zenn.dev/tatsugon/articles/github-actions-permission-error
       - name: Run ESLint
         uses: reviewdog/action-eslint@v1
         with:
           reporter: github-check
           eslint_flags: "src/"
           fail_on_error: true
 
       # テスト
       - name: Run test
         run: npm run test

これでプルリク時にESLintとテストが走るようになります。

Discussion