Claude Code 超入門 バイブコーディングでつくる自分用ニュースまとめ

社内LTで使用したスライド資料です。

▼Daily Tech News
https://unsolublesugar.github.io/daily-tech-news/

▼GitHubリポジトリ
https://github.com/unsolublesugar/daily-tech-news

Transcript

1. Claude Code 超入門 バイブコーディングでつくる 自分用ニュースまとめ 2025/8/15 Claude Code 超入門 @unsoluble_sugar 1
2. アジェンダ 1. Claude Code 超入門 Claude Codeとは 料金体系と他サービス比較 基本的な使い方 2. バイブコーディング実践 自分用ニュースまとめの開発 実際のプロジェクト事例 Issue/PRワークフロー 3. Unityでの活用 現状と制限事項 Unity MCP連携 単体テスト自動生成 Claude Code 超入門 @unsoluble_sugar 2
3. 第1部 Claude Code 超入門 Claude Code 超入門 @unsoluble_sugar 3
4. Claude Codeとは AIエージェント型コーディングツール Anthropic社のCLIツール ターミナル上でファイル編集・コマンド実行を直接行う 対話から実装・テスト・デプロイまで一貫して実行 既存のワークフローに統合しやすい Claude Code 超入門 @unsoluble_sugar 4
5. Claude Codeの立ち位置 AIコーディングツールの進化 第1世代: ChatGPT（対話型） ↓ 第2世代: GitHub Copilot（補完型） ↓ 第3世代: Claude Code（統合型） ↓ 第4世代: Devin（自律型） ※世代は便宜上の分類です Claude Code = 対話 + コード生成 + ファイル操作 + 実行 Claude Code 超入門 @unsoluble_sugar 5
6. Claude Codeの特徴と強み プロジェクト全体の理解 ディレクトリ構造を把握 複数ファイルの同時編集 依存関係の理解 実行と検証 シェルコマンドの直接実行 テスト実行 エラーの検出と修正提案 エージェント型動作 タスク管理（TodoWrite） 複数ツールの並列実行 Git操作の自動化 日本語での自然な対話 プロンプトの理解度が高い Claude Code 超入門 @unsoluble_sugar 6
7. Claude Codeの料金体系（2025年8月時点） クレジット利用 従量課金制（トークン使用量に応じて） 目安: 90%のユーザーは $12/日以下 月額換算: $100-200/開発者 個人プラン（Pro/Max） Claude Pro: $20/月（年間契約だと$17/月） Claude Max: $100〜/月 追加料金なしでClaude Codeが利用可能 チームプラン Claude Team: $25/月（1ユーザーあたり） 年間契約、最小5名〜 チーム全体でClaude Code利用可能 Claude Code 超入門 @unsoluble_sugar 7
8. 類似サービスとの比較 サービス 特徴 料金 GitHub Copilot エディタ統合型 $10/月（Pro） Cursor AIエディタ $20/月（Pro） Gemini CLI Googleの対話型CLI ￥2,900/月（Google AI Pro） Cline エディタ拡張 無料（従量課金） Claude Code 超入門 @unsoluble_sugar 8
9. Claude Codeの制限事項 注意すべき点 使用制限 従量課金: トークン消費量に応じて制限 従量課金/Pro: 長時間使用で一定時間制限 Max: 週次利用上限あり 実行環境の制限 GUI操作は不可 危険なコマンド（curl、wget等）は制限 ネットワーク接続は要ユーザー承認 Claude Code 超入門 @unsoluble_sugar 9
10. Claude Codeの基本的な使い方 インストール・初期設定 # インストール % npm install -g @anthropic-ai/claude-code # プロジェクトディレクトリで起動 % cd your-project % claude 認証プロセス /login でブラウザ認証 Pro/Maxプラン: プランとの紐づけが必要 Claude Code 超入門 @unsoluble_sugar 10
11. Claude Codeの基本的な使い方 インタラクティブな対話 ワイ: テックニュースをRSSから取得するスクリプトを作って Claude: Pythonでfeedparserを使ったスクリプトを作成します。 [ファイル作成: fetch_news.py] <コード差分の表示> [実行: pip install feedparser] [テスト実行: python fetch_news.py] 実行結果を確認し、必要に応じて修正します... <作業内容の提示> この作業を実行してもよろしいですか？ ワイ: いいね。よろしく Claude Code 超入門 @unsoluble_sugar 11
12. Claude Codeの基本的な使い方 効果的な指示の出し方 悪い例: 「APIを作って」 良い例: 「ユーザー認証APIを作って。 - JWT使用 - エラーハンドリング必須 - テストコード付き」 具体的な要件を明示 制約条件を事前に伝える 期待する成果物を明確に Claude Code 超入門 @unsoluble_sugar 12
13. CLAUDE.mdの活用 基本設定・開発フロー制御 # CLAUDE.md（Claude Codeが自動読み込み） ## プロジェクト概要・技術スタック 日本のテックメディアRSSアグリゲーター - Python 3.9+ (feedparser, BeautifulSoup) - GitHub Actions (毎日7時自動更新) ## 開発フロー・品質基準 1. Issue作成 → 2. ブランチ作成 (feature/issue-番号) 3. 実装とテスト → 4. PR作成 (Closes #番号) - カバレッジ80%以上、リントエラー0、型チェック通過 Claude Code 超入門 @unsoluble_sugar 13
14. CLAUDE.mdの活用 高度な制御・ワークフロー設定 ## コーディング規約・AIへの指示 - 必ず日本語でコメント記載、エラーハンドリング必須 - ファイル生成前に必ず確認を取る - テスト実行後に結果を報告、既存コードのスタイルを維持 ## Git Workflow Rules・禁止事項 - mainブランチ: 直接コミット禁止 - feature/issue-番号-機能名、PRマージ後に自動でIssueクローズ - 禁止: トークンのハードコード、本番直接デプロイ - lint: `ruff check .` / test: `pytest tests/` プロジェクト全体の一貫性・品質を自動保証 Claude Code 超入門 @unsoluble_sugar 14
15. GitHub連携機能 Issue/PR作成の自動化 # Issueの作成 gh issue create --title " 新機能" --body "詳細" # PRの作成 gh pr create --title "修正 (#13)" --body "Fixes #13" # コミット git commit -m " 機能追加 Co-Authored-By: Claude <noreply@anthropic.com>" Claude Codeが自動でコマンドを生成・実行 Claude Code 超入門 @unsoluble_sugar 15
16. タスク管理機能 TodoWrite機能の活用 ## 現在のタスク 1. RSSフィード取得機能の実装 2. HTMLページ生成 3. GitHub Actions設定 4. テスト作成 複雑なタスクを自動分解 進捗を可視化 作業の抜け漏れ防止 Claude Code 超入門 @unsoluble_sugar 16
17. 高度な機能: Think & Plan Think（拡張思考モード） 「この認証システムをOAuth2に移行したい。think harder」 トリガー: "think" , "think more" , "think harder" 機能: 思考過程を可視化して深い分析を実行 用途: 複雑な問題の深い分析・設計検討 Plan機能（実行計画） 大規模タスクで自動的に計画を提示 段階的な実行手順を明示 ユーザー承認後に実行開始 Claude Code 超入門 @unsoluble_sugar 17
18. よく使うコマンド claude --continue - 前回セッションの続きから開始 /exit - セッション終了 /help - ヘルプ表示 /clear - 会話履歴クリア /model - 使用中のモデル確認・変更 /init - CLAUDE.md初期化 /review - コードレビュー依頼 Claude Code 超入門 @unsoluble_sugar 18
19. 第2部 バイブコーディング実践 自分用ニュースまとめを作る Claude Code 超入門 @unsoluble_sugar 19
20. バイブコーディングとは 「雰囲気」で指示してAIがコードを生成 従来: 詳細な仕様書 → 実装 バイブ: ざっくりイメージ → AI実装 → 調整 メリット 開発速度の大幅向上 アイデアの即座の実現 試行錯誤のコスト削減（ちょっと怪しい） Claude Code 超入門 @unsoluble_sugar 20
21. 実際作ってみたプロジェクト https://unsolublesugar.github.io/daily-tech-news/ Claude Code 超入門 @unsoluble_sugar 21
22. 機能詳細 機能 日本のテックメディアRSS収集 毎日自動更新（GitHub Actions） カード表示UI アーカイブ機能 RSS配信 開発期間: 約2週間（実作業10時間） Claude Code 超入門 @unsoluble_sugar 22
23. プロジェクト構成 daily-tech-news/ ├── src/ # モジュール化されたソースコード │ ├── templates/ # テンプレート管理 │ ├── generators/ # 生成エンジン │ └── config/ # 設定管理 ├── assets/ # CSS/JS/画像 ├── archives/ # 過去記事アーカイブ ├── fetch_news.py # メインスクリプト ├── .github/workflows/ # GitHub Actions └── CLAUDE.md # AI指示書 技術スタック Python（feedparser, BeautifulSoup） GitHub Actions（自動更新） GitHub Pages（ホスティング） Claude Code 超入門 @unsoluble_sugar 23
24. 開発の流れ（1/3） 初期構想をClaude Codeに伝える 「日本のテックメディアのRSSを集めて 毎日自動更新されるサイトを作りたい」 Claude Codeの対応 プロジェクト構造の提案 fetch_news.py の作成 必要なライブラリのインストール 初回実行とデバッグ Claude Code 超入門 @unsoluble_sugar 24
25. 開発の流れ（2/3） 機能追加の指示 「記事をカード形式で表示したい サムネイル画像も取得して」 Claude Codeの実装 def get_article_thumbnail(url): """記事URLからOGP画像を取得""" soup = BeautifulSoup(response.content, 'html.parser') og_image = soup.find('meta', property='og:image') return og_image['content'] if og_image else None Claude Code 超入門 @unsoluble_sugar 25
26. 開発の流れ（3/3） GitHub Actions設定 「毎日7時に自動更新してSlackに通知」 生成されたワークフロー schedule: - cron: '0 22 * * *' # JST 7:00 steps: - run: python fetch_news.py - run: git commit -m " 更新" Claude Code 超入門 @unsoluble_sugar 26
27. Issue駆動開発の実践 Claude Code 超入門 @unsoluble_sugar 27
28. PR作成の自動化 Claude Code 超入門 @unsoluble_sugar 28
29. デバッグのコツ Claude Codeとの効果的な対話 1. エラーメッセージを共有 「以下のエラーが出ている。原因の詳細調査と対策を提案して: [エラー内容]」 2. 期待と現実のギャップを説明 「ピックアップされるURLの重複を防ぎたい。ページ違いのものやリファラは除外して」 3. 段階的な確認 「まずRSS取得だけ動作確認して」 Claude Code 超入門 @unsoluble_sugar 29
30. 実装の統計 約2週間の開発成果 項目 数値 総コミット数 150+ Issue数 30+ PR数 30+ コード行数 4,000行以上 モジュール数 9個 人間の作業時間: 約10時間（主に指示とレビュー） Claude Code 超入門 @unsoluble_sugar 30
31. 学び 小さく始める 最初はシンプルに、徐々に機能追加 実行して確認 Claude Codeの実行機能を最大活用 Issue駆動 タスクを明確化して着実に進める CLAUDE.mdの活用 プロジェクト固有のルールを記載 Claude Code 超入門 @unsoluble_sugar 31
32. 第3部 Unityでの活用 Claude Code 超入門 @unsoluble_sugar 32
33. Unityでの活用 Claude Codeだけでできることは限られる 可能な作業 C#スクリプトの生成・編集 プロジェクト構造の理解 コードレビュー 直接的な制限 UnityエディタのGUI操作不可 シーン編集不可 アセット管理不可 Claude Code 超入門 @unsoluble_sugar 33
34. Unity MCP連携 https://github.com/CoplayDev/unity-mcp まだ触れてません… Claude Code 超入門 @unsoluble_sugar 34
35. 主要機能 MCP連携でUnity操作が可能に（なるらしい） manage_script - スクリプト管理 C#スクリプトの自動生成 既存スクリプトの編集・リファクタリング MonoBehaviour、ScriptableObjectの作成 manage_scene - シーン操作 GameObjectの配置・削除 Hierarchy構造の自動構築 コンポーネントの追加・設定 manage_gameobject - オブジェクト操作 Transform設定（位置・回転・スケール） コンポーネントの動的追加・削除 Parent-Child関係の構築 manage_asset - アセット管理 プロジェクトへのアセットインポート マテリアル・テクスチャの自動設定 プレハブの作成と管理 Claude Code 超入門 @unsoluble_sugar 35
36. Unity単体テストとかで使えそう？ [TestFixture] public class PlayerControllerTests { private GameObject player; private PlayerController controller; [SetUp] public void Setup() { player = new GameObject(); controller = player.AddComponent<PlayerController>(); } [Test] public void PlayerController_InitialSpeed_ShouldBe5() { Assert.AreEqual(5.0f, controller.speed); } [TearDown] public void TearDown() { Object.DestroyImmediate(player); } } Claude Code 超入門 @unsoluble_sugar 36
37. まとめ Claude Code 超入門 @unsoluble_sugar 37
38. Claude Codeが変える開発体験 大幅な開発速度向上を実現 Before（従来） 設計 → 実装 → テスト → デバッグ 期間: 2-3ヶ月 After（Claude Code） アイデア → 対話 → AI実装 → レビュー 期間: 2-3週間 …とはいえ実務では Kiroのような「仕様駆動開発」を取り入れるのが良いかも Claude Code 超入門 @unsoluble_sugar 38
39. ポイント 明確な指示 「何を作りたいか」を具体的に 段階的な実装 小さく始めて徐々に拡張 AIとの協調 人間の創造性 × AIの実装力 Claude Code 超入門 @unsoluble_sugar 39
40. このスライドについて 実はこのプレゼン資料もClaude Codeで作りました 使用技術 Marp: Markdown → スライド変換 Claude Code: コンテンツ生成・構成 HTML表示: ブラウザで閲覧 PDF出力: 印刷・配布にも対応 開発の流れ 企画・構成: 人間が方針決定 スライド作成: Claude Codeが自動生成 調整・修正: 協働で完成度向上 Markdownベースなので コーディングエージェントとの相性が良い Claude Code 超入門 @unsoluble_sugar 40
41. 参考リンク プロジェクト Daily Tech News GitHubリポジトリ ドキュメント Claude Code公式 CoplayDev/unity-mcp Claude Code 超入門 @unsoluble_sugar 41
42. ご清聴ありがとうございました Claude Code 超入門 @unsoluble_sugar 42