Slide 1

Slide 1 text

Claude Code はじめてガイド 1時間で学べるAI駆動開発の基本と実践 Speaker: Oikon (Nov. 28, 2025) 企画: Findyさま

Slide 2

Slide 2 text

自己紹介 Oikon (@oikon48) Software Engineer 趣味: 個人開発, AIツール研究 Claude Code歴: 2025年3月〜 Xのハイライトに直近のCHANGELOGが あります 参考: speakerdeck.com/oikon48

Slide 3

Slide 3 text

今回の企画について

Slide 4

Slide 4 text

想定するオーディエンスと今日のゴール 想定するオーディエンス Claude Codeに興味がある Claude Codeの導入を検討している 現場では使えないが、もう少しキャッチアップしたい 今日のゴール Claude Codeの基本的な使い方を理解し、実践的な活用方法をイメージしてもらう デモを交えながら、できるだけ丁寧にClaude Codeの紹介をします!

Slide 5

Slide 5 text

今日、話すこと 基礎編 (30分) 1. Claude Codeの概要 2. Claude Codeの基本機能 3. Claude Codeのコア機能 応用編 (20分) 1. 個人で意識すること 2. チームで意識すること 少しClaude Codeを語らせて (時間余ったら) 1. Claude Skillsを語らせて 2. Claude Codeについて所見を語らせて

Slide 6

Slide 6 text

基礎編①: Claude Codeの概要

Slide 7

Slide 7 text

Claude Codeとは AnthropicのAI開発支援CLIツール 自律型AIエージェントであり、 高い自走力を持つ 既存の開発ツールやワークフローに 組み込める柔軟性 Opus 4.5のリリースでさらに強化。 コーディングにおいては一番と言って もいいかもしれない 参考: claude.com/product/claude-code, anthropic.com/news/claude-opus-4-5

Slide 8

Slide 8 text

契約プラン Claude Codeが使用可能になるプラン: Pro: $17。お試しに丁度良い Max: $100と$200。 Team(Premium seat): $150で最低5人 から。 Enterprise: 価格は問い合わせベース。 API: 従量課金 参考: claude.com/pricing

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

他のAIツールとの違い GUI型(GitHub Coplilot, Cursorなど)との違い GitHub Copilot/Cursor: コード補完、対話型で並走する Claude Code: 与えられたタスクを自律的に実行する 非同期型(Devinなど)との違い Devin: 完全自律型。タスクを依頼したらほぼ放置 Claude Code: 自律駆動だが、ある程度コントロール可能 開発現場によって適しているAIツールは違う Claude Codeの特徴を知った上で、利用するか決定するのが良い

Slide 11

Slide 11 text

基礎編②: Claude Codeの基本機能

Slide 12

Slide 12 text

インストールの種類 CLI または、 IDE Extension VSCode Marketplace JETBRAINES Marketplace Claude Desktop Clade Code for Desktop が11/24に登場! サイドバーの < / > ボタンから起動 curl -fsSL https://claude.ai/install.sh | bash brew install --cask claude-code 参考: code.claude.com/docs/en/quickstart

Slide 13

Slide 13 text

CLI vs IDE Extension vs CC for Desktop CLI IDE Extension CC for Desktop 全ての機能が使用可能 CLIツールの一部の機能が使えない CLIツールの多くの機能が使えない CC on the Webとほぼ同機能 ターミナルの場所を問わない VSCode forkで使用可能。GUI操作が可能 Desktopアプリに内蔵

Slide 14

Slide 14 text

CLAUDE.md 役割 プロジェクトの文脈理解 AIエージェントの道標 コーディング規約やワークフローを統一 記載する内容例 プロジェクト概要(背景、スタック) 機能仕様(API定義、データフロー) コーディング規約(命名規則など) ガードレール(セキュリティ、禁止事項) 評価・テスト(品質保証の検証方法)

Slide 15

Slide 15 text

参考: blog/using-claude-md-files

Slide 16

Slide 16 text

