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

Claude Code 超入門 Claude Code 超入門 バイブコーディングでつくる 自分用ニュースまとめ 2025/8/15 @unsoluble_sugar 1

Claude Code 超入門 アジェンダ 1. Claude Code 超入門 Claude Codeとは 料金体系と他サービス比較 基本的な使い方 2. バイブコーディング実践 自分用ニュースまとめの開発 実際のプロジェクト事例 Issue/PRワークフロー @unsoluble_sugar 3. Unityでの活用 現状と制限事項 Unity MCP連携 単体テスト自動生成 2

Claude Code 超入門 第1部 Claude Code 超入門 @unsoluble_sugar 3

Claude Codeとは Claude Code 超入門 AIエージェント型コーディングツール Anthropic社のCLIツール ターミナル上でファイル編集・コマンド実行を直接行う 対話から実装・テスト・デプロイまで一貫して実行 既存のワークフローに統合しやすい @unsoluble_sugar 4

Claude Codeの立ち位置 Claude Code 超入門 AIコーディングツールの進化 第1世代: ChatGPT（対話型） ↓ 第2世代: GitHub Copilot（補完型） ↓ 第3世代: Claude Code（統合型） ↓ 第4世代: Devin（自律型） ※世代は便宜上の分類です Claude Code = 対話 + コード生成 + ファイル操作 + 実行 @unsoluble_sugar 5

Claude Code 超入門 Claude Codeの特徴と強み プロジェクト全体の理解 エージェント型動作 実行と検証 日本語での自然な対話 ディレクトリ構造を把握 複数ファイルの同時編集 依存関係の理解 シェルコマンドの直接実行 テスト実行 エラーの検出と修正提案 @unsoluble_sugar タスク管理（TodoWrite） 複数ツールの並列実行 Git操作の自動化 プロンプトの理解度が高い 6

Claude Codeの料金体系（2025年8月時点） クレジット利用 従量課金制（トークン使用量に応じて） 目安: 90%のユーザーは $12/日以下 月額換算: $100-200/開発者 Claude Code 超入門 個人プラン（Pro/Max） Claude Pro: $20/月（年間契約だと$17/月） Claude Max: $100〜/月 追加料金なしでClaude Codeが利用可能 チームプラン Claude Team: $25/月（1ユーザーあたり） 年間契約、最小5名〜 チーム全体でClaude Code利用可能 @unsoluble_sugar 7

類似サービスとの比較 Claude Code 超入門 サービス 特徴 料金 GitHub Copilot エディタ統合型 $10/月（Pro） Cursor AIエディタ $20/月（Pro） Gemini CLI Googleの対話型CLI ￥2,900/月（Google AI Pro） Cline エディタ拡張 無料（従量課金） @unsoluble_sugar 8

Claude Code 超入門 Claude Codeの制限事項 注意すべき点 使用制限 従量課金: トークン消費量に応じて制限 従量課金/Pro: 長時間使用で一定時間制限 Max: 週次利用上限あり @unsoluble_sugar 実行環境の制限 GUI操作は不可 危険なコマンド（curl、wget等）は制限 ネットワーク接続は要ユーザー承認 9

Claude Codeの基本的な使い方 Claude Code 超入門 インストール・初期設定 # インストール % npm install -g @anthropic-ai/claude-code # プロジェクトディレクトリで起動 % cd your-project % claude 認証プロセス でブラウザ認証 Pro/Maxプラン: プランとの紐づけが必要 /login @unsoluble_sugar 10

Claude Codeの基本的な使い方 Claude Code 超入門 インタラクティブな対話 ワイ: テックニュースをRSSから取得するスクリプトを作って Claude: Pythonでfeedparserを使ったスクリプトを作成します。 [ファイル作成: fetch_news.py] <コード差分の表示> [実行: pip install feedparser] [テスト実行: python fetch_news.py] 実行結果を確認し、必要に応じて修正します... <作業内容の提示> この作業を実行してもよろしいですか？ ワイ: いいね。よろしく @unsoluble_sugar 11

Claude Codeの基本的な使い方 Claude Code 超入門 効果的な指示の出し方 悪い例: 「APIを作って」 良い例: 「ユーザー認証APIを作って。 - JWT使用 - エラーハンドリング必須 - テストコード付き」 具体的な要件を明示 制約条件を事前に伝える 期待する成果物を明確に @unsoluble_sugar 12

