概要

Gitフックを活用して、ESLint、PHPStan、ユニットテストを自動的に実行することで、手動作業を減らし、コード品質を保つ方法を解説します。本記事では、Huskyを使った設定手順を紹介し、効率的なチーム開発を実現します。コミット前に自動でチェックを行い、エラーを未然に防ぐフローを構築します。

目的

この記事の目的は、Gitコミット時に静的解析やテストを自動実行し、コード品質を確保する仕組みを構築することです。これにより、以下を実現します：

コミット時のエラー防止
- ESLint（JavaScript/TypeScriptの静的解析）、PHPStan（PHPの静的解析）、ユニットテストをコミット時に自動実行し、不備があればコミットを防止します。
- チーム全体でコード品質を統一し、コードレビューや修正の負担を軽減します。
静的解析とテストのルール遵守
- 開発者が静的解析ツールやテストを意図的に無視するのを防ぎ、ルールの徹底を図ります。
効率的なチーム開発の実現
- 自動チェックの仕組みを導入することで、手動でのチェックが不要になり、効率的な開発フローを確立します。

前提条件

この記事を進めるにあたり、以下の条件を満たしていることを確認してください：

この記事では、これらの前提条件を基に、Huskyを活用して効率的なコードチェックの仕組みを導入する方法を解説します！

具体的な手順

この記事では、Huskyを導入し、コミット時にESLint、PHPStan、ユニットテストの自動チェックを行う手順を解説します。

Huskyのインストール

開発コンテナのターミナルで以下のコマンドを実行し、Huskyをインストールします：開発コンテナのターミナルにて

$ npm install husky --save-dev

package.jsonの修正

`package.json`

prepareスクリプトにhusky installを追加します。これにより、Huskyの初期設定が行われます。

package.json

{
~~~省略~~~
    "scripts": {
        "build": "vite build",
        "dev": "vite",
        "type-check": "vue-tsc --noEmit",
        "prepare": "husky install"
    },
~~~省略~~~
}

pre-commit作成

以下のコマンドを実行して、Huskyのpre-commitフックを作成します：

$ npx husky add .husky/pre-commit "npm test"

pre-commitの修正

`.husky/pre-commit`

コミット時に以下を自動実行する設定を追記します：

ESLint/TypeScriptのチェック（ステージされたファイルのみ）
PHPStanの静的解析（ステージされたPHPファイルのみ）
PHPUnitでのユニットテスト実行（全テストを実行）

以下は、最終的な.husky/pre-commitの内容です：

pre-commit

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

export PATH="$HOME/.nvm/versions/node/v22.12.0/bin:$PATH"
npx lint-staged
LINT_STAGED_STATUS=$?

# ステージされた PHP ファイルを取得
STAGED_FILES=$(git diff --cached --name-only --diff-filter=d | awk '/\.php$/')

# Larastan（PHPStan）の静的解析
if [ -n "$STAGED_FILES" ]; then
    echo "Running PHPStan on staged files..."
    vendor/bin/phpstan analyse $STAGED_FILES
    LARASTAN_STATUS=$?
else
    echo "No PHP files staged for PHPStan check."
    LARASTAN_STATUS=0
fi

# PHPUnit のユニットテスト実行
php artisan test
PHPUNIT_STATUS=$?

# 結果を判定
if [ $LINT_STAGED_STATUS -ne 0 ] || [ $LARASTAN_STATUS -ne 0 ] || [ $PHPUNIT_STATUS -ne 0 ]; then
    echo "❌ Pre-commit checks failed. Fix the issues before committing."
    exit 1
fi

echo "✅ All checks passed. Proceeding with commit."

この手順に従うことで、Gitコミット時にコードの品質を自動的にチェックし、チーム全体で一貫性のあるコードベースを維持することが可能になります！

確認

Huskyのpre-commitフックが正しく動作しているかを確認します。以下に各チェックのエラー発生時や成功時の動作を示します。

Git操作方法について

Huskyのpre-commitフックは、ターミナルからのgit commitコマンドだけでなく、VSCodeのソース管理ビュー（コミットボタン）からのコミット操作にも対応しています。

ソース管理ビューの場所
VSCode左側の「ソース管理」アイコン（もしくはCtrl+Shift+G）をクリックすると、コミット用の入力欄とボタンが表示されます。
Huskyの動作
VSCode内でコミットを実行した場合も、pre-commitフックが呼び出され、自動チェックが行われます。

以下では、具体的なエラー発生時や成功時の動作を示します。

1. TypeScriptエラーがある場合

以下は、TypeScriptエラーが含まれる状態でコミットを試みた例です：

エラーのあるコード
エラーによるコミット拒否

2. ESLintエラーがある場合

次に、ESLintエラーがある場合の挙動を確認します：

エラーのあるコード
コミット試行時のエラー検知

3. PHPStanでエラーがある場合

PHPStan（Larastan）がエラーを検出した場合の例です：

エラーのあるコード
エラーによるコミット拒否

4. ユニットテストでエラーがある場合

ユニットテストが失敗する場合の例です：

意図的に失敗するテストコード
コミット試行時のエラー検知

5. 問題がないとき

すべてのチェックをクリアした場合の例です：

問題がないコード
コミット成功

まとめ

この記事では、Gitコミット時に自動チェックを行うHuskyフックの導入方法を解説しました。以下のポイントを押さえることで、チーム全体でのコード品質管理を効率化できるようになります：

Huskyの活用

静的解析とテストの自動実行
コミット時にESLint、TypeScript、PHPStan、ユニットテストを自動的に実行し、不備があればコミットを防止。
コミット前に品質を確保
問題が発生したコードがリポジトリに入らない仕組みを構築。

チーム開発での利点

統一されたコード品質の実現
各開発者が異なるツールを使うことなく、一貫した開発フローを実現。
コードレビューの負担軽減
明確なエラーが事前に検出されるため、レビュー時の指摘を減らし、より重要な部分に集中。

VSCodeとの連携

VSCodeのコミットボタンからも自動チェックが動作するため、操作がシンプルに。
開発環境の統一により、誰でも簡単に使える仕組みを提供。

この記事を活用することで得られるメリット

ルール違反や見落としの防止
自動化によって人為的なミスを防ぎ、チーム全体でのルール徹底を実現します。
効率的な開発フロー
コードチェックにかかる時間を削減し、開発スピードを向上させます。

最後に、読んでいただきありがとうございました！

関連記事