Planモード タスクを分解して実行計画を立案し、実行前に ユーザー承認を取得。 Interactive question toolにより、Claudeが実 装の不明点を聞いてくれる Tips: Ctrl + G でプランの編集が可能 参考: code.claude.com/docs/en/common-workflows

Slide 17

Slide 17 text

スラッシュコマンド (デモでいくつか紹介します) /add-dir (作業directoryを追加) /agents (Subagents作成) /bashes /bug (feedback) /clear (会話をクリア) /compact (会話を圧縮) /config /context (コンテキスト表示) /cost /doctor /exit /export /extra-usage /help /hooks (Hooks作成) /ide /init (CLAUDE.md作成/更新) /install-github-app /login /logout /mcp /memory /migrate-installer /model (モデル切り替え) /output-style /permissions /plugin /pr-comments /privacy-settings /release-notes /resume /review (PRレビュー) /rewind (実行履歴を戻す) /sandbox /security-review /status /statusline /stickers /terminal-setup /todos /upgrade /usage (使用量確認) /vim 参考: code.claude.com/docs/en/slash-commands

Slide 18

Slide 18 text

基礎編③: Claude Codeのコア機能

Slide 19

Slide 19 text

カスタムスラッシュコマンド 頻繁に使うプロンプトを、Markdownで再利用 可能にできる コマンド実行 .claude/ └─ commands/ └─ fix-github-issue.md > /fix-github-issue $ARGUMENTS 参考: code.claude.com/docs/en/slash-commands#custom-slash-commands

Slide 20

Slide 20 text

Hooks Claude Codeの動作をScriptで制御する。 /hooks コマンドでHooksを作成できる ユースケース Formatter・Linterの実行 テスト実行 通知 プロンプトフィルタリング など .claude/ └── settings.json └── hooks/ └── pre-commit.sh 参考: code.claude.com/docs/en/hooks-guide, code.claude.com/docs/ja/hooks

Slide 21

Slide 21 text

Subagents 専門AIエージェントの作成 /agents コマンドでSubagentsを作成できる 特徴 並列実行 独立コンテキスト ツールと権限の管理 タスク特化のエージェント .claude/ └── agents/ └── agent1.md └── agent2.md 参考: code.claude.com/docs/en/sub-agents

Slide 22

Slide 22 text

MCPサーバー連携 Claude CodeもModel Context Protocol (MCP)ツール連携が可能 例: Playwright MCPサーバーを追加 claude mcp add playwright npx @playwright/mcp@latest 参考: code.claude.com/docs/en/mcp, github.com/modelcontextprotocol/servers

Slide 23

Slide 23 text

Claude Codeの機能がよく分からない... そんな時は...

Slide 24

Slide 24 text

Claude Codeの機能がよく分からない... そんな時は... Claude Codeに直接聞く!

Slide 25

Slide 25 text

Claude Codeは自身の公式ドキュメントにアクセスできるclaude-code-guide Subagentが 内包されている > Claude Code の 〇〇 の機能について教えて

Slide 26

Slide 26 text

応用編: 実際の開発現場での活用方法

Slide 27

Slide 27 text

AIツールをどう開発に活かすべきか 個人で意識すること AIモデルを理解する AIツールを理解する チームで意識すること 仕組み化 おすすめの導入について Claude Codeに限らず、どのAIツールでも考えるべきことはある程度同じ

Slide 28

Slide 28 text

個人で意識すること AIモデルを理解する モデルの特性(何が得意?、どんな挙動をする?) モデルのスペック(コンテキストサイズはどれくらい?) ハルシネーションの傾向(どれくらいの頻度で発生する?) どれくらい知っているか(ナレッジカットオフ、学習内容の粒度) AIツールを理解する 基本機能(どんな機能がある?) コンテキストコントロール方法( /clear , /compact/ , /context ) ツールの得意なこと(どんな分野・使い方が能力を発揮する?) AIツールのコントロール方法(ドキュメント, Plan mode, Hooks など)

Slide 29

