Slide 1

Slide 1 text

Claude Code 再入門 Claude Code Meetup 2025年7月17日 ぬこぬこ 1 / 41

Slide 2

Slide 2 text

障害の影響を受けた方✋ タイムラインが悲しみの海に沈んだ今日の午後 1 / 41

Slide 3

Slide 3 text

今日話すこと Claude Code 関連の公式情報はどこにあるか 公式ドキュメントの内容を全部のせ 今日話さないこと 他のコーディングエージェントの話(e.g. Kiro) 開発生産性について それぞれの Tips 1 / 41

Slide 4

Slide 4 text

Claude Code の一次情報 だいたいこの四つを見ておけば OK 1. 公式ドキュメント 日本語版は少し反映が遅れていることがある。また、個人的には誤訳が散見されるので原文を。 https://docs.anthropic.com/en/docs/claude-code/overview 2. GitHub リポジトリ https://github.com/anthropics/claude-code 3. Claude Code: Best practices for agentic coding https://www.anthropic.com/engineering/claude-code-best-practices 4. Anthropic Academy https://anthropic.skilljar.com/ 1 / 41

Slide 5

Slide 5 text

更新情報はどこに? Claude Code の GitHub リポジトリにある CHANGELOG.md に更新情報が記載 https://github.com/anthropics/claude- code 🐇の方は CHANGELOG.md を読みましょう 🐢の方は /release-note を読みましょう 1 / 41

Slide 6

Slide 6 text

Claude Code: Best practices for agentic coding 2025 年 4 月 18 日 に公開された Claude Code のベストプラクティス CLAUDE.md の書き方、編集権限の与え方、 gh コマンド、MCP への接続、思考予算 (thinking budget)の明示的な指定、TDD、 Puppeteer MCP、YOLO モード、コードベー スQ&A、Jupyter Notebook、ヘッドレスモ ード、並列実行など https://www.anthropic.com/engineering/claude-code-best- practices 1 / 41

Slide 7

Slide 7 text

Anthropic Academy Anthropic が公式で提供している学習教材 ご存知の方はどのくらい? ひと通り見たという方はどのくらい? 各章のコンテキストを入れて Claude で FAQ 1. Claude with the Anthropic API 2. Claude with Amazon Bedrock 3. Claude with Google Cloud’s Vertex AI 4. Introduction to Model Context Protocol 5. Model Context Protocol: Advanced Topics 6. Claude Code in Action https://x.com/schroneko/status/1942987150842286374 1 / 41

Slide 8

Slide 8 text

Claude Code overview 30 秒で始める Claude Code Claude Code にできること 1. 機能を説明から実装する 2. デバッグと修正 3. コードベースのナビゲート(FAQ) 4. 面倒なタスクの自動化(リントの修正やコンフ リクト、リリースノートなど) なぜ開発者が Claude Code を好むか 1. Terminal 上で動作する 2. ファイルの編集や作成、コミット、MCP など のアクションを実行できる 3. UNIX 哲学 4. エンプラ対応 ちなみに、ブラウザの URL 入力欄に CLAUDE.md と入れるとこのページにリダイレクトされます https://docs.anthropic.com/en/docs/claude-code/overview npm install -g @anthropic-ai/claude-code cd your-awesome-project claude 1 / 41

Slide 9

Slide 9 text

Quickstart 前提条件とインストール Terminal、Node.js 18 以上、プロジェクト npm install -g @anthropic-ai/claude-code cd /path/to/your/project && claude Step 1-3: 基本的な使い方 Step 4-6: コード変更とGit操作 https://docs.anthropic.com/en/docs/claude-code/quickstart Step 7: その他のワークフロー Essential commands claude - インタラクティブモード開始 claude "task" - 一回限りのタスク実行 claude -p "query" - 一回限りのクエリ claude -c - 最新の会話を継続 claude -r - 以前の会話を再開 claude commit - Git コミット作成 /clear - 会話履歴をクリア /help - 利用可能なコマンドを表示 > このプロジェクトは何をするものですか? > フォルダ構造を説明してください > 変更したファイルはどれですか? > わかりやすいメッセージで変更をコミットしてください > 計算機能のユニットテストを書いてください > 私の変更をレビューして改善点を提案してください 1 / 41

