📚

husky を使用して作業の重複を改善

2025/01/24に公開

husky とは?

Git のフック(コミットやプッシュ、マージなどの特定タイミングで実行されるスクリプト)を、JavaScript/TypeScript のプロジェクトで簡単に管理できるようにするツールです。
たとえば、コミット前にコードの整形やテストを実行したり、プッシュ前に追加のチェックを入れたりといった自動化を、設定ファイルに書くだけで行えるようになります。

導入方法

https://zenn.dev/nozomi_iida/articles/20230223_setup_huskey

問題点

現状のプロダクトでは、フロントエンドとバックエンドが完全に別れて開発しています。
バックエンドのAPIが変更・修正されるとフロントエンドはその変更を取り込み swagger を生成して、フロントエンドで使用する openapi の型ファイルを生成してます。
ここで問題となるのが下記4点です。

  1. swagger の更新を忘れてAPIドキュメントを見に行ってから swagger の更新忘れに気付いて swagger の更新をする
  2. swagger の更新を個々で行わないといけない
  3. swagger の更新を忘れて openapi の型ファイルを生成すると、openapi の型ファイルが最新ではない状態になる
  4. openapi の型ファイルの生成を個々で行わないといけない

問題点は、人に頼った作業であり、その作業が各人でする必要のない重複した作業であるというこでした。

husky の修正

husky では、テスト・lint・prettier などを自動化していたのでそこへ追加していきます。

openapi の型ファイルの再生成

バックエンドファイルのAPIに関する部分へ変更があった場合に openapi の型ファイルを再生成するようにコード記述します。(pre-push にするか pre-commit にするかは各々判断してください。)

注意点としては、swagger を再生成したあとに下記コードを実行しないと意味がないです。(今回は、すでに swagger の再生成は記述されていたので省いています。)

pre-commit
# frontend の openapi の型ファイルを生成
if [ ${#backendFiles} -gt 0 ]; then
  echo "frontend の openapi の型ファイルを生成"
  cd ../frontend # frontend ディレクトリに移動
  npm run generate
  if [ $? -gt 0 ]; then
    echo "frontend の openapi の型ファイルを生成に失敗しました"
    exit 1
  fi
  git add "openapi.d.ts" # 変更がない場合はスルーされる
  cd ../backend # 元の backend ディレクトリに戻る
fi

pull するときに openapi の型ファイルを生成

.husky/post-merge を作成して、バックエンドファイルのAPIに関する部分へ変更があった場合に swagger を再生成するようにコード記述します。

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

# 変更ファイルを取得(ORIG_HEADHEAD の差分を見る)
# 'backendFiles' には grep で絞り込みたいパスのパターンを入れてください。
backendFiles=$(git diff-tree -r --name-only --no-commit-id ORIG_HEAD HEAD | grep -E "app/|routes/" || true)

# backendFiles 変数の長さが 0 より大きければ(つまり差分があれば)処理を実行
if [ ${#backendFiles} -gt 0 ]; then
  echo "Start Make l5-swagger ..."
  ./vendor/bin/sail artisan l5-swagger:generate

  # コマンドが失敗したらフックをエラー終了させる
  if [ $? -ne 0 ]; then
    echo "l5-swagger generate でエラーが発生しました"
    exit 1
  fi
fi

# 問題なければ終了
exit 0

効果

swagger と openapi 型ファイルの再生成に関しての実行を人がする必要がなくなりました。

  • バックエンドの変更のコミット時にフロントで使用する型ファイルを生成するようになりました。
  • ブランチを pull するさいに swagger を再生成して常に最新の状態になるようにしました。

今まで、個々でやっていた作業を husky で自動化することによって無駄を削減でき、新しい人がジョインしてもこの部分に関しては考える必要がなくなりました。

Discussion