Hooksで編集後のフォーマットを自動化する | 実践講座

今回やること

この記事では、Claude CodeのHooksを使って、編集後にフォーマットを実行する考え方を確認します。

Hooksは実行されるコマンドなので、最初は学習用プロジェクトで軽いコマンドから試します。

Hooksの設定形式やイベント名は、公式ドキュメントで確認します。

https://code.claude.com/docs/en/hooks

記事の例をそのまま本番環境に入れるのではなく、公式と自分の環境に合わせます。

Hooksに入れる前に、コマンド単体で動くか確認します。

npm run format

または、プロジェクトに合うコマンドを使います。

npx prettier --write .

手動で失敗するコマンドをHooksに入れると、毎回失敗します。

編集後に実行したい場合、考え方は次のようになります。

{
  "hooks": {
    "PostToolUse": [
      {
        "matcher": "Edit|Write",
        "command": "npm run format"
      }
    ]
  }
}

この例は、編集や書き込みの後にフォーマットを実行するイメージです。実際の設定形式は公式ドキュメントを確認します。

最初からリポジトリ全体をフォーマットすると、差分が大きくなる可能性があります。

npx prettier --write src/example.ts

または、変更ファイルだけを対象にする仕組みを検討します。

Hooksに重い全体フォーマットを入れる前に、変更ファイルだけで動かせるかを考えます。

Hooksを入れた後は、AIの変更だけでなく、Hookによる変更も確認します。

git diff

フォーマット差分が大量に出た場合は、設定範囲を狭めます。

Hooksが失敗したときに、作業を止めるのか、警告にするのかを決めます。

Hooksを使うと、Claude Codeの編集後にフォーマットや検証を自動実行できます。まずは手動でコマンドが動くことを確認し、学習用プロジェクトで軽い範囲から試します。差分が大きくなりすぎないよう、対象範囲と失敗時の扱いを設計します。