CLAUDE.mdの活用 Claude Code 超入門 基本設定・開発フロー制御 （ が自動読み込み） ## プロジェクト概要・技術スタック # CLAUDE.md Claude Code 日本のテックメディアRSSアグリゲーター - Python 3.9+ (feedparser, BeautifulSoup) - GitHub Actions (毎日7時自動更新) 開発フロー・品質基準 ## 1. Issue作成 → 2. ブランチ作成 (feature/issue-番号) 3. 実装とテスト → 4. PR作成 (Closes #番号) - カバレッジ80%以上、リントエラー0、型チェック通過 @unsoluble_sugar 13

CLAUDE.mdの活用 Claude Code 超入門 高度な制御・ワークフロー設定 コーディング規約・ への指示 ## AI - 必ず日本語でコメント記載、エラーハンドリング必須 - ファイル生成前に必ず確認を取る - テスト実行後に結果を報告、既存コードのスタイルを維持 ・禁止事項 ## Git Workflow Rules - mainブランチ: 直接コミット禁止 - feature/issue-番号-機能名、PRマージ後に自動でIssueクローズ - 禁止: トークンのハードコード、本番直接デプロイ - lint: `ruff check .` / test: `pytest tests/` プロジェクト全体の一貫性・品質を自動保証 @unsoluble_sugar 14

Claude Code 超入門 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が自動でコマンドを生成・実行 @unsoluble_sugar 15

タスク管理機能 Claude Code 超入門 TodoWrite機能の活用 ## 1. 2. 3. 4. 現在のタスク RSSフィード取得機能の実装 HTMLページ生成 GitHub Actions設定 テスト作成 複雑なタスクを自動分解 進捗を可視化 作業の抜け漏れ防止 @unsoluble_sugar 16

高度な機能: Think & Plan Claude Code 超入門 Think（拡張思考モード） 「この認証システムをOAuth2に移行したい。think harder」 トリガー: "think" , "think more" , "think harder" 機能: 思考過程を可視化して深い分析を実行 用途: 複雑な問題の深い分析・設計検討 Plan機能（実行計画） 大規模タスクで自動的に計画を提示 段階的な実行手順を明示 ユーザー承認後に実行開始 @unsoluble_sugar 17

よく使うコマンド Claude Code 超入門 - 前回セッションの続きから開始 /exit - セッション終了 /help - ヘルプ表示 /clear - 会話履歴クリア /model - 使用中のモデル確認・変更 /init - CLAUDE.md初期化 /review - コードレビュー依頼 claude --continue @unsoluble_sugar 18

Claude Code 超入門 第2部 バイブコーディング実践 自分用ニュースまとめを作る @unsoluble_sugar 19

バイブコーディングとは Claude Code 超入門 「雰囲気」で指示してAIがコードを生成 従来: 詳細な仕様書 → 実装 バイブ: ざっくりイメージ → AI実装 → 調整 メリット 開発速度の大幅向上 アイデアの即座の実現 試行錯誤のコスト削減（ちょっと怪しい） @unsoluble_sugar 20

実際作ってみたプロジェクト Claude Code 超入門 https://unsolublesugar.github.io/daily-tech-news/ @unsoluble_sugar 21

• https://unsolublesugar.github.io/daily-tech-news/

機能詳細 Claude Code 超入門 機能 日本のテックメディアRSS収集 毎日自動更新（GitHub Actions） カード表示UI アーカイブ機能 RSS配信 開発期間: 約2週間（実作業10時間） @unsoluble_sugar 22

プロジェクト構成 daily-tech-news/ ├── src/ │ ├── templates/ │ ├── generators/ │ └── config/ ├── assets/ ├── archives/ ├── fetch_news.py ├── .github/workflows/ └── CLAUDE.md Claude Code 超入門 # モジュール化されたソースコード # テンプレート管理 # 生成エンジン # 設定管理 # CSS/JS/画像 # 過去記事アーカイブ # メインスクリプト # GitHub Actions # AI指示書 技術スタック Python（feedparser, BeautifulSoup） GitHub Actions（自動更新） GitHub Pages（ホスティング） @unsoluble_sugar 23

開発の流れ（1/3） Claude Code 超入門 初期構想をClaude Codeに伝える 「日本のテックメディアのRSSを集めて 毎日自動更新されるサイトを作りたい」 Claude Codeの対応 プロジェクト構造の提案 fetch_news.py の作成 必要なライブラリのインストール 初回実行とデバッグ @unsoluble_sugar 24

開発の流れ（2/3） Claude Code 超入門 機能追加の指示 「記事をカード形式で表示したい サムネイル画像も取得して」 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 @unsoluble_sugar 25