Slide 29 text

Claude is Horse, Claude Code is Harness 参考: youtu.be/iF9iV4xponk

Slide 30

Slide 30 text

チームで意識すること AIツールの仕組みやワークフローを使って 属人性を下げる 共通のコンテキスト(CLAUDE.md) ガードレール Permissionsの承認設定 Hooks ツールや専門スキルの共有(Plugin System) MCPサーバー連携 Subagents カスタムスラッシュコマンド ドキュメントの作成、Issue管理、PRレビュー セキュリティの設定 /sandbox , /security-review , /permissions 設定の階層構造 AIツールの練度は人によって違う 練度の差を埋める工夫が必要 /Library/Application Support/ClaudeCode/  # エンタープライズ設定 ├── CLAUDE.md └── settings.json ~/.claude/  # グローバル設定 ├── CLAUDE.md └── settings.json project-root/  # プロジェクト設定 ├── .claude/ │ ├── CLAUDE.md │ ├── CLAUDE.local.md │ └── settings.json ├── CLAUDE.md # またはこちら └── CLAUDE.local.md (commands,agents,hooks,skills なども同様) 参考: code.claude.com/docs/en/claude-md#memory-types

Slide 31

Slide 31 text

チームにおすすめ①: CLAUDE.mdを配布してOn boarding ドキュメントが整備されていれば、1人でオンボーディングができる by Anthropic Engineer 参考: youtube.com/live/Rei97TSw64g

Slide 32

Slide 32 text

チームにおすすめ②: 期間内でAIツールのみで開発を行う 分からないことはAIに調べさせる コーディング禁止で実装する期間を作る チーム内でAIを使いこなせる人が共有する そのチームでどこまでAIツールを活用できるか話し合う場を作る 今のAIツールがどれくらい使えるかは、本腰を入れて使ってみるのが一番良い

Slide 33

Slide 33 text

チームにおすすめ③: 仕様駆動開発の活用検討 仕様駆動開発(Spec-Driven Development): 仕様書(Spec)を人が作成し、AIに実行可能させるアプローチ 代表的なツール: Kiro Spec-Kit cc-sdd AIツールをコントロールできる強力な手法 エンタープライズの中~大規模プロジェクトと相性が良い 参考: code.claude.com/docs/en/common-workflows, speakerdeck.com/gotalab555/...

Slide 34

Slide 34 text

少しClaude Codeについて語らせて

Slide 35

Slide 35 text

Claude Skillsを語らせて① Claude Skills: Claudeが使用できる拡張モジュール スキルを必要なタイミングで柔軟にロードすることができる my-skill/ ├── SKILL.md (required) ├── reference.md (optional documentation) ├── examples.md (optional examples) ├── scripts/ │ └── helper.py (optional utility) └── templates/ └── template.txt (optional template) 参考: anthropic.com/engineering/equipping-agents-for-the-real-world-with-agent-skills

Slide 36

Slide 36 text

Claude Skillsを語らせて②: Quick start どちらもAnthropic公式のSkillsをインストールする方法 Skill creator frontend-design > /plugin marketplace add https://github.com/anthropics/skills > /plugin install example-slills@anthropic-skills > 〇〇のSkills を作って > /plugin marketplace add anthropics/claude-code > /plugin install frontend-design@claude-code-plugins > Implement lp frontend design 参考: code.claude.com/docs/en/skills, github.com/anthropics/skills, github.com/anthropics/claude-code/.../frontend-design

Slide 37

Slide 37 text

Claude Skillsを語らせて③: 実験 実際のところ、Skillsでどれくらい実装が変わるのか🤔 (プロンプト 左: Skillsあり, 右: Skillsなし) 参考: youtube.com/watch?v=nTOVIGsqCuY for above test prompt

Slide 38

Slide 38 text

Claude Skillsを語らせて④: 実験結果 (左: Skillsあり, 右: Skillsなし) 参考: claude.com/blog/improving-frontend-design-through-skills

Slide 39

Slide 39 text