Slide 10

Slide 10 text

Common workflows コードベースの理解 バグの効率的な修正 コードのリファクタリング テストの作成 プルリクエストの作成 ドラッグ&ドロップで画像を追加 ドラッグ&ドロップで画像を追加 この画像は何を示していますか? このスクショのUI要素を説明してください https://docs.anthropic.com/en/docs/claude-code/common-workflows > このコードベースの概要を教えてください > ユーザー認証を処理するファイルを見つけてください > npm test を実行すると エラーが発生します > user.ts の @ts-ignore を修正する方法を提案してください > コードベースで非推奨APIの使用を見つけてください > utils.js をモダンなJavaScriptにリファクタリングしてください > NotificationsService.swift でテストされていない関数を見つけてくだ > 通知サービスのテストを追加してください > 認証モジュールに加えた変更を要約してください > PR を作成してください 1 / 41

Slide 11

Slide 11 text

Claude Code SDK CLI・TypeScript・Python から Claude Code を呼び出すことができる 単純なプロンプトの実行から JSON 形式での出力、ストリーミングレスポンスまで対応 出力形式は Text、JSON、Stream JSON の 3 種類 認証方法は Anthropic API キー、AWS Bedrock、Google Vertex AI CLI で使う場合は、CLI の引数をオプションとして指定できる https://docs.anthropic.com/en/docs/claude-code/sdk # ファイル処理 cat mycode.py | claude -p "このコードのバグをレビューしてください" # セッション管理 claude -p "新しいプロジェクトを初期化してください" --output-format json | jq -r '.session_id' # MCP連携 claude -p "プロジェクトの全ファイルを一覧表示してください" --mcp-config mcp-servers.json 1 / 41

Slide 12

Slide 12 text

Get started with Claude Code hooks フック設定の基本構造 設定ファイルに JSON 形式で記述 フックイベント PreToolUse - ツール実行前(ブロック可能) PostToolUse - ツール実行後 Notification - 通知送信時 New: UserPromptSubmit - ユーザがプロンプ トを送信した時(ドキュメントにはない) Stop - エージェント応答完了時 SubagentStop - サブエージェント完了時 PreCompact - コンパクト操作前 https://docs.anthropic.com/en/docs/claude-code/hooks { "hooks": { "PreToolUse": [ { "matcher": "Bash", "hooks": [ { "type": "command", "command": "echo 'Bashコマンドが実行されます'" } ] } ] } } 1 / 41

Slide 13

Slide 13 text

Claude Code GitHub Actions GitHub の PR や Issue で @claude メンションによる AI 駆動の自動化 /install-github-app コマンドでの簡単セットアップ Issue の内容から自動的に PR を作成 既存のコードパターンと CLAUDE.md ガイドラインに従う AWS Bedrock や Google Vertex AI との連携も可能 セキュリティ面での注意が必要(API キーの管理、権限設定) https://docs.anthropic.com/en/docs/claude-code/github-actions 1 / 41

Slide 14

Slide 14 text

Model Context Protocol (MCP) STDIO サーバーの追加 SSE サーバーの追加 HTTP サーバーの追加 サーバー管理 スコープ local (デフォルト) - 現在のプロジェクトの個 人設定 project - チーム共有設定(.mcp.json ファイ ル) user - 全プロジェクトで利用可能な個人設定 https://docs.anthropic.com/en/docs/claude-code/mcp claude mcp add [args...] claude mcp add my-server -e API_KEY=123 -- /path/to/server arg claude mcp add --transport sse claude mcp add --transport sse sse-server https://example.com/s claude mcp add --transport http claude mcp add --transport http http-server https://example.com claude mcp list claude mcp get my-server claude mcp remove my-server 1 / 41

Slide 15

Slide 15 text