開発の流れ（3/3） Claude Code 超入門 GitHub Actions設定 「毎日7時に自動更新してSlackに通知」 生成されたワークフロー schedule: - cron: '0 22 * * *' # JST 7:00 steps: - run: python fetch_news.py - run: git commit -m " 更新" @unsoluble_sugar 26

Issue駆動開発の実践 @unsoluble_sugar Claude Code 超入門 27

PR作成の自動化 @unsoluble_sugar Claude Code 超入門 28

デバッグのコツ Claude Code 超入門 Claude Codeとの効果的な対話 1. エラーメッセージを共有 「以下のエラーが出ている。原因の詳細調査と対策を提案して: [エラー内容]」 2. 期待と現実のギャップを説明 「ピックアップされるURLの重複を防ぎたい。ページ違いのものやリファラは除外して」 3. 段階的な確認 「まずRSS取得だけ動作確認して」 @unsoluble_sugar 29

実装の統計 Claude Code 超入門 約2週間の開発成果 項目 数値 総コミット数 150+ Issue数 30+ PR数 30+ コード行数 4,000行以上 モジュール数 9個 人間の作業時間: 約10時間（主に指示とレビュー） @unsoluble_sugar 30

Claude Code 超入門 学び 小さく始める Issue駆動 実行して確認 CLAUDE.mdの活用 最初はシンプルに、徐々に機能追加 Claude Codeの実行機能を最大活用 @unsoluble_sugar タスクを明確化して着実に進める プロジェクト固有のルールを記載 31

Claude Code 超入門 第3部 Unityでの活用 @unsoluble_sugar 32

Claude Code 超入門 Unityでの活用 Claude Codeだけでできることは限られる 可能な作業 C#スクリプトの生成・編集 プロジェクト構造の理解 コードレビュー @unsoluble_sugar 直接的な制限 UnityエディタのGUI操作不可 シーン編集不可 アセット管理不可 33

Unity MCP連携 Claude Code 超入門 https://github.com/CoplayDev/unity-mcp まだ触れてません… @unsoluble_sugar 34

• https://github.com/CoplayDev/unity-mcp

Claude Code 超入門 主要機能 MCP連携でUnity操作が可能に（なるらしい） - スクリプト管理 manage_gameobject - シーン操作 manage_asset manage_script C#スクリプトの自動生成 既存スクリプトの編集・リファクタリング MonoBehaviour、ScriptableObjectの作成 manage_scene GameObjectの配置・削除 Hierarchy構造の自動構築 コンポーネントの追加・設定 @unsoluble_sugar - オブジェクト操作 Transform設定（位置・回転・スケール） コンポーネントの動的追加・削除 Parent-Child関係の構築 - アセット管理 プロジェクトへのアセットインポート マテリアル・テクスチャの自動設定 プレハブの作成と管理 35

Unity単体テストとかで使えそう？

Claude Code 超入門

[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);
}

@unsoluble_sugar

36

Claude Code 超入門 まとめ @unsoluble_sugar 37

Claude Code 超入門 Claude Codeが変える開発体験 大幅な開発速度向上を実現 Before（従来） 設計 → 実装 → テスト → デバッグ 期間: 2-3ヶ月 After（Claude Code） アイデア → 対話 → AI実装 → レビュー 期間: 2-3週間 …とはいえ実務では Kiroのような「仕様駆動開発」を取り入れるのが良いかも @unsoluble_sugar 38

ポイント Claude Code 超入門 明確な指示 「何を作りたいか」を具体的に 段階的な実装 小さく始めて徐々に拡張 AIとの協調 人間の創造性 × AIの実装力 @unsoluble_sugar 39

Claude Code 超入門 このスライドについて 実はこのプレゼン資料もClaude Codeで作りました 使用技術 Marp: Markdown → スライド変換 Claude Code: コンテンツ生成・構成 HTML表示: ブラウザで閲覧 PDF出力: 印刷・配布にも対応 開発の流れ 企画・構成: 人間が方針決定 スライド作成: Claude Codeが自動生成 調整・修正: 協働で完成度向上 Markdownベースなので コーディングエージェントとの相性が良い @unsoluble_sugar 40

参考リンク Claude Code 超入門 プロジェクト Daily Tech News GitHubリポジトリ ドキュメント Claude Code公式 CoplayDev/unity-mcp @unsoluble_sugar 41

• https://unsolublesugar.github.io/daily-tech-news/
• https://github.com/unsolublesugar/daily-tech-news
• https://docs.anthropic.com/en/docs/claude-code
• https://github.com/CoplayDev/unity-mcp

Claude Code 超入門 ご清聴ありがとうございました @unsoluble_sugar 42