Featured image of post HuskyとGit Hooksでコミット前にコード検証を自動化する Featured image of post HuskyとGit Hooksでコミット前にコード検証を自動化する
Git

HuskyとGit Hooksでコミット前にコード検証を自動化する

HuskyとGit Hooksを使ったコミット前の自動コード検証設定を解説。LinterやFormatter、ユニットテストをコミット直前に自動実行し、バグやスタイル崩れがリポジトリに混入するのを防ぐ導入方法とチーム運用のベストプラクティスを紹介します。

English
  1. ホーム
  2. web
  3. HuskyとGit Hooksでコミット前にコード検証を自動化する

はじめに

チーム開発において、「シンタックスエラーのあるコードがプッシュされてCIビルドが落ちた」「インデントや改行ルールがバラバラでコードレビューがしづらい」といった課題はよく発生します。

これらのルールをメンバーの「注意」に頼って運用するのは限界があります。

Gitの仕組みである Git Hooks と、それをJavaScript環境で簡単に管理できるツール Husky を導入すれば、コミットやプッシュの直前に自動的に静的解析（ESLint）やコード成形（Prettier）、テスト（Jest等）を実行させ、不正なコードがリポジトリにコミットされるのを防ぐことができます。本記事ではその導入手順を解説します。

1. Git Hooks と Husky とは？

Git Hooksとは、Gitの特定の操作（commit、push、mergeなど）が発生した際に、自作のスクリプトを割り込ませて実行できる標準の仕組みです。

デフォルトでは .git/hooks/ ディレクトリ内にスクリプトを配置する必要がありますが、このディレクトリはGitの管理対象外（.gitignore対象）であるため、チーム内で共有・バージョン管理することが難しいという欠点がありました。

Husky は、Git Hooksの設定をプロジェクトリポジトリ内のディレクトリ（例: .husky/）に保存し、パッケージマネージャ（npm）を通じてチーム全員のPCにフック設定を自動でインストール・同期できるツールです。

2. Huskyの基本的な導入ステップ

プロジェクトフォルダで以下の手順を実施します。

ステップ1: インストールと初期設定

以下のコマンドを実行して、Huskyのインストールとフック用の初期設定を一括で行います。

# Huskyのインストールとセットアップ
npx husky-init && npm install

これにより、以下の変更が加えられます。

  1. package.json の devDependencies に husky が追加される。
  2. package.json の scripts に "prepare": "husky" が追加される（これにより、他のメンバーが npm install した際にも自動的にHuskyが有効化されます）。
  3. プロジェクトルートに .husky/ ディレクトリと、デフォルトの pre-commit（コミット前フック）ファイルが自動生成される。

ステップ2: コミット前フックの設定

生成された .husky/pre-commit ファイルを開くと、デフォルトで npm test が登録されています。これを、コミット前に実行したいコマンド（例: ESLintやPrettier）に書き換えます。

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

# コミット前にESLintを実行し、エラーがあればコミットを中断する
npm run lint

これで、git commit コマンドを実行した際、自動的に npm run lint が走り、警告やエラーが発生した場合はコミット処理が自動的にキャンセル（ロールバック）されるようになります。

3. lint-staged を使ったパフォーマンスの最適化

上記の基本設定では、プロジェクト内のすべてのファイルに対してLinterが実行されます。プロジェクトの規模が大きくなると、コミットするたびに数分待たされることになり、開発スピードが著しく低下します。

この問題を解決するのが lint-staged です。 lint-stagedを導入すると、「Gitのステージングエリアにある（今回変更された）ファイル」だけを対象にLinterやFormatterを実行することができます。

セットアップ手順

  1. パッケージのインストール:

    npm install --save-dev lint-staged

  2. package.json への設定追加: 対象とするファイルパターンと、実行するコマンドを記述します。

    {
  "lint-staged": {
    "*.{js,ts,jsx,tsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.css": [
      "stylelint --fix",
      "prettier --write"
    ]
  }
}

  3. .husky/pre-commit の書き換え: Huskyから lint-staged を起動するように修正します。

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

npx lint-staged

これで、コミット対象のファイルだけが瞬時に自動整形・検証され、問題がなければそのまま自動でコミットされる快適な開発環境が構築できます。

まとめ

Husky と lint-staged を導入することで、コードの品質チェックを個人の意識から「システムの自動化」へとシフトさせることができます。

  1. HuskyでGit Hooksをリポジトリ管理する
  2. prepare スクリプトでチームへの自動導入を担保する
  3. lint-staged でステージングされたファイルのみを高速検証する

チーム全体の開発効率とコード品質を高めるために、ぜひプロジェクト初期から導入を検討してみてください。

© 2022 - 2026 たかおの解説