Troubleshooting Windows WSL での npm config set os linux や --force --no-os-check フラグ Linux での権限エラーは claude migrate-installer でローカルインストール 自動更新の無効化は claude config set autoUpdates false --global 繰り返し権限プロンプトは /permissions コマンドで設定 認証問題は /logout 後の再認証、または auth.json の削除 パフォーマンス問題は /compact でコンテキストサイズ削減 https://docs.anthropic.com/en/docs/claude-code/troubleshooting 1 / 41

Slide 16

Slide 16 text

Enterprise deployment overview 30秒でインストール(Node.js 18以上、npm でグローバルインストール) 自然言語からのコード生成、バグ修正、コードベースナビゲーション ターミナルで動作し、ファイル編集やコマンド実行が可能 Unix 哲学に基づく構成可能でスクリプト化可能な設計 Anthropic API、AWS Bedrock、Google Vertex AI 対応 エンタープライズ級のセキュリティ、プライバシー、コンプライアンス https://docs.anthropic.com/en/docs/claude-code/enterprise-deployment 1 / 41

Slide 17

Slide 17 text

Claude Code on Amazon Bedrock AWS アカウントと Bedrock での Claude モデルアクセス許可が必要 AWS CLI、環境変数、SSO プロファイル、Bedrock API キーでの認証設定 CLAUDE_CODE_USE_BEDROCK=1 環境変数で有効化 awsAuthRefresh で SSO ブラウザフロー設定 awsCredentialExport で JSON 形式の認証情報出力 IAM 権限設定とリージョン指定が重要 https://docs.anthropic.com/en/docs/claude-code/amazon-bedrock 1 / 41

Slide 18

Slide 18 text

Claude Code on Google Vertex AI GCP プロジェクトで Vertex AI API の有効化が必要 Claude モデルへのアクセス申請(24-48時間の承認待ち) CLAUDE_CODE_USE_VERTEX=1 環境変数で有効化 us-east5 リージョンでの利用を推奨(クォータ割り当て必要) Google Cloud 認証で動作( /login や /logout は無効) aiplatform.user ロールによる IAM 権限設定 https://docs.anthropic.com/en/docs/claude-code/google-vertex-ai 1 / 41

Slide 19

Slide 19 text

Corporate proxy configuration HTTPS_PROXY や HTTP_PROXY 環境変数で基本設定 Basic 認証は URL 内に username:password を含める SSL 証明書の問題への対処が必要な場合がある NO_PROXY 環境変数は未サポート SOCKS プロキシは未サポート 高度な認証は LLM Gateway サービスの利用を検討 https://docs.anthropic.com/en/docs/claude-code/corporate-proxy 1 / 41

Slide 20

Slide 20 text

LLM gateway configuration 企業環境での Claude Code 利用を支援する中間サービス API リクエストのルーティング、認証、ロギング、フィルタリング Anthropic API、AWS Bedrock、Google Vertex AI への統一インターフェース 使用量制限、コスト管理、コンプライアンス要件への対応 複数のプロバイダーでの負荷分散とフェイルオーバー 企業のセキュリティポリシーとの統合 https://docs.anthropic.com/en/docs/claude-code/llm-gateway 1 / 41

Slide 21

Slide 21 text

Development containers VS Code と Remote - Containers 拡張機能 をインストール、Claude Code リファレンス 実装 をクローン、リポジトリを VS Code で開 く、 「Reopen in Container」をクリック 設定ファイル devcontainer.json - コンテナ設定、拡張機 能、ボリュームマウント Dockerfile - コンテナイメージとツールの定義 init-firewall.sh - ネットワークセキュリティル ール --dangerously-skip-permissions コンテナの強化されたセキュリティ機能により 権限プロンプトをバイパス 信頼できるリポジトリでのみ使用を推奨 利用例 分離されたプロジェクトでクライアントワーク チームオンボーディング CI/CD 環境(開発環境=本番環境) https://docs.anthropic.com/en/docs/claude-code/devcontainer 1 / 41

Slide 22

Slide 22 text

