sanbuphy███████╗ █████╗ ███████╗██╗ ██╗ ██╗ ██╗██╗██████╗ ███████╗ ██╔════╝██╔══██╗██╔════╝╚██╗ ██╔╝ ██║ ██║██║██╔══██╗██╔════╝ █████╗ ███████║███████╗ ╚████╔╝ ██║ ██║██║██████╔╝█████╗ ██╔══╝ ██╔══██║╚════██║ ╚██╔╝ ╚██╗ ██╔╝██║██╔══██╗██╔══╝ ███████╗██║ ██║███████║ ██║ ╚████╔╝ ██║██████╔╝███████╗ ╚══════╝╚═╝ ╚═╝╚══════╝ ╚═╝ ╚═══╝ ╚═╝╚═════╝ ╚══════╝
Easy-Vibe : 0から1で学ぶVibe Coding
すぐ始めて、一緒に vibe しよう！話せればアプリは作れる
Jump right in and vibe together — if you can talk, you can build apps.
📌 オンラインで読む (Read Online) · ✨ インタラクティブチュートリアル
初心者のための学習マップ ゼロベースのガイド、明確なパス設計、「学んで忘れる」からの脱却 |
ステップバイステップの図解チュートリアル 丁寧な図解解説、まるで専属講師がついているかのように進められます |
没入型シミュレーションプログラミング 仮想マウスによる自動ナビゲーションで、IDEのコアな使い方を素早く習得 |
「見える」AI原理 アルゴリズムの原理をアニメーション化、AIがいかにして画像を「描く」のかを一目で理解 |
ゲームのようにRAGを学ぶ 独自の対話型コンポーネントで、クリックするだけでRAGのデータフローを明確に確認 |
可視化されたターミナルの原理 コマンドライン操作を可視化し、バックエンドのロジックと原理を直感的に表示 |
⭐ こちらからStar を追加して更新を応援してください ❤️
AI時代、アイデアを製品に変える人は、必ずしも技術が最も強い人ではなく、最初に行動を起こした人です。
AIアシスタントがいても、「コードが読めない」「環境構築ができない」と諦めてしまう人が多くいます。Easy-Vibeはそのために生まれました。 全員がゼロベースであることを前提に、最初の一行のコードから、前後端のロジックの理解、そして最終的な製品のリリースまで、手取り足取りガイドします。
- 対象者: 初心者、プロダクトマネージャー、フロントエンド/バックエンド/フルスタックエンジニア
- テーマ: AIプログラミング、フルスタックWebアプリ開発、AI Agent、ワークフロー、RAGシステム
Easy-Vibeは以下の段階を経て、あなたを0から1へと導きます：
あなたのレベルに応じて、異なるステージから始めることをお勧めします：
- ゼロベース / プロダクトマネージャー：Stage 1 から始めて、プログラミング思考を身につけ、AI IDE でプロトタイプを素早く構築
- 開発者：Stage 2 から始めて、フルスタック開発と AI 統合を深く学ぶ
- 上級開発者：Stage 3 に直接入り、Claude Code とマルチプラットフォーム開発を探求
| ステージ | コアスキル | 成果物 |
|---|---|---|
| Stage 1 | 学習マップ、AIプログラミング入門、AI IDE、プロダクト思考、プロトタイプ設計、AI能力統合 | インタラクティブゲーム、完全な製品プロトタイプ |
| Stage 2 | フルスタック開発、データベース、AI統合、デプロイ・運用 | 本番投入可能なフルスタックAIアプリケーション |
| Stage 3 | Claude Code 上級、マルチプラットフォーム開発 | 本番級マルチプラットフォームアプリケーション |
| 付録 | コンピュータ基礎、AI入門、9大知識領域 | 80以上のインタラクティブ特集 |
🔥 News
- [2026-03-25] 📚 README を最新の中国語版に同期: 日本語の入口ページを、最新の導入文、学習ナビゲーション、コンテンツ構成に合わせて更新しました。
- [2026-03-02] 🦞 OpenClaw & AI Agent 対応強化:
llms.txtAI ナビゲーションファイルを追加。OpenClaw、Claude、Cursor、Trae などの AI Agent がリポジトリ構造を素早く理解し、チュートリアルコンテンツを正確に特定できるように。すべての🦞が楽しく学べることを願っています！ - [2026-03-01] 上級開発セクションを全面的にアップグレード：Claude Code の7つの詳細ガイド（MCP、Skills、Agent Teams など）と8つのクロスプラットフォーム開発実践（PWA、Electron、NFT、VS Code 拡張機能、Qt 産業アプリなど）を追加。
- [2026-02-25] 付録知識ベースを更新。9大知識領域、80以上のインタラクティブ特集を網羅。
- [2026-01-27] AndroidおよびiOSプラットフォームのアプリ開発チュートリアルを追加。
- [2026-01-19] Prompt Engineering、AIの進化史、認証設計、Gitの原理などの一連のインタラクティブ・デモ・コンポーネントをリリース。
Past News
- [2026-01-16] プロジェクト構造を再構築し、初心者のハードルを下げるための「初心者入門」の章を正式に確立。
- [2026-01-14] 第一段階「製品プロトタイプの構築」ドキュメントの大規模な更新を完了。
- [2026-01-13] ドキュメントアーキテクチャの再構築を完了し、多言語(i18n)を全面的にサポート。
- [2026-01-01] プロジェクトのコア学習マップ (Learning Map) をリリースし、学習パスを明確化。
📖 コンテンツナビゲーション
📚 付録知識ベース
9大知識領域、80以上のインタラクティブ特集を網羅し、アニメーションと可視化コンポーネントを通じて、コンピュータの低層からAIの最前線までのコア概念を直感的に理解するのを助けます。
|
💻 コンピュータ基礎 • トランジスタからCPUへ • オペレーティングシステム • データのエンコード・保存・伝送 • ネットワーク：二台のPCはどう対話するか • データ構造 • アルゴリズム思考入門 |
🔧 開発ツール • Git：コードのタイムマシン • コマンドラインとShellスクリプト • パッケージマネージャー • デバッグの芸術 • 正規表現 • 環境変数とPATH |
🌐 ブラウザとフロントエンド • JavaScript言語の深掘り • ブラウザレンダリングパイプライン • フロントエンドフレームワークの比較 • グラフィックスとアニメーション • Webパフォーマンスの測定と最適化 • フロントエンドエンジニアリングの全貌 |
|
🖥️ サーバーとバックエンド • HTTPプロトコル • API設計の哲学 • 認証と認可の体系 • 並行・非同期・マルチスレッド • メッセージキューとイベント駆動 • バックエンド階層構造 |
📊 データ • SQL • データベース原理 • データトラッキングとユーザー行動収集 • データ分析の基礎 • A/Bテストと実験駆動 • データの可視化とダッシュボード |
🏗️ アーキテクチャとシステム設計 • モノリスからマイクロサービスへの進化 • 分散システムの課題 • 高可用性と災害復旧 • システム設計メソッドロジー |
|
☁️ インフラと運用 • Dockerコンテナ化 • Kubernetesオーケストレーション • CI / CDオートメーション • ドメイン、DNS、HTTPS • モニタリング、ログ、アラート • Infrastructure as Code (IaC) |
🤖 人工知能 • 大規模言語モデルの仕組み • Transformerとアテンション機構 • RAGアーキテクチャ • AI Agentとツール呼び出し • プロンプトエンジニアリング • 画像生成の原理 |
🎯 エンジニアの素養 • コード品質とリファクタリング • テスト戦略 • デザインパターン • セキュリティ思考と攻防の基礎 • 技術ドキュメントの作成 • オープンソースでの協力 |
一、ゼロからの入門
| 章 | 主要な内容 | 状態 |
|---|---|---|
| 前書き：学習マップ | 全体的な学習パスのナビゲーション | ✅ |
| 初級一：AI時代、「話す」ことがプログラミングになる | スネークゲームなどの事例を通じてAIプログラミングの能力を体験 | ✅ |
| 初級二：良いアイデアを探す | 製品のアイデアを探し、検証し、価値のあるプロジェクトを見つける方法を学ぶ | ✅ |
| 初級三：AI IDEツールを知る | IDEの使い方を学び、ローカルでミニゲームを作成 | ✅ |
| 初級四：プロトタイプを自作する | 要件分析からAIによる単一ページ生成、そして複数ページの製品プロトタイプへ | ✅ |
| 初級五：プロトタイプにAI能力を加える | 一般的なAI能力（テキスト、画像、動画）の連携方法を学ぶ | ✅ |
| 初級六：プロジェクトの実践 | 実際のシーンをシミュレートし、ユーザーからのフィードバックを受けてプロジェクトを完成させる | ✅ |
付録：ビジネス思考
| 章 | 主要な内容 | 状態 |
|---|---|---|
| 付録A：プロダクト思考とソリューション設計 | 製品をゼロから作る際に考慮すべき思考フレームワーク | ✅ |
| 付録B：AI業界の活用シーン参考 (B向け) | さまざまな業界におけるAIの活用シーンを理解する | ✅ |
| 付録C：AIコンシューマー向けシーンのインスピレーション (C向け) | コンシューマー向け製品におけるAIの活用シーンを探求する | ✅ |
付録：技術ソリューション
| 章 | 主要な内容 | 状態 |
|---|---|---|
| 付録D：エラーに遭遇した時の対処法 | vibe codingにおける一般的なエラーとその調査方法 | ✅ |
| 付録E：AIプログラミングツール7選の比較 | 主要なAIプログラミングプラットフォームの比較テスト | ✅ |
| 付録F：デザインとプログラミングAgentによるサイト設計 | AIエージェントとの協調作業の方法を学ぶ | ✅ |
二、初・中級エンジニア
フロントエンド
| 章 | 主要な内容 | 状態 |
|---|---|---|
| フロントエンド0：Lovartを使用した素材生成 | Lovartを使用してキャラクターや背景などのビジュアル素材を一括生成する方法を学ぶ | 🚧 |
| フロントエンド1：FigmaとMasterGo入門 | 設計ツールを使用して情報アーキテクチャとページ構造を整理する | 🚧 |
| フロントエンド2：最初の現代的アプリケーションの構築 - UIデザイン | デザイン案に基づいたコンポーネント化されたインターフェースの完成 | 🚧 |
| フロントエンド3：UIデザイン仕様とマルチプロダクトUI設計 | 統一されたメインビジュアルを中心に、システム化されたデザイン能力を磨く | 🚧 |
| フロントエンド4：ホグワーツの肖像画を一緒に作る | AI能力を組み込んだフロントエンドアプリをゼロから作成 | ✅ |
バックエンドとフルスタック
| 章 | 主要な内容 | 状態 |
|---|---|---|
| バックエンド1：APIとは何か | HTTPインターフェースとリクエスト・レスポンスモデルの理解 | ✅ |
| バックエンド2：データベースからSupabaseへ | Supabase上でのデータベースとAPIの実装 | ✅ |
| バックエンド3：大規模言語モデルによるインターフェースコードとドキュメントの生成 | ドキュメントとコードの生成をAIで支援 | 🚧 |
| バックエンド4：Gitワークフロー | Gitワークフローでのコード管理、バージョン管理と協力 | ✅ |
| バックエンド5：Zeaburへのデプロイ | アプリケーションをZeaburにデプロイして公開 | ✅ |
| バックエンド6：現代的なCLI開発ツール | CLIツールによる開発とデバッグの加速 | ✅ |
| バックエンド7：Stripeなどの決済システムの統合方法 | 決済システムを導入し、収益化の仕組みを完成させる | 🚧 |
| 課題1：最初の現代的アプリケーション - フルスタックアプリ | フロントエンド、バックエンド、決済モジュールの統合 | 🚧 |
| 課題2：現代的フロントエンドコンポーネントライブラリ + Trae実践 | ログイン、登録、決済をサポートする製品の独立開発 | 🚧 |
AI能力付録
| 章 | 主要な内容 | 状態 |
|---|---|---|
| AI一：Dify入門と知識ベースの統合 | Dify Workflowと基礎的なRAGを使用したツールの構築 | ✅ |
| AI二：AI辞書の引き方とマルチモーダルAPIの統合 | 適切なモデルとAPIの探し方、それらの統合方法を学ぶ | 🚧 |
三、上級エンジニア
Claude Code コアスキル
| 章 | 主要な内容 | 状態 |
|---|---|---|
| Claude Code クイックスタート | インストール、基本操作、実践的なヒントとよく使うコマンド | ✅ |
| Claude Code MCP 完全ガイド | MCPでClaude CodeをGitHub、データベース、APIなどの外部サービスに接続 | ✅ |
| Claude Code Skills 完全ガイド | 専門知識を再利用可能なスキルパックにパッケージ化 | ✅ |
| Claude Code ワークフローベストプラクティス | 日常開発、リファクタリング、コードレビューなどのベストプラクティス | ✅ |
| Claude Agent Teams 完全ガイド | 複数AIインスタンスの協調作業、本物の開発チームのように並行作業 | ✅ |
| Claude Code Superpowers エンジニアリング開発 | TDDとベストプラクティスに従ったエンジニアリンググレードのコードを書く | ✅ |
| Claude Code を長時間稼働させる方法 | 長時間実行タスクを設計し、完了まで継続的に動作させる | ✅ |
マルチプラットフォーム開発
| 章 | 主要な内容 | 状態 |
|---|---|---|
| WeChatミニプログラムの構築方法 | WeChatミニプログラムのエコシステム、公式テンプレートからリリースまで | ✅ |
| バックエンドを含むWeChatミニプログラムの構築方法 | ミニプログラムへのデータベースとバックエンドロジックの導入 | ✅ |
| Androidアプリ開発 | Expoなどのツールを使用したAndroidアプリ開発 | ✅ |
| iOSアプリ開発 | Expoなどのツールを使用したiOSアプリ開発 | ✅ |
| PWA開発 | オフライン対応のプログレッシブWebアプリを構築 | 🚧 |
| Electronデスクトップアプリ開発 | クロスプラットフォームデスクトップアプリケーションを構築 | 🚧 |
| VS Code拡張機能開発 | VS Code拡張機能とプラグインを開発 | 🚧 |
| Qt産業アプリケーション開発 | Qtを使用した産業グレードのデスクトップアプリケーションを構築 | 🚧 |
🛠️ 学習方法
- 自身のレベルに合わせて章を選択して学習し、実践してください。疑問点があればIssueで質問してください。
💻 ローカルでの起動方法
現代的な方法
AI IDEの対話ボックス（VS Code, Cursor, Traeなど）で以下のプロンプトを入力してください：
このプロジェクトのローカルサービスを起動してください。
従来の方法
- npm install
- npm run dev
- ブラウザで
http://localhost:3000にアクセスしてください。
🤝 貢献について
- 問題を見つけた場合や、改善案がある場合は、Issueでフィードバックをお願いします。
- 貢献を希望される場合は、Pull Requestを送信してください。
- 新しいプロジェクトの立ち上げに興味がある場合は、Datawhaleオープンソースプロジェクトガイドに従ってください。
🙏 貢献者への感謝
- 散歩-プロジェクトリーダー (Datawhaleメンバー)
- 方可-アドバイザー (Datawhaleメンバー, 清華大学)
- Yerim Kang (実践プロジェクト部分-清華大学)
- 趙芷霖 (実践プロジェクト部分-清華大学)
- 李亦萱 (ページデザイン-清華大学)
- その他、suggestionをくださったすべてのベータテスターの皆様に感謝します。
特別な感謝
- @Sm1les 氏の多大なるサポートに感謝します。
- プロジェクトに貢献してくださったすべての開発者、スターをくださった皆様に感謝します ❤️
📧 お問い合わせ
質問、提案、交流をご希望の方は、以下のQRコードをスキャンしてください
公式アカウントをフォロー：Datawhale
