Claude Code、ちょっとした工夫で開発体験が変わる

KAG AI Week Day 1
https://kddi-agile.connpass.com/event/382401/

Transcript

1. 2025.02.16 Claude Code、ちょっとした工夫で開発体験 が変わる KDDIアジャイル開発センター 南川虎之介 1
2. 自己紹介 南川 虎之介（とら） KDDIアジャイル開発センター ソフトウ ェアエンジニア 1年目 札幌出身 / 神奈川在住 最近は仕様駆動開発とAI-DLCをやってい る 趣味: 野球観戦、麻雀、旅行 Twitter: @fun_tora_ 2
3. こんな使い方してない？ あなた: コード書いて Claude: はい、書きました あなた: レビューして Claude: はい、見ました あなた: テスト書いて Claude: はい、書きました もったいない！Claude Codeはもっと賢く使える！ 3
4. 今日紹介する活用術 1. Hooks - 「お願い」から「強制実行」へ 2. メモリ管理 - Claudeの記憶を整理する 3. Skills - 再利用できるレシピ集 4. 公式プラグイン - 安心して使えるツール群 5. 便利なショートカットとコマンド 6. /insights - AIがあなたの使い方をレビュー 4
5. Hooks 「お願い」から「強制実行」へ 5
6. Hooks - Before（お願いベース） あなた: ファイル編集したらフォーマットかけてね Claude: わかりました！ ファイル編集したら必ず動いてほしいですよね 6
7. Hooks - After（Hooksで強制） // .claude/settings.json { "hooks": { "PostToolUse": [ { "matcher": "Edit|Write", "hooks": [{ "type": "command", "command": "npx prettier --write \"$file_path\"" }] } ] } } ファイルを編集したら自動でフォーマッターが走る！ 7
8. Hooksの活用例 ユースケース Hook 効果 自動フォーマット PostToolUse (Edit) 保存時に自動整形 ファイル保護 PreToolUse (Edit) migrations/への書き込みブロック テスト自動実行 PostToolUse (Edit) 変更時にテスト実行 デスクトップ通知 Notification Claudeの待機を通知で受け取る 設定方法 /hooks # 対話的に設定 code .claude/settings.json # 設定ファイルを直接編集 8
9. メモリ管理 Claudeの記憶を整理する 9
10. CLAUDE.md 肥大化してない？ # フロントエンド規約 ...100行... # バックエンド規約 ...100行... # テスト規約 ...100行... # セキュリティ規約 ...100行... 長すぎて管理できない 毎回全部読み込まれてコンテキスト圧迫！ 10
11. サブディレクトリのCLAUDE.mdは遅延ロード project/ ├── CLAUDE.md # 起動時にロード ├── src/ │ └── CLAUDE.md # src/のファイル操作時にロード └── tests/ └── CLAUDE.md # tests/のファイル操作時にロード 必要なときだけ読み込まれる = コンテキスト節約！ 11
12. .claude/rules/ でモジュール化 your-project/ ├── .claude/ │ └── rules/ │ ├── frontend/ │ │ ├── react.md # React規約 │ │ └── styles.md # CSS規約 │ ├── backend/ │ │ ├── api.md # API設計 │ │ └── database.md # DB操作 │ ├── testing.md # テスト規約 │ └── security.md # セキュリティ要件 トピックごとにファイル分割！ 12
13. パス指定で条件付きルール --- paths: - "src/api/**/*.ts" --- # API開発ルール - すべてのエンドポイントで入力バリデーション必須 - 標準エラーレスポンス形式を使用 - OpenAPIドキュメントコメントを含める APIファイルを触るときだけ読み込まれる！ 13
14. Skills 再利用できるレシピ集 14
15. 同じフローを毎回プロンプト打ってない？ 「コンポーネント作って → Storybook書いて → テスト書いて」 「Figma見て → マークアップ起こして → レスポンシブ対応して」 「コード読んで → READMEに反映して → CHANGELOGも更新して」 毎回同じ手順を説明するの、面倒 15
16. Skillsとは？ MCPが「キッチン（道具と環境） 」なら、Skillsは「レシピ（手順） 」 MCP: 何ができるか（ツール・データソース） Skills: どうやるか（手順・ワークフロー） 読み込みも賢い！ 起動時: フロントマターの name と description だけロード（軽量） 実行時: Claudeが「このSkillが必要」と判断 → SKILL.md を読む 必要に応じ: 参照ファイル（reference.md等）も都度読み込み 使うものだけコンテキストに入る！ 16
17. Skillsが活きるパターン パターン 向いているケース 順序付きワークフロー 複数ステップを決まった順序で実行 複数MCP連携 Figma→Drive→Linear→Slack 反復改善 バリデーション→修正→再チェック コンテキスト判断 条件によって使うツールを変える ドメイン知識の埋め込み コンプライアンスチェック等 手順書だから、複雑なフローを再現性高く回せる！ 17
18. 例: 順序付きワークフロー --- name: onboarding-customer description: 新規顧客のアカウント作成からウェルカムメールまでを行う。オンボーディングをしたいときに動く。 --- # 顧客オンボーディング ## Step 1: アカウント作成 MCP `create_customer` でアカウント作成 ## Step 2: 決済設定 MCP `setup_payment_method` で決済手段を登録 ## Step 3: サブスクリプション作成 MCP `create_subscription`（Step 1のcustomer_idを使用） ## Step 4: ウェルカムメール送信 MCP `send_email`（welcome_email_template） 18
19. メインセッションから分離してSkill実行 --- name: deep-research description: トピックを徹底調査、ユーザーが調査してほしいと依頼された時に動く context: fork # ← これで分離実行！ agent: Explore # ← 使用するエージェント --- 〜〜〜 メイン会話を汚さずに裏で調査が走る！ 19
20. スクリプトのバンドルも可能 my-skill/ ├── SKILL.md # メイン（必須） ├── reference.md # 詳細ドキュメント └── scripts/ ├── analyze.py # 分析スクリプト └── validate.sh # 検証スクリプト スクリプトは実行されるだけ → コンテキスト消費しない！ 20
21. スキルの作り方は公式ドキュメントを読もう！ A complete guide to building skills for Claude ちなみにCopilotでもSkillsは使える！ 21
22. 公式プラグイン 安心して使えるツール群 22
23. 公式プラグイン anthropics/claude-plugins-official からインストール可能！ /plugin install {plugin-name}@claude-plugins-official # または /plugin > Discover から検索 23
24. 外部連携プラグイン プラグイン 用途 github PR/Issue管理 gitlab GitLab連携 slack メッセージング linear Issueトラッキング asana タスク管理 stripe 決済処理 firebase バックエンド supabase バックエンド playwright ブラウザ自動化 context7 最新ドキュメント参照 24
25. Anthropic製プラグイン カテゴリ プラグイン 開発支援 code-review , pr-review-toolkit , commit-commands , feature-dev コード品質 code-simplifier , security-guidance LSP typescript-lsp , pyright-lsp , gopls-lsp , rust-analyzer-lsp 等 スタイル frontend-design , explanatory-output-style 設定 claude-code-setup , claude-md-management , hookify 25
26. LSPプラグイン - Claudeにコード理解力を LSP (Language Server Protocol) = IDEが裏で使っている「エディタと言語サーバの連携 を標準化する通信プロトコル」 定義ジャンプや参照検索など、IDEの賢さをClaude Codeにも持たせられる /plugin install typescript-lsp@claude-plugins-official 機能 説明 Go to Definition 関数・変数の定義元にジャンプ Find References どこで使われてるか一覧表示 Error Checking 型エラー・構文エラーをリアルタイム検出 26
27. 対応言語（公式プラグイン） 言語 プラグイン TypeScript/JavaScript typescript-lsp Python pyright-lsp Go gopls-lsp Rust rust-analyzer-lsp Java jdtls-lsp Kotlin kotlin-lsp C/C++ clangd-lsp C# csharp-lsp Swift swift-lsp PHP php-lsp 27
28. ショートカットやコマンド 28
29. よく使うショートカット キー 機能 Shift+Tab モード切り替え Option+Enter / Shift+Enter 複数行入力 Esc Esc Rewind Ctrl+S プロンプトをスタッシュ（一時保存） Ctrl+R プロンプト履歴検索 Ctrl+B バックグラウンド実行に切り替え 29
30. 便利コマンド コマンド 用途 /clear セッションをリセット /context セッション内のコンテキスト使用状況を可視化 /compact コンテキストを圧縮 /resume 過去のセッションを再開 /rewind チェックポイントに戻る /copy Claudeの最後のレスポンスをマークダウン形式でコピー /usage トークン使用量を確認 /debug セッションのトラブルシューティング /security-review セキュリティレビュー 30
31. Rewind Esc Esc または /rewind で会話やファイルの変更を任意のチェックポイントまで巻き戻せる 別のアプローチ試すことが気軽にできる New!：ある地点からの会話を要約することができる 目標から逸脱してしまった際に使える！ 31
32. Plan Mode もちろん使ってますよね Shift+Tab → Plan Mode で安全に計画を立てる Tip: settings.json に plansDirectory を指定すると計画ドキュメントの保存先を変更でき る { "plansDirectory": "./plans" } Plan結果をGit管理したい時に便利！ 32
33. /debug - 困ったときのトラブルシューティング /debug hogehogeスキルが発動しなかったのはなぜ？ 問題の原因を特定してくれる ツール実行エラー、権限エラー、MCPの問題などを調査 33
34. /config - Claude Codeの設定を管理 /config 設定項目 説明 例 Language 応答言語 "Japanese" , "関西弁" Auto-compact コンテキスト自動圧縮のON/OFF Notifications 完了通知のON/OFF Output style 出力スタイルの変更 Explanatory , Learning Model デフォルトモデル Opus 4.6, Sonnet 4.5, Haiku 4.5 34
35. /insights AIがあなたの使い方をレビュー 35
36. /insights - 過去30日のレポート /insights 過去30日間のセッション履歴を分析して、HTMLレポートを生成！ セクション 内容 作業内容 何に取り組んでいたかの要約 使い方の傾向 どんな使い方をしているかの全体像 うまくいっていること 効果的に活用できている点 うまくいっていないこと 詰まっている・非効率な点 試してみるべき機能 活用できそうな機能の提案 新しい使い方 具体的なプロンプト例の提案 36
37. 改善提案が参考になるかも タグのバリデーションエラーやフォーマットの問題が発生しており、即座にキャッチできたはず。 → Terraformファイル編集のたびにterraform validateとfmtを自動実行！以下をコピペ: { "hooks": { "postToolUse": [ { "matcher": "Edit|Write", "command": "bash -c 'FILE=\"$CLAUDE_FILE\"; if [[ \"$FILE\" == *.tf ]]; then terraform fmt \"$FILE\" && terraform validate -no-color 2>&1 | head -5; fi'" } ] } } Claudeが誤ったアプローチを選ぶ問題 → こんなプロンプトを打ってみよう！ コピペ可能な設定まで提案してくれる！ 37
38. 今日から使えるチェックリスト [ ] Hooks で自動フォーマット設定（PostToolUse） [ ] .claude/rules/ とpaths指定 で条件付きルールをモジュール化 [ ] Skills を1つ作ってみる [ ] LSPプラグイン をインストール [ ] Ctrl+S でプロンプトスタッシュ [ ] /config で Language を関西弁に（？） [ ] /insights で月1セルフレビュー 38