Set up Claude Code ここから Admin の話で私はよくわからないので適当に飛ばします Node.js 18以上の前提条件、npm でのグローバルインストール API キー設定と認証プロセス 自動更新機能と手動更新オプション claude doctor コマンドでの環境診断 設定ファイルとディレクトリ構造の理解 アンインストールとクリーンアップ手順 https://docs.anthropic.com/en/docs/claude-code/setup 1 / 41

Slide 23

Slide 23 text

Identity and Access Management /permissions コマンドでの権限設定と管理 ツール別の許可・拒否設定(Allow/Deny/Prompt) グローバル、プロジェクト、ユーザー設定の階層構造 セキュリティ設定とファイル保護 認証トークンの管理と有効期限 企業環境での権限制御とポリシー適用 https://docs.anthropic.com/en/docs/claude-code/iam 1 / 41

Slide 24

Slide 24 text

Security ローカル実行によるコード保護(外部送信は API コールのみ) API キーの安全な管理と暗号化保存 ファイルアクセス制限と権限管理 悪意のあるコードや命令への対策 セキュリティ監査とログ機能 企業環境でのセキュリティベストプラクティス https://docs.anthropic.com/en/docs/claude-code/security 1 / 41

Slide 25

Slide 25 text

Monitoring OpenTelemetry による使用量とパフォーマンス監視 API 呼び出し、レスポンス時間、エラー率の追跡 分散トレーシングとメトリクス収集 カスタムダッシュボードとアラート設定 使用パターンの分析とボトルネック特定 企業環境での監視とレポート機能 https://docs.anthropic.com/en/docs/claude-code/monitoring-usage 1 / 41

Slide 26

Slide 26 text

Manage costs effectively API コールのコスト理解とトークン使用量の最適化 プロンプトキャッシュとコンテキストサイズの管理 モデル選択とコストパフォーマンスのバランス 使用量監視と予算制限の設定 チーム全体でのコスト管理と配分 コスト効率の良い使用パターン https://docs.anthropic.com/en/docs/claude-code/costs 1 / 41

Slide 27

Slide 27 text

Claude Code settings 設定ファイルの階層構造には優先順位がある 1. エンタープライズ管理ポリシー設定 2. コマンドライン引数 3. ローカルプロジェクト設定 ( .claude/settings.local.json ) 4. 共有プロジェクト設定 ( .claude/settings.json ) 5. ユーザー設定( ~/.claude/settings.json ) 上記の順で allow なり deny なり additionalDirectories なりが設定されている場 合、優先順位の高いものが適用される。 使える環境変数が記載。Claude が利用可能な ツールとして、権限が必要なものと不要なもの がある。それぞれ、Bash, Edit, MultiEdit, NotebookEdit, WebFetch, WebSearch, Write と、Glob, Grep, LS, NotebookRead, Read, Task, TodoWrite 設定コマンド https://docs.anthropic.com/en/docs/claude-code/settings claude config list claude config get claude config set claude config add # リストへの追加 claude config remove # リストからの削除 claude config set -g 1 / 41

Slide 28

Slide 28 text

Add Claude Code to your IDE VS Code、IntelliJ IDEA、Vim/Neovim などの主要 IDE への統合 ターミナルウィンドウやコマンドパレットでの起動 キーバインドとショートカットの設定 プロジェクト固有の設定とワークスペース統合 ファイルエクスプローラーとエディターでのコンテキスト連携 デバッグとパフォーマンス最適化 https://docs.anthropic.com/en/docs/claude-code/ide-integrations 1 / 41

Slide 29

Slide 29 text

Optimize your terminal setup シェル設定とエイリアス設定の最適化 プロンプトカスタマイズとコマンド履歴管理 キーバインドとショートカットの設定 ターミナルマルチプレクサーとセッション管理 フォント設定と色テーマの調整 パフォーマンスと使いやすさのバランス https://docs.anthropic.com/en/docs/claude-code/terminal-setup 1 / 41

Slide 30

Slide 30 text

Manage Claude’s memory CLAUDE.md ファイルでのプロジェクト固有情報の定義 コーディングスタンダードとプロジェクトルールの記述 コンテキストサイズの管理と最適化 会話履歴とセッション管理 重要な情報の永続化と継承 チーム間でのメモリ共有と管理 https://docs.anthropic.com/en/docs/claude-code/memory 1 / 41

