バイブコーディングを体系的に学ぶ：easy-vibe 教材を紹介する
easy-vibe は、中国のOSS教育コミュニティ datawhalechina が公開したバイブコーディングの学習教材です。
入門から上級まで3ステージ・80以上のトピックが体系的に整理されています。中国語メインですが、構成を見るだけでも学習ロードマップとして参考になります。
なぜこの教材が面白いのか
「AIに話しかければコードが書ける時代」という前提で設計されています。
コードの書き方ではなく、AIを使って何を作るか・どう作るかを教える教材です。フロントエンド・バックエンド・デプロイ・決済・モバイルアプリまで、実際のプロダクト開発の流れが一通り含まれています。
Stage 3 には Claude Code・MCP・エージェントチームが独立したセクションとして入っており、最新のAI開発スタックをカバーしています。
目次（3ステージ構成）
Stage 1：入門
- 学習マップ
- AIの時代：話せればコードが書ける
- AIプログラミングツールの使い方
- アイデアの見つけ方
- プロダクトプロトタイプの作り方
- AIの能力を組み込む
- 完成プロジェクトの実践
Stage 2：中級開発
フロントエンド
- Figma / MasterGo の基礎
- 美しいUIを作るLLM活用
- デザインプロトタイプからコードへ
- モダンコンポーネントライブラリ
バックエンド
- Git / GitHub の使い方
- データベースと Supabase
- バックエンドAPI設計
- プロトタイプのデプロイ
- Stripe と課金システム
実践プロジェクト
- AIコピーライティングWebサイト（SaaS）
- オンライン試験システム
Stage 3：上級開発
Claude Code コアスキル
- 基本セットアップ
- MCP 連携
- スキル開発
- 長時間タスク
- エージェントチーム
- エンジニアリングプラクティス
- ワークフローベストプラクティス
クロスプラットフォーム開発
- WeChat ミニプログラム
- Android / iOS アプリ
- PWA
- ブラウザ拡張機能
- Electron デスクトップアプリ
- VS Code 拡張機能
VWork との関係
VWork はこの教材と同じ「バイブコーディングで業務を変える」思想に立っています。
easy-vibe が「ゼロからプロダクトを作る」という技術ロードマップだとすれば、VWork は「経営者が自社の課題をAIで解決する」という実務ロードマップです。
easy-vibe で体系を学び、VWork で実務に落とし込む、という使い方が合うと思います。
出典：datawhalechina/easy-vibe（CC BY-NC-SA 4.0）