Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

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

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

Avatar for unsoluble_sugar

unsoluble_sugar

August 15, 2025
Tweet

More Decks by unsoluble_sugar

Other Decks in Technology

Transcript

  1. アジェンダ 1. Claude Code 超入門 Claude Codeとは 料金体系と他サービス比較 基本的な使い方 2.

    バイブコーディング実践 自分用ニュースまとめの開発 実際のプロジェクト事例 Issue/PRワークフロー 3. Unityでの活用 現状と制限事項 Unity MCP連携 単体テスト自動生成 Claude Code 超入門 @unsoluble_sugar 2
  2. Claude Codeの立ち位置 AIコーディングツールの進化 第1世代: ChatGPT(対話型) ↓ 第2世代: GitHub Copilot(補完型) ↓

    第3世代: Claude Code(統合型) ↓ 第4世代: Devin(自律型) ※世代は便宜上の分類です Claude Code = 対話 + コード生成 + ファイル操作 + 実行 Claude Code 超入門 @unsoluble_sugar 5
  3. Claude Codeの特徴と強み プロジェクト全体の理解 ディレクトリ構造を把握 複数ファイルの同時編集 依存関係の理解 実行と検証 シェルコマンドの直接実行 テスト実行 エラーの検出と修正提案

    エージェント型動作 タスク管理(TodoWrite) 複数ツールの並列実行 Git操作の自動化 日本語での自然な対話 プロンプトの理解度が高い Claude Code 超入門 @unsoluble_sugar 6
  4. 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
  5. 類似サービスとの比較 サービス 特徴 料金 GitHub Copilot エディタ統合型 $10/月(Pro) Cursor AIエディタ

    $20/月(Pro) Gemini CLI Googleの対話型CLI ¥2,900/月(Google AI Pro) Cline エディタ拡張 無料(従量課金) Claude Code 超入門 @unsoluble_sugar 8
  6. Claude Codeの制限事項 注意すべき点 使用制限 従量課金: トークン消費量に応じて制限 従量課金/Pro: 長時間使用で一定時間制限 Max: 週次利用上限あり

    実行環境の制限 GUI操作は不可 危険なコマンド(curl、wget等)は制限 ネットワーク接続は要ユーザー承認 Claude Code 超入門 @unsoluble_sugar 9
  7. Claude Codeの基本的な使い方 インストール・初期設定 # インストール % npm install -g @anthropic-ai/claude-code

    # プロジェクトディレクトリで起動 % cd your-project % claude 認証プロセス /login でブラウザ認証 Pro/Maxプラン: プランとの紐づけが必要 Claude Code 超入門 @unsoluble_sugar 10
  8. Claude Codeの基本的な使い方 インタラクティブな対話 ワイ: テックニュースをRSSから取得するスクリプトを作って Claude: Pythonでfeedparserを使ったスクリプトを作成します。 [ファイル作成: fetch_news.py] <コード差分の表示>

    [実行: pip install feedparser] [テスト実行: python fetch_news.py] 実行結果を確認し、必要に応じて修正します... <作業内容の提示> この作業を実行してもよろしいですか? ワイ: いいね。よろしく Claude Code 超入門 @unsoluble_sugar 11
  9. Claude Codeの基本的な使い方 効果的な指示の出し方 悪い例: 「APIを作って」 良い例: 「ユーザー認証APIを作って。 - JWT使用 -

    エラーハンドリング必須 - テストコード付き」 具体的な要件を明示 制約条件を事前に伝える 期待する成果物を明確に Claude Code 超入門 @unsoluble_sugar 12
  10. 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
  11. CLAUDE.mdの活用 高度な制御・ワークフロー設定 ## コーディング規約・AIへの指示 - 必ず日本語でコメント記載、エラーハンドリング必須 - ファイル生成前に必ず確認を取る - テスト実行後に結果を報告、既存コードのスタイルを維持

    ## Git Workflow Rules・禁止事項 - mainブランチ: 直接コミット禁止 - feature/issue-番号-機能名、PRマージ後に自動でIssueクローズ - 禁止: トークンのハードコード、本番直接デプロイ - lint: `ruff check .` / test: `pytest tests/` プロジェクト全体の一貫性・品質を自動保証 Claude Code 超入門 @unsoluble_sugar 14
  12. 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 <[email protected]>" Claude Codeが自動でコマンドを生成・実行 Claude Code 超入門 @unsoluble_sugar 15
  13. タスク管理機能 TodoWrite機能の活用 ## 現在のタスク 1. RSSフィード取得機能の実装 2. HTMLページ生成 3. GitHub

    Actions設定 4. テスト作成 複雑なタスクを自動分解 進捗を可視化 作業の抜け漏れ防止 Claude Code 超入門 @unsoluble_sugar 16
  14. 高度な機能: Think & Plan Think(拡張思考モード) 「この認証システムをOAuth2に移行したい。think harder」 トリガー: "think" ,

    "think more" , "think harder" 機能: 思考過程を可視化して深い分析を実行 用途: 複雑な問題の深い分析・設計検討 Plan機能(実行計画) 大規模タスクで自動的に計画を提示 段階的な実行手順を明示 ユーザー承認後に実行開始 Claude Code 超入門 @unsoluble_sugar 17
  15. よく使うコマンド claude --continue - 前回セッションの続きから開始 /exit - セッション終了 /help -

    ヘルプ表示 /clear - 会話履歴クリア /model - 使用中のモデル確認・変更 /init - CLAUDE.md初期化 /review - コードレビュー依頼 Claude Code 超入門 @unsoluble_sugar 18
  16. バイブコーディングとは 「雰囲気」で指示してAIがコードを生成 従来: 詳細な仕様書 → 実装 バイブ: ざっくりイメージ → AI実装

    → 調整 メリット 開発速度の大幅向上 アイデアの即座の実現 試行錯誤のコスト削減(ちょっと怪しい) Claude Code 超入門 @unsoluble_sugar 20
  17. プロジェクト構成 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
  18. 開発の流れ(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
  19. 開発の流れ(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
  20. 実装の統計 約2週間の開発成果 項目 数値 総コミット数 150+ Issue数 30+ PR数 30+

    コード行数 4,000行以上 モジュール数 9個 人間の作業時間: 約10時間(主に指示とレビュー) Claude Code 超入門 @unsoluble_sugar 30
  21. 主要機能 MCP連携でUnity操作が可能に(なるらしい) manage_script - スクリプト管理 C#スクリプトの自動生成 既存スクリプトの編集・リファクタリング MonoBehaviour、ScriptableObjectの作成 manage_scene -

    シーン操作 GameObjectの配置・削除 Hierarchy構造の自動構築 コンポーネントの追加・設定 manage_gameobject - オブジェクト操作 Transform設定(位置・回転・スケール) コンポーネントの動的追加・削除 Parent-Child関係の構築 manage_asset - アセット管理 プロジェクトへのアセットインポート マテリアル・テクスチャの自動設定 プレハブの作成と管理 Claude Code 超入門 @unsoluble_sugar 35
  22. 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
  23. Claude Codeが変える開発体験 大幅な開発速度向上を実現 Before(従来) 設計 → 実装 → テスト →

    デバッグ 期間: 2-3ヶ月 After(Claude Code) アイデア → 対話 → AI実装 → レビュー 期間: 2-3週間 …とはいえ実務では Kiroのような「仕様駆動開発」を取り入れるのが良いかも Claude Code 超入門 @unsoluble_sugar 38
  24. このスライドについて 実はこのプレゼン資料もClaude Codeで作りました 使用技術 Marp: Markdown → スライド変換 Claude Code:

    コンテンツ生成・構成 HTML表示: ブラウザで閲覧 PDF出力: 印刷・配布にも対応 開発の流れ 企画・構成: 人間が方針決定 スライド作成: Claude Codeが自動生成 調整・修正: 協働で完成度向上 Markdownベースなので コーディングエージェントとの相性が良い Claude Code 超入門 @unsoluble_sugar 40