Slide 31

Slide 31 text

CLI reference 基本コマンド フラグ(1/2) フラグ(2/2) 実用例 https://docs.anthropic.com/en/docs/claude-code/cli-reference claude "このプロジェクトを説明してください" # 初期プロンプト付きREP claude -p "この関数を説明してください" # SDKモードでクエリ実行後終 cat logs.txt | claude -p "説明してください" # パイプ処理 claude -c # 最新の会話を継続 claude -c -p "型エラーをチェックしてください" # 会話継続 + SDKモー claude -r "abc123" "このPRを完了してください" # セッションIDで会話再 claude update # 最新バージョンに更新 claude mcp # MCP設定 --add-dir ../apps ../lib # 追加の作業ディレクトリを指定 --allowedTools "Bash(git log:*)" "Read" # 許可するツールを指定 --disallowedTools "Bash(git log:*)" "Edit" # 拒否するツールを指定 --output-format json|text|stream-json # 出力形式を指定 --input-format text|stream-json # 入力形式を指定 --verbose # 詳細ログを有効化 --max-turns 3 # エージェントのターン数制限 --model claude-sonnet-4-20250514 # 使用モデルを指定 --model sonnet # エイリアス --permission-mode plan # 権限モードを指定 --permission-prompt-tool mcp_auth_tool # 権限プロンプト用MCPツ --resume abc123 # 特定セッションを再開 --continue # 最新の会話をロード --dangerously-skip-permissions # 権限プロンプトをスキップ(注意して result=$(claude -p "コードを生成" --output-format json) # JSON出力 code=$(echo "$result" | jq -r '.result') claude --verbose -p "複雑なクエリ" # 詳細ログでデバッグ claude --allowedTools "Read" "Grep" --disallowedTools "Bash" # 権 1 / 41

Slide 32

Slide 32 text

Interactive mode リアルタイムの対話型インターフェース キーバインドとショートカット操作 コマンド履歴とオートコンプリート機能 マルチライン入力とコードブロック編集 セッション管理と会話継続機能 エラーハンドリングとキャンセル操作 https://docs.anthropic.com/en/docs/claude-code/interactive-mode 1 / 41

Slide 33

Slide 33 text

Slash commands カスタムスラッシュコマンド 引数の指定( $ARGUMENTS ) MCP スラッシュコマンド https://docs.anthropic.com/en/docs/claude-code/slash-commands /help # 利用可能なコマンドを表示 /clear # 会話履歴をクリア /permissions # 権限設定を表示・更新 /mcp # MCP サーバー接続と認証管理 /config # 設定の表示・変更 /cost # トークン使用統計を表示 /doctor # Claude Code インストールの状態チェック /login # Anthropic アカウントの切り替え /logout # Anthropic アカウントからサインアウト /status # アカウントとシステムの状態表示 /compact [instructions] # 会話の圧縮 /add-dir # 追加の作業ディレクトリを指定 /memory # CLAUDE.md メモリファイルの編集 /model # AI モデルの選択・変更 /init # プロジェクトを CLAUDE.md ガイドで初期化 /vim # vim モードに入る /terminal-setup # Shift+Enter キーバインドをインストール /bug # バグ報告(会話を Anthropic に送信) /review # コードレビューを要求 /pr_comments # プルリクエストコメントを表示 mkdir -p .claude/commands echo "Analyze this code for performance issues and suggest opti mkdir -p ~/.claude/commands echo "Review this code for security vulnerabilities:" > ~/.claude/c echo 'Fix issue #$ARGUMENTS following our coding standards' > # 使用例: /fix-issue 123 /mcp__github__list_prs # 引数なし /mcp__github__pr_review 456 # 引数あり /mcp__jira__create_issue "Bug title" high # 複数引数 1 / 41

Slide 34

Slide 34 text