(登壇後に追加) 実験に使ったSkillsをClaude Pluginにしました。デモレベルですが良かったらお試しにどうぞ (https://github.com/oikon48/cc-frontend-skills) > /plugin marketplace add oikon48/cc-frontend-skills > /plugin install frontend-skills@cc-frontend-skills 参考: oikon48/cc-frontend-skills

Slide 40

Slide 40 text

Claude Codeに対する私見を語らせて Claude Codeは面白い Claude Codeはシンプルな設計だが奥深いAIツール メジャーリリースから追ってくると、思想が見えてくる Claude Codeに賭けるべき? 自分に合うツールであればなんでも良い。1つは使い慣れたほうがいい AIツール戦国時代は、サンクコストを気にしたら負け。いつでも切り替えたら良い。 今後のAI開発ツール 多くのエンジニアはコードを書く量は減っていく AIツールは自分の味方。まずは使って知るべき Claude Code (Anthropic)は、AIのマイルストーンを作っている

Slide 41

Slide 41 text

Claude Code Best Practice (2025/05/22) 参考: youtube.com/watch?v=gv0WHhKelSE

Slide 42

Slide 42 text

まとめ Claude Codeの機能が多く柔軟。まずは使ってみて慣れよう Claude Codeをはじめとした、AIモデルとAIツールの特性を知ろう Claude Codeをある程度コントロールするために、仕組み化と実践をしよう @oikon48 Xでいつでも質問や相談してください

Slide 43

Slide 43 text

参考文献 Claude Code Product Page Claude Code Documentation Claude Code Pricing Improving Frontend Design - Claude Blog Anthropic Skills Repository Model Context Protocol Servers Claude Code Plugins - frontend- design Equipping Agents with Skills - Anthropic 仕様駆動開発の理想と現実 Claude Code Best Practice (YouTube) Claude is Horse, Claude Code is Harness Anthropic Engineer Talk - Onboarding Skills Test Prompt Reference

Slide 44

Slide 44 text

Appendix

Slide 45

Slide 45 text

Sandbox機能 隔離環境で未検証コードを安全に実行、本番環境への影響を防止 セキュアな実行: ネットワークとシステムファイルへのアクセス制限 リスク管理: 未知のスクリプト・依存関係のテスト、副作用の事前検証 デバッグ支援: エラー再現・修正サイクルの高速化 参考: code.claude.com/docs/en/sandboxing、code.claude.com/docs/en/security

Slide 46

Slide 46 text

Claude Code GitHub Actions GitHub ActionsでCI/CDに統合、自動レビュー・テスト・修正を実現 自動コードレビュー: PR作成時にClaude Codeがコード品質・セキュリティを分析 テスト自動化: 失敗したテストの原因分析・修正提案を自動コメント 継続的改善: リントエラー修正、ドキュメント生成、依存関係更新 参考: code.claude.com/docs/en/github-actions、github.com/anthropics/claude-code-action

Slide 47

Slide 47 text

CLAUDE.md の種類 タイプ ロケーション 目的 共有対象 エンタープライ ズ macOS: /Library/Application Support/ClaudeCode/CLAUDE.md など 企業のコーディング標準、セキュリティポリシー、 コンプライアンス要件 組織内のすべてのユー ザー プロジェクト ./CLAUDE.md または ./.claude/CLAUDE.md プロジェクトアーキテクチャ、コーディング標準、 一般的なワークフロー チームメンバー ユーザーグロー バル ~/.claude/CLAUDE.md コードスタイルの設定、個人的なツーリングショー トカット 個人(すべてのプロジ ェクト) プロジェクト(ロ ーカル) ./CLAUDE.local.md 個人的なプロジェクト固有の設定(非推奨) 個人(現在のプロジェ クト) (優先順位) エンタープライズ -> プロジェクト(ローカル) -> 共有プロジェクト -> ユーザーグローバル 参考: code.claude.com/docs/en/claude-md#memory-types, code.claude.com/docs/en/settings