███████╗ █████╗ ███████╗██╗   ██╗    ██╗   ██╗██╗██████╗ ███████╗
██╔════╝██╔══██╗██╔════╝╚██╗ ██╔╝    ██║   ██║██║██╔══██╗██╔════╝
█████╗  ███████║███████╗ ╚████╔╝     ██║   ██║██║██████╔╝█████╗  
██╔══╝  ██╔══██║╚════██║  ╚██╔╝      ╚██╗ ██╔╝██║██╔══██╗██╔══╝  
███████╗██║  ██║███████║   ██║        ╚████╔╝ ██║██████╔╝███████╗
╚══════╝╚═╝  ╚═╝╚══════╝   ╚═╝         ╚═══╝  ╚═╝╚═════╝ ╚══════╝
# Easy-Vibe : 0から1で学ぶVibe Coding

すぐ始めて、一緒に vibe しよう！話せればアプリは作れる
Jump right in and vibe together — if you can talk, you can build apps.

📌 オンラインで読む (Read Online) · ✨ インタラクティブチュートリアル

オンラインで読む · 学習マップ · コミュニティ交流

Stars Forks License

简体中文 繁體中文 English 日本語 Español Français Klingon 한국어 العربية Türkçe Tiếng_Việt Deutsch বাংলা


初心者のための学習マップ
ゼロベースのガイド、明確なパス設計、「学んで忘れる」からの脱却
ステップバイステップの図解チュートリアル
丁寧な図解解説、まるで専属講師がついているかのように進められます

没入型シミュレーションプログラミング
仮想マウスによる自動ナビゲーションで、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.txt` AI ナビゲーションファイルを追加。OpenClaw、Claude、Cursor、Trae などの AI Agent がリポジトリ構造を素早く理解し、チュートリアルコンテンツを正確に特定できるように。すべての🦞が楽しく学べることを願っています！ - **[2026-03-01]** [上級開発セクション](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/)を全面的にアップグレード：Claude Code の7つの詳細ガイド（MCP、Skills、Agent Teams など）と8つのクロスプラットフォーム開発実践（PWA、Electron、NFT、VS Code 拡張機能、Qt 産業アプリなど）を追加。 - **[2026-02-25]** [付録知識ベース](https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/)を更新。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) をリリースし、学習パスを明確化。
### 📖 コンテンツナビゲーション
Learning Map
### 📚 付録知識ベース > **9大知識領域**、**80以上のインタラクティブ特集**を網羅し、アニメーションと可視化コンポーネントを通じて、コンピュータの低層からAIの最前線までのコア概念を直感的に理解するのを助けます。 > > 👉 [完全な付録を表示](https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/) · [AI能力辞書](https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/ai-capability-dictionary)
💻 コンピュータ基礎

• トランジスタから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とツール呼び出し
• プロンプトエンジニアリング
• 画像生成の原理 		🎯 エンジニアの素養

• コード品質とリファクタリング
• テスト戦略
• デザインパターン
• セキュリティ思考と攻防の基礎
• 技術ドキュメントの作成
• オープンソースでの協力
### 一、ゼロからの入門 | 章 | 主要な内容 | 状態 | | :----------------------------------------------------------------------------------------------- | :------------------------------------------------ | :--- | | [前書き：学習マップ](../../docs/zh-cn/stage-0/0.1-learning-map/index.md) | 全体的な学習パスのナビゲーション | ✅ | | [初級一：AI時代、「話す」ことがプログラミングになる](../../docs/zh-cn/stage-0/0.2-ai-capabilities-through-games/index.md) | スネークゲームなどの事例を通じてAIプログラミングの能力を体験 | ✅ | | [初級二：良いアイデアを探す](../../docs/zh-cn/stage-1/1.0-finding-great-idea/index.md) | 製品のアイデアを探し、検証し、価値のあるプロジェクトを見つける方法を学ぶ | ✅ | | [初級三：AI IDEツールを知る](../../docs/zh-cn/stage-1/1.1-introduction-to-ai-ide/index.md) | IDEの使い方を学び、ローカルでミニゲームを作成 | ✅ | | [初級四：プロトタイプを自作する](../../docs/zh-cn/stage-1/1.2-building-prototype/index.md) | 要件分析からAIによる単一ページ生成、そして複数ページの製品プロトタイプへ | ✅ | | [初級五：プロトタイプにAI能力を加える](../../docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/index.md) | 一般的なAI能力（テキスト、画像、動画）の連携方法を学ぶ | ✅ | | [初級六：プロジェクトの実践](../../docs/zh-cn/stage-1/1.4-complete-project-practice/index.md) | 実際のシーンをシミュレートし、ユーザーからのフィードバックを受けてプロジェクトを完成させる | ✅ | #### 付録：ビジネス思考 | 章 | 主要な内容 | 状態 | | :----------------------------------------------------------------------------------------- | :----------------------------------------- | :--- | | [付録A：プロダクト思考とソリューション設計](../../docs/zh-cn/stage-1/appendix-a-product-thinking/index.md) | 製品をゼロから作る際に考慮すべき思考フレームワーク | ✅ | | [付録B：AI業界の活用シーン参考 (B向け)](../../docs/zh-cn/stage-1/appendix-industry-scenarios/index.md) | さまざまな業界におけるAIの活用シーンを理解する | ✅ | | [付録C：AIコンシューマー向けシーンのインスピレーション (C向け)](../../docs/zh-cn/stage-1/appendix-c-consumer-scenarios/index.md) | コンシューマー向け製品におけるAIの活用シーンを探求する | ✅ | #### 付録：技術ソリューション | 章 | 主要な内容 | 状態 | | :-------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------- | :--- | | [付録D：エラーに遭遇した時の対処法](../../docs/zh-cn/stage-1/appendix-b-common-errors/index.md) | vibe codingにおける一般的なエラーとその調査方法 | ✅ | | [付録E：AIプログラミングツール7選の比較](../../docs/zh-cn/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md) | 主要なAIプログラミングプラットフォームの比較テスト | ✅ | | [付録F：デザインとプログラミングAgentによるサイト設計](../../docs/zh-cn/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md) | AIエージェントとの協調作業の方法を学ぶ | ✅ |
二、初・中級エンジニア #### フロントエンド | 章 | 主要な内容 | 状態 | | :------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------- | :--- | | [フロントエンド0：Lovartを使用した素材生成](../../docs/zh-cn/stage-2/frontend/2.0-lovart-assets/) | Lovartを使用してキャラクターや背景などのビジュアル素材を一括生成する方法を学ぶ | 🚧 | | [フロントエンド1：FigmaとMasterGo入門](../../docs/zh-cn/stage-2/frontend/2.1-figma-mastergo/) | 設計ツールを使用して情報アーキテクチャとページ構造を整理する | 🚧 | | [フロントエンド2：最初の現代的アプリケーションの構築 - UIデザイン](../../docs/zh-cn/stage-2/frontend/2.2-ui-design/) | デザイン案に基づいたコンポーネント化されたインターフェースの完成 | 🚧 | | [フロントエンド3：UIデザイン仕様とマルチプロダクトUI設計](../../docs/zh-cn/stage-2/frontend/2.3-multi-product-ui/) | 統一されたメインビジュアルを中心に、システム化されたデザイン能力を磨く | 🚧 | | [フロントエンド4：ホグワーツの肖像画を一緒に作る](../../docs/zh-cn/stage-2/frontend/2.4-hogwarts-portraits/chapter4-lets-build-hogwarts-portraits.md) | AI能力を組み込んだフロントエンドアプリをゼロから作成 | ✅ | #### バックエンドとフルスタック | 章 | 主要な内容 | 状態 | | :-------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------ | :--- | | [バックエンド1：APIとは何か](../../docs/zh-cn/stage-2/backend/2.1-what-is-api/extra2/extra2-what-is-api.md) | HTTPインターフェースとリクエスト・レスポンスモデルの理解 | ✅ | | [バックエンド2：データベースからSupabaseへ](../../docs/zh-cn/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase.md) | Supabase上でのデータベースとAPIの実装 | ✅ | | [バックエンド3：大規模言語モデルによるインターフェースコードとドキュメントの生成](../../docs/zh-cn/stage-2/backend/2.3-ai-interface-code/) | ドキュメントとコードの生成をAIで支援 | 🚧 | | [バックエンド4：Gitワークフロー](../../docs/zh-cn/stage-2/backend/2.4-git-workflow/extra1/extra1-what-is-git-and-what-is-github.md) | Gitワークフローでのコード管理、バージョン管理と協力 | ✅ | | [バックエンド5：Zeaburへのデプロイ](../../docs/zh-cn/stage-2/backend/2.5-zeabur-deployment/extra6/extra6-zeabur-what-is-it-and-how-to-deploy-web-applications.md) | アプリケーションをZeaburにデプロイして公開 | ✅ | | [バックエンド6：現代的なCLI開発ツール](../../docs/zh-cn/stage-2/backend/2.6-modern-cli/extra7/extra7-cli-ai-coding-tools-and-the-principles-of-test-driven-development.md) | CLIツールによる開発とデバッグの加速 | ✅ | | [バックエンド7：Stripeなどの決済システムの統合方法](../../docs/zh-cn/stage-2/backend/2.7-stripe-payment/) | 決済システムを導入し、収益化の仕組みを完成させる | 🚧 | | [課題1：最初の現代的アプリケーション - フルスタックアプリ](../../docs/zh-cn/stage-2/assignments/2.1-fullstack-app/) | フロントエンド、バックエンド、決済モジュールの統合 | 🚧 | | [課題2：現代的フロントエンドコンポーネントライブラリ + Trae実践](../../docs/zh-cn/stage-2/assignments/2.2-modern-frontend-trae/) | ログイン、登録、決済をサポートする製品の独立開発 | 🚧 | #### AI能力付録 | 章 | 主要な内容 | 状態 | | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------- | :--- | | [AI一：Dify入門と知識ベースの統合](../../docs/zh-cn/stage-2/ai-capabilities/2.1-dify-knowledge-base/chapter3/chapter3-getting-started-with-dify-and-its-knowledge-base-integration.md) | Dify Workflowと基礎的なRAGを使用したツールの構築 | ✅ | | [AI二：AI辞書の引き方とマルチモーダルAPIの統合](../../docs/zh-cn/stage-2/ai-capabilities/2.2-multimodal-api/extra3/extra3-ai-capability-starter-handbook.md) | 適切なモデルとAPIの探し方、それらの統合方法を学ぶ | 🚧 |
三、上級エンジニア #### Claude Code コアスキル | 章 | 主要な内容 | 状態 | | :--- | :--- | :--- | | [Claude Code クイックスタート](../../docs/zh-cn/stage-3/core-skills/basics/) | インストール、基本操作、実践的なヒントとよく使うコマンド | ✅ | | [Claude Code MCP 完全ガイド](../../docs/zh-cn/stage-3/core-skills/mcp/) | MCPでClaude CodeをGitHub、データベース、APIなどの外部サービスに接続 | ✅ | | [Claude Code Skills 完全ガイド](../../docs/zh-cn/stage-3/core-skills/skills/) | 専門知識を再利用可能なスキルパックにパッケージ化 | ✅ | | [Claude Code ワークフローベストプラクティス](../../docs/zh-cn/stage-3/core-skills/workflow/) | 日常開発、リファクタリング、コードレビューなどのベストプラクティス | ✅ | | [Claude Agent Teams 完全ガイド](../../docs/zh-cn/stage-3/core-skills/agent-teams/) | 複数AIインスタンスの協調作業、本物の開発チームのように並行作業 | ✅ | | [Claude Code Superpowers エンジニアリング開発](../../docs/zh-cn/stage-3/core-skills/superpowers/) | TDDとベストプラクティスに従ったエンジニアリンググレードのコードを書く | ✅ | | [Claude Code を長時間稼働させる方法](../../docs/zh-cn/stage-3/core-skills/long-running-tasks/) | 長時間実行タスクを設計し、完了まで継続的に動作させる | ✅ | #### マルチプラットフォーム開発 | 章 | 主要な内容 | 状態 | | :--- | :--- | :--- | | [WeChatミニプログラムの構築方法](../../docs/zh-cn/stage-3/cross-platform/3.3-wechat-miniprogram/) | WeChatミニプログラムのエコシステム、公式テンプレートからリリースまで | ✅ | | [バックエンドを含むWeChatミニプログラムの構築方法](../../docs/zh-cn/stage-3/cross-platform/3.4-wechat-miniprogram-backend/) | ミニプログラムへのデータベースとバックエンドロジックの導入 | ✅ | | [Androidアプリ開発](../../docs/zh-cn/stage-3/cross-platform/3.5-android-app/) | Expoなどのツールを使用したAndroidアプリ開発 | ✅ | | [iOSアプリ開発](../../docs/zh-cn/stage-3/cross-platform/3.6-ios-app/) | Expoなどのツールを使用したiOSアプリ開発 | ✅ | | [PWA開発](../../docs/zh-cn/stage-3/cross-platform/3.7-pwa/) | オフライン対応のプログレッシブWebアプリを構築 | 🚧 | | [Electronデスクトップアプリ開発](../../docs/zh-cn/stage-3/cross-platform/3.8-electron/) | クロスプラットフォームデスクトップアプリケーションを構築 | 🚧 | | [VS Code拡張機能開発](../../docs/zh-cn/stage-3/cross-platform/3.9-vscode-extension/) | VS Code拡張機能とプラグインを開発 | 🚧 | | [Qt産業アプリケーション開発](../../docs/zh-cn/stage-3/cross-platform/3.10-qt-industrial/) | Qtを使用した産業グレードのデスクトップアプリケーションを構築 | 🚧 |
## 🛠️ 学習方法 - 自身のレベルに合わせて章を選択して学習し、実践してください。疑問点があればIssueで質問してください。 ## 💻 ローカルでの起動方法 ### 現代的な方法 AI IDEの対話ボックス（VS Code, Cursor, Traeなど）で以下のプロンプトを入力してください： ``` このプロジェクトのローカルサービスを起動してください。 ``` ### 従来の方法 1. npm install 2. npm run dev 3. ブラウザで `http://localhost:3000` にアクセスしてください。 ## 🤝 貢献について - 問題を見つけた場合や、改善案がある場合は、Issueでフィードバックをお願いします。 - 貢献を希望される場合は、Pull Requestを送信してください。 - 新しいプロジェクトの立ち上げに興味がある場合は、Datawhaleオープンソースプロジェクトガイドに従ってください。 ## 🙏 貢献者への感謝 - [散歩-プロジェクトリーダー](https://github.com/sanbuphy) (Datawhaleメンバー) - 方可-アドバイザー (Datawhaleメンバー, 清華大学) - [Yerim Kang](https://github.com/yerim25) (実践プロジェクト部分-清華大学) - 趙芷霖 (実践プロジェクト部分-清華大学) - [李亦萱](https://yixuan20.github.io/) (ページデザイン-清華大学) - その他、suggestionをくださったすべてのベータテスターの皆様に感謝します。 ### 特別な感謝 - [@Sm1les](https://github.com/Sm1les) 氏の多大なるサポートに感謝します。 - プロジェクトに貢献してくださったすべての開発者、スターをくださった皆様に感謝します ❤️

Stargazers    Forkers

## 📧 お問い合わせ

質問、提案、交流をご希望の方は、以下のQRコードをスキャンしてください

公式アカウントをフォロー：Datawhale

## 📄 LICENSE
知識共有ライセンス
本作品は クリエイティブ・コモンズ 表示 - 非営利 - 継承 4.0 国際 ライセンス の下でライセンスされています。
## Star History [![Star History Chart](https://api.star-history.com/svg?repos=datawhalechina/easy-vibe&type=date&legend=top-left)](https://www.star-history.com/#datawhalechina/easy-vibe&type=date&legend=top-left)