はじめに
Anthropic Academyの学習コンテンツでは、API開発ガイドからエンタープライズデプロイメントのベストプラクティスまでカバーしているとのこと。
Featured courses, Build with Claude, Claude for work, Claude for personalというメニューがある。
私は、Claude Codeを本格的に使って数ヶ月で、かなり自己流なので、Featured courceのトップのClaude code in Actionで、本家が推奨する使い方を一から学んでみることにした。
Anthoropic Academyの元ネタはこちら
Claude Code in Actionをざっくりまとめてみる
AIコーディングアシスタントとは
- AIモデルと人の間でツール（ファイル操作など）を利用するのがアシスタント
- Claudeの特徴は、複雑無タスクに強く、拡張性があり、セキュリティが高いこと
Adding Context: Claudeへの基本的な情報の与え方
- /initでプロジェクトの全体像を読んでもらう
- # …で指示をメモリーに書き込む。CLAUDE.mdはプロジェクト用で、他にプライベート用、グローバル用がある
- @でファイルリストからファイルを選択すると、検索対象を狭めることができる
サンプルコードに変更を加えてみる
- Claudeのターミナルに画像をペーストして指示できる
- 通常モードとプランモードがあり、Shift+Tab２回でプランモードに入れる
- Thinkレベルを指示できるけど、レベルを上げるとトークンの消費量が上がる(Think, Think more, …, Ultrathink)。Thinkレベルはモードではなく、think hardとか言うと深く考えるようになる
Controlling Context: Claudeへの上手い指示のやり方
- ミスがあれば、Escapeで途中中断し、軌道修正する。#で次からはこうしてとルールを追加する
- 試行錯誤があった場合、Escapeを２回押し、以前の会話へ戻る
- /compactコマンドで、これまでの会話の要点だけまとめる
- /clearコマンドで会話の履歴を全て削除する
カスタムコマンドの作り方
- .claude/commands/{command name}.md を作る。audit.mdの場合、/auditで呼び出せるようになる
- コマンドファイルの中に、ゴール、ステップ、規約などを記述する。claudeの再起動が必要
- コマンドファイルの中に、$ARGUMENTSを書き、引数を受け取れるようにできる
MCPサーバーの使い方
MCP以外の部分で、前提知識がないと、非常にわかりづらかった。
Playwrightとは、JSでよく使われるE2Eテストライブラリであり、ブラウザの操作もできるSereniumのような存在。今回、PlaywrightをclaudeからMCPサーバーとして呼べるようにしている。
- 以下のコマンドで、Claudeとplaywrightを接続している。次回のclaude起動時に、toolとしてplaywrightの使えるようになる
% claude mcp add playwright npx @playwright/mcp@latest- .claude/settings.local.jsonに以下を記述すると、claudeとの対話でのplaywrightの権限チェックをスキップできる
{
"permissions": {
"allow": ["mcp__playwright"],
"deny": []
}
}- 以下のような指示をする
Navigate to localhost:3000,
generate a basic component,
review the styling,
and update the generation prompt at @src/lib/prompts/generation.tsx
to produce better components going forward.- 肝は、playwrightを使えとは言ってないのに、Claudeが判断して、画面の結果を見て、見た目の判断をしているところ。
- デフォルトでは、料金表を作ってくるが、商品レビューを作ってと指示すると、以下が作成された
Github連携
- 事前にCLIにghのインストールやログインが必要、サンプルソースのgithubレポジトリを作っておく
- ClaudeのAPI keyを作っておく
- /install-github-appでデフォルトのgithub actionを作成し、PRを作るところまでやってくれる。
- .github/workflows/claude.yml は、@claudeでissueやPRにタスクを指示できる
- claude-code-review.ymlは、PRを自動でレビューする
- github actionのカスタマイズ例が紹介されているが、設定はかなり難しそう。
- custom_instructionsを追加して、mcp__playwrightを使うようにプロンプトを記述する
- mcp_configで、MCPサーバーの設定を記述する
- allowed_toolsで、権限設定を記述する
- ビデオでは、トグルボタンを修正するissueを作り、@claudeにテストするように指示していた
- github action内で、claudeがTODOリストを作り実行していた。
Hooksの基本
- Claudeがツールを使う前と後に、PreToolUse, PostToolUseのHookを呼べる
- HooksでClaudeに勝手なことをさせないように制御する（アクセス制限、コード整形、自動テスト、バリデーション、ロギングなど）
- GlobalやProjectのsettings.jsonファイルで設定できる
Hooksの設計
- Hookのタイミング（ツールの前か後）、対象ツール（Read, Write, MCPなど）、コマンドの作成、フィードバックの返却を決める
- Hookが実行するコマンドは、Claudeからは独立した自作のプログラムである
- Claudeから標準出力へJSONデータが送られるので、コマンドはそれを受け取って判断する
- コマンドは、exit code 0が成功、2がブロック(Pre用)、それ以外はエラーとして取り扱われる
- 標準エラーログがClaudeへフィードバックされる
Hooksの実装
- .envを読もうとするとエラーになるhookの実装を紹介
- settings.local.jsonでRead|Grepの時に、./hooks/read_hook.jsを呼び出し、pathに.envを含んでいる場合、exit code 2を返すように実装している
- claudeのターミナルから、Read the .env fileとリクエストすると、エラーになる
セキュアなHookのためのベストプラクティス
- 入力のバリデートとサニタイズ
- 変数は””で囲む
- ファイルパスに..がないか確認する
- スクリプトは絶対パスで指定する
- センシティブなファイルはスキップする
これを実現するため、サンプルソースは、settings.example.jsonを提供し、npm run setupにより、$PWDが置換され、settings.local.jsonを作成するように実装されている
役にたつHookの例
- 関数に引数を追加したが、それにより他が壊れたことを検知するHook
- 大規模なプロジェクトで、同じようなDBクエリーを書いた場合、それを検知してエラーを出すHook
- Hookの中で、プロンプトを作成し、新たなClaudeをローンチして確認させるテクニックが紹介されている
Hookの追加情報
Notification,Stop,SubagentStop,PreCompact,UserPromptSubmit,SessionStart,SessionEndなどのHookがある- それぞれにHoook inputのjsonのフォーマットが大きく異なる
- 以下のように、ログを取得するヘルパーHookを作っておくと便利
"PostToolUse": [ // Or "PreToolUse" or "Stop", etc
{
"matcher": "*",
"hooks": [
{
"type": "command",
"command": "jq . > post-log.json"
}
]
},
]Claude Code SDKの使い方
- CLI, TypeScript, Pythonで使用できる
- sdk.tsにプロンプトを書き、SDKに渡すコードを書き、npm run sdkで実行する例