AISHA
Introducing hooks
Misaki's LAB

Claude Code in Action|非エンジニアがフックを実装|CCA学習記録

misaki-lab / claude-code-in-action.md

この投稿は、私、伊東美沙貴(AISHA株式会社)がClaude認定資格(CCA)取得に向けて学習した記録です。

今日はClaude Code in Actionを120分ほど学習します。
ここに書いていることは私が読んで理解したことのメモ書きです。

(翻訳や意図を間違えている場合があります)

参考URL: Claude Code in Action
結果:修了しました (May 4, 2026)(クイズ8問)

Introducing hooks

Claude Codeが何かをする前後に、自動的に別のプログラムを実行できる仕組み
(料理で例えると、料理の前に”手を洗う”、料理が終わったら”テーブルを拭く”)
hooksを使うと、Claudeがツールの実行を試みる前または後にコマンドを実行できる。
hooksのタイプは2つある。

  • PreToolUse:ツールが実行される前に実行する
  • PostToolUse:ツールが実行された後に実行する

hooks構成はClaude設定ファイルで定義されている。

  • ~/.claude/settings.json:グローバル(全てに影響)
  • – .claude/settings.json:チームと共有
  • – .claude/settings.local.json:個人設定

Hooksの実際の使い方

  • コード整形:Claudeがファイルを編集したら自動でキレイに整える
  • テスト自動実行:ファイルが変わったら自動でテストを走らせ
  • アクセス制限:特定のファイルは読ませない・触らせない
  • 品質チェック:書いたコードにリンターをかけてフィードバッ
  • ログ記録:どのファイルを変更したか記録を残す
  • ルール検証:命名規則やコーディング規約に違反していないか確認

ハンズオン教材
実際に手を動かして .env を守るフックを作る

ターミナルでClaudeを起動し「pwd」コマンド

  • Print = 表示する
  • Working = 作業中の
  • Directory = フォルダ

非エンジニアですが、Claude Codeのフックを自力で実装してみました。

Claude Codeのフックを自力で実装した

答え合わせをしたら、模範解答より精度の高いコードができていました。

最近のトレンドでは、.envには「参照先」だけ書く → 本物の値は1PasswordのSecret ReferencesとかGoogle Secret Managerとか、別のところに置き、読まれても何もない状態を作るのがトレンドなのか・・・
例:API_KEY=op://MyVault/⚫︎⚫︎⚫︎⚫︎⚫︎/api-key

Claudeにどっちが安全?と聞いたら、hooksとpermissions.deny(全ツール対策)と、1PasswordのSecret Referencesと三重防御がいいとのこと。

【次回の課題】
Claudeに1Passwordと連携して.envの値を参照する方法を教えてもらう

重要:Readだけブロックしても完全ではない

  • Grep:別の入力形式(複数ファイルを横断検索)。Claudeに気づかれずにGrepで抜かれる可能性があるから、これもブロックが必要
  • Bashcat .envで読める。「.envの中身を全部見せて」というコマンド

【失敗談】最初に npm run setup を実行する必要があった。
これは「必要なパッケージのインストール」と「設定ファイルの自動生成」を一発でやってくれるコマンド。知らずに手動で絶対パスを書き換えて解決したが、正しい手順を後から学んだ。

【セットアップの正しい手順】

  1. cd queries(フォルダに移動)
  2. npm run setup(準備を一括実行)
  3. claude(Claude Code起動)

settings.local.jsonに書くもの

{
"hooks": { ... },
"permissions": {
"deny": [
"Read(**/.env)"
]
}
}

便利なフック2選

hooksはセキュリティ以外にも、コード品質を自動で保つために使える。
特に大規模プロジェクトで役立つ2つを学んだ。

① TypeScript型チェックフック(PostToolUse)

解決する問題:
Claudeが関数を変更したとき、その関数を呼び出している他のファイルを更新し忘れて型エラーが起きても気づかない。

仕組み:

  • ファイルを編集するたびに自動でTypeScriptコンパイラを実行
  • エラーを検出したら即座にClaudeにフィードバック
  • Claudeが他のファイルも修正する

TypeScript以外の言語でも、自動テストで同様の仕組みが作れる。

② クエリ重複防止フック(PostToolUse)

解決する問題:
既に同じ機能のコードがあるのに、Claudeが新しく同じものを作ってしまってコードが重複する。

仕組み(ClaudeがClaudeをレビューする!):

  • queriesフォルダが編集される
  • 別のClaudeインスタンスを自動起動
  • 「似たようなコード、もう既にあるよね?」と確認させる
  • 重複があれば元のClaudeにフィードバック
  • 元のClaudeが重複を削除して既存コードを使う

2つのフックのトレードオフ

型チェックフック 重複防止フック
速度 ✅ 速い ⚠️ 遅い
コスト ✅ 低い ⚠️ API使用量が増える
効果 型エラー防止 コード重複防止

重要なフォルダだけに絞って使うのがおすすめ。オーバーヘッドとメリットのバランスが大事。

フックで実現できる広い原則

  • コンパイラ・リンターの出力で即時フィードバック
  • 別々のAIインスタンスでコードレビューを自動化
  • 一貫性が重要な高価値フォルダだけを監視
  • 自動化の利益とパフォーマンスコストのバランスを取る

 

Agent SDK

Agent SDKは、自分のプログラムから自動で動かせるようになる。
TypeScriptとPythonに対応。

普通のClaude Code Agent SDK
操作方法 ターミナルで対話 プログラムから自動実行
向いている用途 一回一回の作業 繰り返し・自動化

インストール手順

 mkdir sdk-demo cd sdk-demo npm init -y npm install @anthropic-ai/claude-agent-sdk 

パッケージ名の注意:

  •  正:@anthropic-ai/claude-agent-sdk
  • 誤:@anthropic-ai/claude-code(これはCLI本体で、importできない)

最小限のコード例

 import { query } from "@anthropic-ai/claude-agent-sdk"; const prompt = "List the files in the current directory"; for await (const message of query({ prompt })) { console.log(JSON.stringify(message, null, 2)); } 

「カレントディレクトリのファイル一覧を出して」とClaudeに指示して、返ってきたメッセージを順番に表示する。

ツールを制限することもできる

 for await (const message of query({ prompt, options: { allowedTools: ["Read", "Glob"] }, })) { // ... } 

「ReadとGlobだけ使っていいよ」と制限できる。セキュリティ上大事。

SDKはCLIと同じ機能(カスタムシステムプロンプト・MCPサーバー・フック・サブエージェント・セッション再開)をすべてサポートしている。

Writer

伊東 美沙貴

AISHA株式会社

伊東 美沙貴

AI × ECプロデューサー・デザイナー

2002年よりWeb制作に従事。「人とAIが出会う場所(画面・音声・体験)をデザインする」をテーマに、中小企業のAI・EC活用を支援。

「いつも現場で、挑戦する人でありたい」

自社の実験サイトでAI時代のECを検証・実装中。JECCICA ECデザイン大賞3年連続受賞。週末は空手家。

Google Cloud認定「Generative AI Leader」
Microsoft 認定「AI 変革リーダー」「AI Business Professional」
大阪市立大学大学院 情報メディア環境研究分野 修了(修士)

Leave a Comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA