「.NET 開発基盤部会 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。

目次 †

↑

概要 †

↑

Week 1 †

Vibe Coding for fun and profit（バイブ・コーディング）

↑

Day 1 †

1-7日

  1. コースへようこそ：Cursor AIを使った3Dゲーム制作：
    • Cursorで「矢印キーで移動し、スペースキーで発砲して、1台のコンピュータ対戦相手とアリーナで戦う、3D一人称視点シューティングゲームのウェブサイトを構築してください。」と入力
    • すると自動でコード（index.html）を生成（Cursorは以前サインアップしたアカウントで試したらモデル選択が「Auto」からできなかった）
    • ポイントは単純なコード作成に留まらず、ファイル生成や、Node.jsのインストールから、起動（npx serve .）などの作業も行われる点。
  2. Cursor AI Agentで一人称視点シューティングゲームを構築する：
    • 生成物を分析・動作確認し、プロンプトを修正し得て動作を改善することを行う。
    • その中で「Zero-shot（ゼロ・ショット）」「Ralph Loop（ラルフ・ループ）」と呼ばれる手法（単語レベル）を紹介する。
  3. Agentic Coding（エージェント型コーディング）のための欠かせないマニュアル：
    • コース誕生のきっかけ（カルパシー氏のポスト）、
    • 対象となる受講者
      • すべての人向け、意欲あるエンジニア・初心者～シニア・ベテランエンジニア
      • コース修了後に得られる成果
      • コースのスタンス（誇大広告（ハイプ）への警戒）について解説。
  4. 講師紹介＆3週間AI Coderコースのロードマップ：
    • 講師（Ed Donner）の経歴と実績
    • 本コースの位置づけ「AI（エージェント）を使ってコードを書く」「幅（Breadth）」「深さ（Depth）」の両立。
    • 3週間のカリキュラム構造。
  5. Vibe Coding、Agentic Coder、そしてClaude Codeのようなコーディング・エージェント：
    • 「バイブ・コーディング（Vibe Coding）」の誕生とこれまでの歩み。
    • 曖昧な用語の整理（Vibe Coder、Vibe Engineer、Agentic Coder、Coding Agent。
    • 3つの対話I/F（IDE型、エディタ拡張型、CLI型。
    • 結論と心構え（この分野の進化スピードは凄まじく、毎日膨大な情報（津波）が押し寄せている）
  6. AIコーディングの8段階：ChatGPTからAgent Orchestrationまで：（Steve Yegge氏の説）
    1. AIをコーディングに活用するレベルは、初級から上級まで以下の8つのステージに分類される。
      • ステージ1：ChatGPTとの対話や、AIによるコードの自動補完を参考程度に使う。
      • ステージ2：IDEのサイドバーにコーディング・エージェントを配置し、承認を得ながらコードを修正。
      • ステージ3（YOLOモード）：エージェントを全面的に信頼し、すべての変更を未確認で即座に承認（一括受け入れ）。
      • ステージ4：意識の対象がコードからエージェントへと移る。エージェントに集中し、コードの変更履歴はたまに眺める程度。
      • ステージ5：IDEからCLIに移行。Claude Codeなどを使用し、人間は画面のスクロールをただ眺めるか、席を外して完了を待つ。
      • ステージ6：CLI上で複数のエージェント（3〜5体）を同時に起動し、チームとして並行してプロジェクトを進めさせる。
      • ステージ7：10体以上のエージェントをCLI上で稼働させ、人間がそれらの進捗や連携を自ら管理・調整。
      • ステージ8：役割を持ったマルチエージェントネットワークが自動で機能する最上級ステージ。
    2. ステージとアウトラインのマッピング
      1. 第1週：ステージ2〜4
      2. 第2週：ステージ5
      3. 第3週：ステージ6〜8
      4. 企業の開発における最適解はステージ5〜6
    3. 利用コスト
      1. コース自体は無料で完結可能
      2. 推奨されるプラン：初期はCursorの無料期間を利用し、第2週・第3週に向けてClaude Code（月額20ドルプラン）に加入。
      3. 自己責任の原則：費用の管理や解約の判断は必ず受講生自身が行う必要があります。
  7. まとめ：これから始まる、あなただけのAgentic Coding Journey
    1. 変化の激しい環境への心構え
    2. 本コースha、全員が同じコードを実行して同じ結果を得るわけではない。
    3. 講師によるサポートとコミュニティへの参加（Q&Aやメール、LinkedIn?）
↑

Day 2 †

8-13

  1. LLMの仕組み：トークン、メモリ、推論を解説：
    • 大規模言語モデル（LLM）の基本
    • LLM単体 と LLMを組込んだAIアプリケーションの違い
    • AIアプリケーションでインテリジェンスを疑似体験させるトリック
      • トリック1：記憶の錯覚（Ilusi Memori）：チャット履歴
      • トリック2：推論・思考（Penalaran / Pemikiran）：Few-shot
  2. ツール、ループ、そしてAI Agentの定義：
    • AIアプリケーションでインテリジェンスを疑似体験させるトリック
      • トリック3：ツール（Tools / Tool Calling）
      • トリック4：ループ（Loop）
    • AIエージェントの最新の定義
      「目標を達成するために、ループ（繰り返し）の中でツールを実行するLLMシステム」
  3. Context Engineering：System Prompt、Context Window、AGENTS.md：
    • コンテキストエンジニアリングとは以前は「プロンプトエンジニアリング」と呼ばれていたが、最適な出力を得るための全技術を指す「コンテキストエンジニアリング」へと概念が拡張された。
    • 入力コンテキストを構成する主要要素：システム・プロンプト、ツールの説明、メモリ、会話履歴、など
    • コンテキストウィンドウには最大サイズがあるのでコンパクション（圧縮、要約）技術もあるが信頼性に課題もある。
  4. AGENTS.mdを極める：コーディング・エージェントのためのContext Window戦略
    • AGENTS.md とはコーディング・エージェント用のシステム、プロジェクトに沿ったプロンプトを記載したMarkdown形式のファイル。
    • 配置ルールは、ルートとサブディレクトリに配置できる。ルートはプロジェクト全体に適用され、サブはサブプロジェクトに適用される。
    • 効果的な記述のコツ：
      • 簡潔、明確、断定的に、プロジェクト全体目標と成功基準、肯定文に集中、強調は大文字の 「IMPORTANT（重要）」 を使う。
      • 長文で冗長、過剰、防御的（数多くの例外ケース）
    • 2025年型アプローチ vs 2026年型アプローチ
      • 2026年型の思想（自律・手放し）：研究分野ではプログレッシブなコチラが重視されている。
      • 2025年型の思想（管理・最適化 ※話者の推奨）：実用的な大規模プロジェクトにおいてはコチラの方が成果が出る。
  5. AIコーディング・ワークフローの進化：YOLOからRalph Loopsへ：
    • 2025年のマインドセット（低い〜中程度の信頼度）：マイクロマネジメント、計画・実行・レビュー・テスト、仕様ベース開発 / 信頼するが検証する
    • 2026年のマインドセット（高い信頼度・自律駆動）：YOLO、ラルフ・ループ（Ralph Loops）、マルチエージェント（Multi-agent / Swarm）
    • YOLOは元々は英語の古い格言的な表現（「人生は一度きり」）でAIの文脈では「一度きりだから大胆に試せ」「失敗を恐れず全力で行動せよ」の意味（マーケっぽいな）
    • 賢く見えないシンプソンズのキャラクター（Ralph Wiggum）に因んで「しつこく繰り返せば最終的に成功する」と言うAIの運用哲学。
  6. ハイプ（過度な期待）を超えてLLM（現在の主要モデル）を比較する
    • AI Coding Agentsのハイプ（過度な期待）に流されないこと。一時急上昇した単体LLM性能の成長曲線は、今後、緩やかになる予測。
    • （Artificial Analysis（生成AI比較サイト））で冷静に主要モデルGPT 5.2 Codex、Claude Opus 4.5、Gemini 3 Pro、GLM-4を比較（コレを記載している時点でも既に陳腐化）
    • LLMエージェントのブレイクスルーは
      • 推論技術（Reasoning techniques）をベースにしたツール使用・計画立案・自己修正の機能に依存しており、
      • 人手のChain of Thought（CoT）等のPEを参考にした教師あり学習（SFT）ベースの強化学習（RL）によって段階的思考能力を獲得したため。
↑

Day 3 †

14-20

  1. Cursor、Copilot、Codex、そしてAgentic Vibe Codingの実践：
    • 講義の目的と心構え（バイブ・コーディングの原則）
      • ツールの選択は自由： 紹介するツールをすべて使う必要はありません。見るだけでも1つ選んで使い続けるでも。
      • 結果は人それぞれ： 使用するモデル（無料版や安価な版など）によって講師と異なる結果が出ることがある。
      • イライラしない（最も重要）： 的外れな出力には「焦らず、フィードバックを与え、問題を極限までシンプルにする」
    • ハンズオン：環境構築とプロジェクトの準備
      • Cursorの起動とNode.jsのインストール
      • GitHubからのプロジェクト複製（クローン）と切り替え
  2. AGENTS.mdファイルとVibe CodingのためのCursor設定を探索：
    • Cursorの基本操作（ショートカットキー）
      • 左サイドバー（ファイルシステム）の開閉：Mac: Command + B / Windows: Ctrl + B
      • 右サイドバー（エージェントチャット）の開閉：Mac: Command + Option + B / Windows: Ctrl + Alt + B
    • AGENTS.md（要件定義書）ファイルの役割と構成
      • ビジネス要件（Business Requirements）セクション
        ・Webアプリとして動作するカンバンボードのMVP（最小限の試作品）を作る。
        ・機能はシンプルに洗練された美しいUIを最優先し、起動時にはダミーデータを表示。
      • 技術的詳細（Technical Details）セクション
        ・技術スタック：Next.js（frontend サブディレクトリ内）。
        ・データの永続化（保存）やユーザーログインは実装しない。
      • カラースキーム（Color Scheme）：デザインに使用する好みの配色を指定（AIに任せてもOK）。
      • 戦略（Strategy）：フェーズごとの計画策定、環境構築、UT/CU/ST、不具合修正という一連の標準的な開発フローを指定。
      • コーディング標準（Coding Standards）
        ・最新バージョンのライブラリ使用、過剰な設計の禁止（シンプルさの徹底）。
        ・「絵文字は一切使用禁止（No emojis ever）」（エラーの原因になることがあり、不要なため）。
    • AGENTS.md を作成・運用するコツ
      • 曖昧さを排除し、正確かつ肯定的な表現で明確に指示を出す。
      • 重要なポイント（「シンプルにする」など）は、複数のセクションで重複して書いても問題ない。
      • 最初は最小限の記述で実行し、AIの出力結果を見ながら、失敗した部分を修正・追記していく「反復的なアプローチ」が有効。
    • Cursorのエージェント設定（実行モードの選択）
      設定メニュー（Mac: Command + Shift + J / Windows: Ctrl + Shift + J）の「agents」＞「auto run」セクションから、エージェントの実行モードを個人のリスク許容度に合わせて選択。
      • YOLOモード（Run everything unsandboxed）：すべての処理を承認なしで自動実行する。リスクを理解している人向け（講師はこのモードを推奨・選択）。
      • 安全モード（Auto run in sandbox / Ask every time）：ファイル作成などのステップごとにユーザーの承認を求める。何が起きているかを確認しながら進めたい初心者向け。
  3. YOLOモードでCursor AI Agentを使ってKanbanアプリを構築：
    • 開発の準備とプランニング
      • 画面配置とモデル設定: 作業スペースを広く確保するためエージェント画面を左に広げ、使用モデルはCursorに最適化を任せる「auto（自動選択）」モードに設定。
      • プランニングの実行: エージェントを「plan（計画）」モードに切り替え「Go ahead and plan.」と指示を出す。
      • デフォルトで読み込まれる設定ファイル AGENTS.md を基に、AIが自動で「kanban mvp implementation plan（実装計画書）」やアーキテクチャの概要を生成。
    • 自動ビルドの実行（YOLOモード）
      • 自動開発の開始: 生成された計画書のレビューをスキップし、「build」ボタンを押して開発を開始。
      • 自律的な開発プロセス: AIがファイルの作成（.gitignore やフロントエンド用ディレクトリ）、テストの実行と失敗時の自動修正を自律的に繰り返す。
      • ユーザーはコンテキスト（メモリ）使用量が徐々に増えていく様子や、AIが自ら思考・修正するプロセスを確認。
    • アプリケーションの動作確認
      • 自動起動と初期機能: ビルド完了後、アプリ（Next.jsベース）が自動起動し、ローカルサーバー（localhost:3000）でかんばんボードが立ち上がる。
      • 初期状態の評価: タスクカードの追加、削除、列名の変更、列をまたぐドラッグ＆ドロップなどの基本機能は初回から動作。
      • ただし、画面下部にNode関連のエラー（赤アイコン）が表示され、列内でのカードの並び替えができないなどの課題が残った。
    • フィードバックによる反復改善
      • 追加指示の提示: AIに対し、「エラーの修正」「ドラッグ＆ドロップの挙動のスムーズ化」「列内での並び替え機能の追加」「画面への紫と黄色の配色追加」をフィードバックとして指示。
      • 改善結果の確認:デザインに指定通りの紫と黄色が取り入れられ、列内でのカードの並び替えも可能になった。一方で、エラー表示の赤アイコンは完全には解消されなかった。
  4. VS CodeでGitHub Copilotを使ってKanbanボードを構築：
    • プロジェクトの準備とディレクトリの変更（既存の Kanban ディレクトリの名前を Cursor_Kanban に変更し、再度Gitクローン）
    • GitHub Copilot と VS Code の導入：Copilot は無料プランでも一定回数利用可能。今回は Cursor のベースでもある VS Code（オープンソースのコードエディタ）に拡張機能としてインストールして使用。
    • GitHub アカウントと連携し、ショートカットキー（Mac: Command + Shift + I / PC: Ctrl + Shift + I）またはメニューから「Chat」を起動して、使い慣れたサイドバー形式の「Build With」エージェントを表示。
    • 実装の開始と進行：エージェントを「常に許可（YOLOモード）」「Plan（計画）モード」に設定し、AGENTS.md を読み込ませてタスクの計画を作成、計画完了後、「Start implementation（実装開始）」を実行。
    • 途中でサーバー起動のディレクトリを間違えるなどのバグが発生し、最終的にエージェントはサーバー起動コマンドの待機状態でフリーズしたため、手動で処理を停止（キャンセル）。
    • 手動でローカルサーバーを起動（npm run dev）してブラウザで確認したところ、デザインやドラッグ＆ドロップの挙動は非常によく、エラーも出ていなかった（Claude Haiku という小型モデルが使用されたと推測）。
      • しかし、「カードの削除（Delete）機能」が動作しないというバグが見つかった。開発者がバグを指摘すると、エージェントは「推測」で修正コードを書き「修正が完了した」と主張したが、実際には直っていなかった。
      • コーディング・エージェントの「原因を検証せず、勝手に推測して勝利宣言をする」対策として、エージェントに対して以下の規律あるステップを明確に指示
      • 「最初に問題を再現」「再現できたことを証明」「根本原因を見つける」「修正し、直ったことを実証」この具体的な指示を与えて再度実行させた結果、エージェントは見事に削除機能を修正することに成功。
      • AIエージェントにデバッグを依頼する際は、「直した」という言葉を鵜呑みにせず、人間がボスとしてプロセスを管理し、「再現・原因特定・修正・実証」のステップを厳密に指示することが成功への近道。
  5. OpenAI Codex VS Code拡張：ゼロショットでKanbanアプリを構築：
    • OpenAI CodexはCLIツールとしての側面を持つが、今回はIDE（VS Code）の拡張機能として使用する。利用にはOpenAIのアカウント（ChatGPTのサブスクリプションプラン）が必要となる。
    • 「agent full access」（YOLOモード）、「GPT 5.5」、「reasoning effort」を「High」に設定（※思考させすぎると逆効果になることもある）。
    • 同様に、アプリケーションの動作確認（自動起動と初期機能、初期状態の評価）を実施し、必要に応じてフィードバックによる反復改善（追加指示の提示、改善結果の確認）を行う。
  6. Antigravity IDEとGeminiでKanbanアプリを構築：
    • 開発環境の移行と準備：4つ目のツールである「Antigravity」へと移行。既存のKanbanフォルダを Codex_Kanban にリネームし、git clone を用いてまっさらな状態のKanbanプロジェクトを再配置。
    • Antigravityの概要と特徴：antigravity.google からダウンロード可能。Cursorと同様に VS Codeのフォーク（クローン） であり、部分ウィンドウの構成もほぼ同じ
    • 利用モデル: デフォルトでは Gemini が提示されるが、AnthropicのモデルやGPT-OSSも選択可能。今回は最高ティアの Gemini 3.5 Flash (High) を使用。
    • 設定: Lintエラーの自動修正機能（Agent Autofix lints）を有効化。また、確認なしで処理を続行させる「YOLOモード（Always proceed）」に設定。
    • 設定ファイルの配置：Antigravityは業界標準になりつつある AGENTS.md を読み込まないため、プロジェクトルートに .agent/rules/ という専用のディレクトリを作成。
    • ルールの移行: その中に strategy.md を作成し、中身のコンテキストを常に読み込ませる「Always on（常時有効）」に設定。元あった AGENTS.md は削除。
    • 実行結果と検証: AIはブラウザ自動化ツールの Playwright を起動し、自身で画面の見た目をチェックしたりテストを実行したりして、エラーがあればその場で修正。
    • 成果物の評価: 完成したKanbanアプリは、デザインが新鮮かつクリーンで動作もスムーズだったが、一部の機能がシンプルすぎる（不十分な）ため、今後の改善の余地あり。
  7. Cursor vs Copilot vs Codex vs Antigravity：最終評価：
    • 話者は、カード作成機能の改善をGemini（Google Antigravity環境下）指示した結果、JSのプロンプトからモーダル表示されるようになり成果に満足。
    • 「Codex」（Codex IDEで動作するモデル）をトップ（勝者）としつつも、Antigravityで動作する「Gemini 3.5 Flash (High)」や「GPT 5.5」との差は僅差であり、どれを選ぶかはユーザーの好みや環境次第。
    • 主要なAIコードエディタ（エージェント）の共通点はどれもUI（左右のサイドバー、プランモードや実行モードなど）や動作の仕組み（AGENTS.md や .agent ルールによる駆動）が非常によく似ている。
↑

Day 4 †

21-26

  1. YOLOモード：IDEでのAgentic Codingに適したLLMの選び方：
    • ツールそのもの（IDE）と、裏側で動くAIモデル（LLM）を区別することが重要
    • 各IDEはプランに応じてモデルを切り替えることが可能（推奨は頻繁に変わる）
    • Cursor：AnySphere?/Composer、Copilot：Claude Haiku、Codex：GPT 5.5、Antigravity：Gemini 3.5 Flash
    • ツール（IDE）の使い心地の差はわずかであり「どのLLMに意思決定をさせるか」
    • ただ、実際ヤッてみると既定のLLMも（頻繁に）更新されていることが解る（都度確認）。
    • 小型モデルでのYOLOは破綻リスクが高い。ステップ毎に差分（Diff）を目で確認しながら進める。
  2. Vibe Codingを成功させる5つの原則：
    • 「5大原則（Be the Boss）」：AIを自律的な意思決定者として扱うのではなく、優秀だが助手として扱うマインドセット
      • AGENTS.md（指示書）の充実: 「要件（仕様）」「スタイル」「成功基準」の3要素を、簡潔かつ明確に記述。
      • 小さく始める: 最初から複雑なアプリを狙わず、まずは最も基本的なMVP（最小限の製品）の構築からスタート。
      • 段階的に進める（インクリメンタル）: 各ステップで常にテストと検証を繰り返し、規律を持ってマイルストーンを達成。
      • 油断しない（怠けない）: 初期にうまくいくとAIを過信しがちだが、AIが過去のステップで致命的な勘違いをしているケースがある。常に警戒。
      • 泥臭く検証する（異議申し立てと証拠の要求）: AIが「修正した」と自信満々に言っても鵜呑みにせず、根本原因、テストの結果、証拠を厳しく求める。
    • 混乱や失敗：「フラストレーションや壁にぶつかることもプロセスの一部」だと受け入れ、それを管理・回避する方法を学ぶことが成功への鍵。
      • AIに仕事を丸投げするとスキルが身につかず、将来のフラストレーションに繋がる。
      • AIに質問を投げかけ、何が起きているかを理解してシニアへのステップアップに活かす。
      • AIは時に的外れで、自信満々に間違え、根本解決ではなくパッチを当てようとする。常にチェックする。
      • コードを書く喜びは減るが、苦手分野を克服し、システム全体を高速に構築する新しいパワーを手に入れたと捉える。
  3. 責任あるYOLOコーディング：OpenRouter?でAIプロジェクトをセットアップ：
    • YOLOモードには楽しさがある反面、大きなリスクやトレードオフが存在
      • ジュニア開発者の学習への悪影響（Anthropicの調査）：AI不使用のグループの方が、AI使用グループよりも技術の理解度が有意に高かった。
      • OSSコミュニティ（Jellyfin）のAI利用ポリシー：会話におけるLLM出力の直接使用は禁止、PRは小さくまとめ自身の言葉で説明できないコードは拒否。
      • AIをアシスタントとして使うのは自由だが、最終的なコードの所有権と責任は人間（自分）にある（"We own the code"）。
    • 制作プロジェクトの概要
      • 目標: AIエージェントを活用し、自分自身のキャリアに関する質問に答えるAIチャットボット（デジタルツイン）を組み込んだ「個人ポートフォリオウェブサイト」を構築する。
      • 開発のコツ: 問題に直面した場合は、機能を削ぎ落として「極限までシンプルにする」こと。
    • OpenRouter?（APIプラットフォーム）のセットアップ
      • 複数のLLM APIを一つのアカウントで一元管理できるOpenRouter?（またはOpenAI）を使用
      • アカウント作成後、「Keys」メニューからAPIキーを発行、（sk-or-v1-...で始まる文字列）が1文字でも間違っていると動作しない。
      • 無料：「https://openrouter.ai/settings/privacy」→「から、入出力の学習・公開の利用を許可する必要がある。
      • 有料：「Credits」からチャージが可能。OpenRouter?は最低2ドルから入金できるため、初心者にも優しい仕様となっている。
  4. YOLOモード：CursorでGPT Codexを使ってNext.jsウェブサイトを構築：
    CursorのYOLOモードを使用し、プロンプト一つでローカル環境に個人のポートフォリオサイトを構築する実践的なチュートリアル
    • プロジェクトの初期設定
      • フォルダ作成: Site という名前の新規プロジェクトフォルダを作成し、Cursorで開く。
      • 環境変数ファイルの作成: .env ファイルを作成し、OpenRouter?（またはOpenAI）のAPIキーを正確に記述して保存する。
      • （このOpenRouter?（またはOpenAI）は、Cursorのエージェントではなく後述のアプリのAI Digital Twinチャット機能で使用）
      • Git対策: .gitignore ファイルを作成し、セキュリティのために .env を指定してリポジトリに含まれないようにする。
    • ソースデータの準備
      • 自身のLinkedIn?のプロフィールページをPDF（LinkedIn?.pdf）として保存し
      • プロジェクト・ディレクトリに配置する（PDF化できない場合はテキストのコピペや履歴書で代用）。
    • Cursorの設定変更（YOLOモードの設定）
      • Usage Summary: 常に表示（Always）に設定し、モデルの使用量を把握できるようにする。
      • Auto Run (YOLO設定): ステップごとの承認を省くため、Run Everything、Un-Sandboxedに変更。
      • モデルの選択: 高品質な出力を得るため、より強力なモデルである GPT 5.2 Codex High を選択。
    • エージェントへの指示とサイト構築
      • 以下の要件をプロンプトで指示し、エージェントに自動構築させる。エージェントは自動的に web というサブフォルダを作成し、Next.jsサイトを構築する。
      • 「Next.jsを使用し、LinkedIn?.pdfを元に、エンタープライズ感とエッジの効いたスタイリッシュなローカルWebサイトを作って欲しい。自己紹介、経歴、将来のポートフォリオへのリンクを含め、洗練されたデザインにブラッシュアップして完成したら教えて欲しい。」 
        Please build me a Professional Website running locally. My linkedin profile is in linkedin.pdf. Make the website stunning: enterprise meets edgy. It should include about me, my career journey, links to a portfolio (for future). Iterate to make it as slick and professional as possible and let me know only when complete. Use NextJS.
    • エラー対応と完成したサイトの確認
      • エラー発生と修正: ターミナルで npm run dev を実行し、ブラウザ（localhost:3000）で開いたところエラーが発生。エラー文をそのまま解説なしでCursorにペーストして再投げしたところ、即座に修正された。
      • 完成したサイトのレビュー:
        ・デザインは「エンタープライズ×エッジ」のテーマに沿った、ダークモードを取り入れた美しい仕上がり。
        ・LinkedIn?から抽出された自己紹介や経歴タイムライン、ポートフォリオ用のセクションが綺麗に配置されている。
        ・プロフィールから自動取得した本物のメールアドレスへのリンクや、自身の既存ウェブサイトへのリンクも正しく機能している。
        ・エージェントへのシンプルな指示（と1回のエラー修正）だけで、LinkedIn?のPDFから情報を読み取り、デザイン性の高い機能的なNext.jsサイトが短時間で完成。
  5. OpenRouter?とVibe CodingでAI Digital Twinチャットを追加：
    • バックアップとバージョン管理の重要性
      • 新たな機能実装（YOLOコーディング）を行う前に、進捗を失わないためのチェックポイント（バックアップ）作成を推奨。
      • 本来は Git を使用して適切なコミットを行うべきであり、Gitに不慣れな場合の代替案として、フォルダごとのコピペを提案。
    • AIエージェントへの機能追加指示
      • AIエージェントに対し、経歴について回答できる「デジタルツイン（AIチャット）」機能の追加を指示。
      • 技術的な仕様として、OpenRouter? のAPI（APIキーは .env ファイルに格納）および同プラットフォーム上の有料版モデルの指定。
    • 実装結果の検証と「バイブコーディング」の課題
      • npm run dev でローカルサーバー（Localhost 3000）を起動し、動作確認
      • UIは一般的なチャット画面とは異なるユニークなデザインで生成され、経歴に関する質問（「最も誇りに思っていることは？」など）に対して適切な回答を返した。
      • 一方で、画面起動時に不自然にスクロールする挙動や、一部のボタンが反応しないといった「バイブコーディング」特有の粗さ（バグ）も見つかった。
    • 今後のステップ（リファクタリングと改善）
      • 検証なしで進めるMVP（最小限の試作品）開発としては機能しているものの、今後はテストを徹底し、繰り返し改善（イテレーション）していく必要がある。
      • ソースコード（src/app/api/chat/route.ts）から、現状のシステムプロンプトは非常にシンプルであるため、プロフィール情報などをプロンプトに組み込むといった改善を検討。
  6. チュートリアル、Opusによるコードレビュー、クロスモデルコラボレーション：
    • チャットUIの改善とトラブルシューティング
      • 課題と解決策: チャットのスクロール問題やプロンプトの修正をAI（Codex）に指示。UI色の不具合修正で4〜5回往復したため、細かい指示をやめ「再構築する」というアプローチを取り、成功させた。 
        No it's not working. Please can we go a different direction - please take out this style stuff. Can we use a different Chat widget, something modern as of 2026, with a really great look at feel. Try again with a different, modern chat widget.
      • 教訓: AI開発で泥沼にハマった（同じミスを繰り返す）時は、原因究明に時間をかけるより、別のアプローチで作り直させた方が早い場合がある。
    • AIによるチュートリアル作成と学習
      • ローカル環境（npm run dev）での動作確認後、初心者向けの包括的なチュートリアル（Markdown形式）の作成をAIに指示。 
        Please now write me a comprehensive tutorial in markdown called tutorial.md that is suitable for a complete beginner in frontend coding, to walk me through what you have done here. Include a summary of the technology, a high level walk through, and a detailed code review...
      • AI自身にコードを客観的に評価させると同時に、人間の開発者がコードの構造やフロントエンド・バックエンドの仕組みを深く理解するための学習教材として活用できる。
    • 異なる複数のLLM（AIモデル）によるクロスレビュー
      • アプローチ: 開発を担当したCodexから、より強力なモデルであるAnthropicのOpus 4.5へと切り替え、コードレビュー（review.mdの作成）を指示。
      • メリット: 環境変数（.env）の扱いに関する潜在的なリスクなど、客観的で高精度な改善点（アクションプラン）を洗い出し、レビュー結果を再びCodexに読み込ませて修正させる、といったAI同士の連携が可能。
    • 総括と次のステップ
      • 今回の手法は「YOLOコーディング（vibe coding）」に「チュートリアル作成」と「別モデルによるコードレビュー・修正」を組み合わせることで品質を担保する開発サイクルと言える。
      • 開発がうまくいかない時は「徹底的にシンプルにする（simplify）」ことがコツであり、本番環境へのデプロイ（Vercelなど）を希望する場合は、それもAIに手順（ToDo?リスト）を出させると良い。