Hooks reference フックイベント マッチャーパターンで細かく指定することもでき る。使っていないのでよくわからない。 Hooks 一覧(doc が古くなりがちなので注意) 1. PreToolUse - ツール実行前(ブロック可能) 2. PostToolUse - ツール実行後 3. Notification - 通知送信時 4. New: UserPromptSubmit - ユーザがプロンプ トを送信した時 5. Stop - エージェント応答完了時 6. SubagentStop - サブエージェント完了時 7. PreCompact - コンパクト操作前 https://docs.anthropic.com/en/docs/claude-code/hooks { "hooks": { "PreToolUse": [ { "matcher": "Bash", "hooks": [ { "type": "command", "command": "echo 'Bashコマンドが実行されます'", "timeout": 30 } 1 / 41

Slide 35

Slide 35 text

Data usage ローカルでのコード処理とプライバシー保護 API コールでのデータ送信範囲と制限 メタデータとログの収集、保存、削除ポリシー コンプライアンス要件と法的要件への対応 データ保護とサードパーティサービス連携 ユーザーコントロールとデータ利用の透明性 https://docs.anthropic.com/en/docs/claude-code/data-usage 1 / 41

Slide 36

Slide 36 text

Legal and compliance 利用規約とサービス条件の理解 ライセンスと知的財産権の遵守 コンプライアンスチェックと監査要件 データ保護法とプライバシー規制への対応 企業ポリシーとガバナンスフレームワーク リスク管理と法的責任の範囲 https://docs.anthropic.com/en/docs/claude-code/legal-compliance 1 / 41

Slide 37

Slide 37 text

まとめ いろんな TIPS の前に一度公式情報をさらっておきましょう 公式ドキュメントから更新情報、動画のコースまでいろいろあります ぜひ今週末にでも一度目を通してみてください Claude Code はいいぞ! 1 / 41

Slide 38

Slide 38 text

参考文献 https://docs.anthropic.com/en/docs/claude-code/overview https://docs.anthropic.com/en/docs/claude-code/quickstart https://docs.anthropic.com/en/docs/claude-code/common-workflows https://docs.anthropic.com/en/docs/claude-code/sdk https://docs.anthropic.com/en/docs/claude-code/hooks https://docs.anthropic.com/en/docs/claude-code/github-actions https://docs.anthropic.com/en/docs/claude-code/mcp https://docs.anthropic.com/en/docs/claude-code/troubleshooting https://docs.anthropic.com/en/docs/claude-code/enterprise-deployment https://docs.anthropic.com/en/docs/claude-code/amazon-bedrock https://docs.anthropic.com/en/docs/claude-code/google-vertex-ai https://docs.anthropic.com/en/docs/claude-code/corporate-proxy https://docs.anthropic.com/en/docs/claude-code/llm-gateway 1 / 41

Slide 39

Slide 39 text

参考文献 https://docs.anthropic.com/en/docs/claude-code/devcontainer https://docs.anthropic.com/en/docs/claude-code/setup https://docs.anthropic.com/en/docs/claude-code/iam https://docs.anthropic.com/en/docs/claude-code/security https://docs.anthropic.com/en/docs/claude-code/monitoring-usage https://docs.anthropic.com/en/docs/claude-code/costs https://docs.anthropic.com/en/docs/claude-code/settings https://docs.anthropic.com/en/docs/claude-code/ide-integrations https://docs.anthropic.com/en/docs/claude-code/terminal-setup https://docs.anthropic.com/en/docs/claude-code/memory https://docs.anthropic.com/en/docs/claude-code/cli-reference https://docs.anthropic.com/en/docs/claude-code/interactive-mode https://docs.anthropic.com/en/docs/claude-code/slash-commands 1 / 41

Slide 40

Slide 40 text

参考文献 https://docs.anthropic.com/en/docs/claude-code/hooks https://docs.anthropic.com/en/docs/claude-code/data-usage https://docs.anthropic.com/en/docs/claude-code/legal-compliance 1 / 41

Slide 41

Slide 41 text

おまけ: thinking budget について "think" < "think hard" < "think harder" < "ultrathink" と公式のベストプラクティスに書いてあるが、正 確には下記。 "think" < "think hard" < "think harder" = "ultrathink" 1 / 41