Closed5

Huskyを使用してgit push前にコードの品質を担保する

OsamuOsamu

公式のGet Startedを見ながら実際にhuskyを触ってみる

準備

// install
% npm install --save-dev husky

// init
% npx husky init

.huskyディレクトリが作成された

あとは生成されたpre-commitにスクリプトを書いていくと、コミット時に実行できる感じ
設定自体はめっちゃ簡単

OsamuOsamu

とりあえず触ってみる

一旦echo

適当にechoとかを入れてみて検証してみる

.husky/pre-commit
echo "Hello World"

コミットのタイミングでpre-commitに書いたスクリプトが実行されているのがわかる

% git commit -m "test commit"
Hello World
 1 file changed, 2 insertions(+)

buildしてみる

今回はNext.jsのプロジェクトに導入しようと思うので、実際の状況を想定して、ビルドをさせてみることにする(本来はpushのタイミングで行いたいが、先に一旦テストとしてcommitのタイミングで確認)

以下を追加↓

.husky/pre-commit
npm run build

if [ $? -ne 0 ]; then
  echo "Error: Build failed."
  exit 1
fi

ちゃんとビルドされて、その後にコミットされているのがわかる↓

% git commit -m "test commit"

> test-project@0.1.0 build
> next build

   ▲ Next.js 15.3.2

   Creating an optimized production build ...
 ✓ Compiled successfully in 0ms
 ✓ Linting and checking validity of types    
 ✓ Collecting page data    
 ✓ Generating static pages (4/4)
 ✓ Collecting build traces    
 ✓ Finalizing page optimization    

Route (app)                                 Size  First Load JS    
┌ ○ /                                      136 B         101 kB
└ ○ /_not-found                            977 B         102 kB
+ First Load JS shared by all             101 kB
  ├ chunks/4bd1b696-67ee12fb04071d3b.js  53.2 kB
  ├ chunks/684-819c3ec28c575323.js       45.9 kB
  └ other shared chunks (total)          1.89 kB


○  (Static)  prerendered as static content

 1 file changed, 6 insertions(+), 1 deletion(-)

落ちる場合だと以下の感じ↓

% git commit -m "test failed commit"

> test-project@0.1.0 build
> next build

   ▲ Next.js 15.3.2

   Creating an optimized production build ...
Failed to compile.

./app/page.tsx
Error:   x Parenthesized expression cannot be empty
   ,-[/test-project/app/page.tsx:2:1]
 1 |     export default function Home() {
 2 | ,->   return (
 3 | `->   );
 4 |     }
   `----

Caused by:
    Syntax Error

Import trace for requested module:
./app/page.tsx


> Build failed because of webpack errors
husky - pre-commit script failed (code 1)
OsamuOsamu

実際に導入してみる

今回はpushする前にビルドをしたいので、commit時のフック(pre-commit)ではなくpush時のフックを使用したい。(毎回commitのタイミングでビルドをしていると結構時間かかって効率が悪いので)

pre-pushファイルを準備して先ほどのpre-commitで書いたコードをそのまま利用する

.husky/pre-commit
npm run build

if [ $? -ne 0 ]; then
  echo "Error: Build failed."
  exit 1
fi

ちゃんとpushのタイミングでビルドできていたので問題なさそう↓

 % git push origin install-husky
Running npm build before push...

> test-project@0.1.0 build
> next build

   ▲ Next.js 15.3.2

   Creating an optimized production build ...
 ✓ Compiled successfully in 0ms
 ✓ Linting and checking validity of types    
 ✓ Collecting page data    
 ✓ Generating static pages (4/4)
 ✓ Collecting build traces    
 ✓ Finalizing page optimization    

Route (app)                                 Size  First Load JS    
┌ ○ /                                      136 B         101 kB
└ ○ /_not-found                            977 B         102 kB
+ First Load JS shared by all             101 kB
  ├ chunks/4bd1b696-67ee12fb04071d3b.js  53.2 kB
  ├ chunks/684-819c3ec28c575323.js       45.9 kB
  └ other shared chunks (total)          1.89 kB


○  (Static)  prerendered as static content

Build successful. Continuing with push...
Enumerating objects: 13, done.
Counting objects: 100% (13/13), done.
Delta compression using up to 10 threads
Compressing objects: 100% (7/7), done.
Writing objects: 100% (10/10), 1.25 KiB | 1.25 MiB/s, done.
Total 10 (delta 4), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (4/4), completed with 3 local objects.
remote: 
remote: Create a pull request for 'install-husky' on GitHub by visiting:
remote:     *****
remote: 
To ******
 * [new branch]      install-husky -> install-husky
OsamuOsamu

他にはどのようなフックがあるか?

HuskyはクライアントサイドのGitが対応しているフック13種類全部が使える

  • Supports:
    • macOS, Linux, Windows
    • Git GUIs, Node version managers, custom hooks directory, nested projects, monorepos
    • All 13 client-side Git hooks

https://typicode.github.io/husky/#features

まとめてもらうと以下の感じ

フック名 発火タイミング / 代表的な使い道
applypatch-msg git am でパッチ適用前、コミットメッセージを検査・整形
pre-applypatch パッチ適用後・コミット前にテスト実行など
post-applypatch パッチ+コミット完了後に通知やログ出力
pre-commit コミット直前。ESLint・Prettier・ユニットテストなど最頻出
prepare-commit-msg 生成されたデフォルトメッセージを編集(テンプレ自動挿入など)
commit-msg 最終メッセージ検証(Conventional Commits / commitlint など)
post-commit コミット完了後。Slack 通知やバージョンファイル更新など
pre-rebase リベース開始前。保護ブランチのリベース禁止など
post-checkout ブランチ切替・ファイル checkout 後。依存インストールのトリガーに
post-merge git pull/マージ成功後。ファイル生成・キャッシュ再構築など
pre-push リモートへ送る直前。テスト・型チェックが失敗すると push を中断
pre-auto-gc Git が自動 GC を走らせる前。容量監視やバックアップに
post-rewrite commit --amendrebase で履歴を書き換えた後の後処理

詳しくはこちらのGitのドキュメントを参考にする

https://git-scm.com/docs/githooks#_hooks

このスクラップは2025/05/29にクローズされました