↑

Day 5 †

27-33

  1. Karpathyが語るVibe Codingと商用MVP構築のルール：
    • 「バイブコーディング（Vibe Coding）」をビジネスに活かし、収益化が可能な商業用MVP（実用最小限の製品）を構築。今回はルールを厳格に守ることで成功へと導く手法を実践。
    • 元OpenAIの著名な研究者アンドレイ・カーパシー（Andrej Karpathy）の時系列のツイート（https://x.com/karpathy/status/2015883857489522876）を基に、本質と現状（2026年現在）を考察。
      • バイブコーディング誕生：LLM（Cursor ComposerやClaude 3.5 Sonnetなど）の進化により、コードの存在を忘れて「ノリ（Vibes）」で開発する新しい手法が生まれた。
      • 急激な進化への困惑：エージェント、プロンプト、MCP（Model Context Protocol）、ワークフローなどの技術が乱立し、プログラマーですら圧倒される時代になっています。
      • カーパシー自身の開発スタイルも、かつての「手動補完80%：エージェント20%」から、現在は「エージェント80%：手動修正20%」へと逆転。
    • エージェント開発における重要な気づき
      • 過剰なハイプへの警戒（Watch it like a hawk）:「IDEは不要」「エージェントの群れ（Swarm）がすべて解決する」といった過度な期待。モデルは確実に間違えるため常に挙動を監視。
      • 不屈の精神と生産性の「拡大」：エージェントは疲弊せず、働き続ける。その恩恵は単なる「生産速度」というより「生産量」として現れる。
      • 面倒な定型業務やエラーの泥沼から解放されるため、コードを書くこと自体よりも「モノを組み立てる（ビルドする）こと」に喜びを感じる人にとって、刺激的で楽しいものになる。
      • スキルの退化（Atrophy）と粗悪なコード（Slop）の氾濫に対する懸念もある。今後は、絵文字だらけの冗長なコードではなく、簡潔で洗練されたコードが強く求められる。
    • バイブコーディングを成功させるための実践ルール
      • 開発者がジュニア（初心者）であれシニアであれ、成功のために共通する鉄則は「自分がボス（主導権を握る存在）になる」こと。
      • 事前準備の徹底: AGENTS.md などのファイルに、仕様、開発スタイル、成功基準を簡潔かつ明確に言語化して投資する。
      • 段階的な開発と検証: 常にシンプルに始め、少しずつ機能を追加（インクリメンタル開発）し、毎回テストを行って検証。
      • 怠惰にならない: AIの出力を鵜呑みにせず、常に根拠（エビデンス）を求める。
      • フラストレーションの管理: AIが同じエラーを繰り返すなど、壁にぶつかった時は一歩引いて、アプローチを変える柔軟性を持つ。
    • 開発者の役割
      • ジュニアエンジニア：AIを「知識はあるが先走って失敗する熱意ある部下」と見立て「マネージャー」として振る舞うことが学びと成功につながる。
      • シニアエンジニア：コーディングから解放された分、より大きな価値構築に集中し、自身の専門知識をAIへの挑戦やクオリティコントロールに活かす。
    • 結論
      • YOLOに対する過度な期待は捨て、メリットとデメリットを正しく理解した現実的なマインドセットを持つことが重要。
      • タカのように監視し（Watch it like a hawk）、一歩一歩着実にビルドしていく姿勢で、この新しい開発体験を心から楽しむ。
  2. Webアプリ基礎：フロントエンド、バックエンド、API、Dockerセットアップ：
  3. GitHub CopilotとFastAPIでフルスタックプロジェクトをセットアップ：
  4. AI Copilotでステップバイステップ構築：計画と足場作り：
  5. GitHub Copilot、Docker、FastAPIでKanbanアプリを構築：
  6. GitHub CopilotでKanbanアプリ構築：ドラッグ＆ドロップのデバッグ：
  7. AIアシスタントKanbanアプリ完成：Copilot、OpenRouter?＆Week 1 まとめ：
↑

Week 2 †

Vibe Engineering as a professional（バイブ・エンジニアリング：プロフェッショナル向け）

↑

Day 1 †

↑

Day 2 †

↑

Day 3 †

↑

Day 4 †

↑

Day 5 †

↑

Week 3 †

Vibe Engineering as an expert（エキスパート向け）

↑

Day 1 †

↑

Day 2 †

↑

Day 3 †

↑

Day 4 †

↑

Day 5 †

↑

詳細 †

手順をメモ

↑

様々なツールのYOLOを試す †

VS Code（GitHub Copilot、OpenAI Codex）、Cursor、Antigravity IDE、Claude Code

↑

Cursor †

1

※ ブラウザ翻訳で日本語になっているが、元々は英語表記。

↑

VS Code + GitHub Copilot †

2
↑

VS Code + OpenAI Codex †

3
↑

Antigravity IDE †

4
↑

参考 †

↑

コード †

github.com/ed-donner

↑

スライド †

https://drive.google.com/drive/folders/1vvp15mK3ZXDfY8HE4g-tlF2CTfBfSDQ8

↑

その他 †

↑

プロダクト関連 †

↑

論文関係 †

トップ   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS