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

📌 オンラインで読む (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へと導きます： | ステージ | コアスキル | 成果物 | | ------------ | -------------------------------- | ----------------------------------------- | | **第一段階** | AIプログラミング入門、プロダクト思考、プロトタイプ設計 | インタラクティブゲーム、Webアプリのプロトタイプ (初心者 & PM) | | **第二段階** | フルスタック開発、AI統合、データベース | 完全なフルスタックAIアプリケーション | | **第三段階** | Claude Code活用、ミニプログラム・Android開発 | 本番級のマルチプラットフォームアプリケーション | | **付録** | コンピュータとAIの基礎概念の理解を支援 | 9大知識領域、80以上のインタラクティブ特集 | ## 🔥 News - **[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の探し方、それらの統合方法を学ぶ | 🚧 |
三、上級エンジニア | 章 | 主要な内容 | 状態 | | :------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------- | :--- | | [上級一：MCPとClaude Code Skills](../../docs/zh-cn/stage-3/core-skills/3.1-mcp-claude-code-skills/) | MCPとSkillsによるIDE能力の拡張 | 🚧 | | [上級二：Coding Toolsを長時間稼働させる方法](../../docs/zh-cn/stage-3/core-skills/3.2-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アプリ開発 | ✅ | | [上級七：自分だけの個人ページと学術ブログの構築](../../docs/zh-cn/stage-3/personal-brand/3.7-personal-website-blog/) | 技術選定から構築、デプロイまでを網羅 | 🚧 | #### AI能力付録 | 章 | 主要な内容 | 状態 | | :-------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------ | :--- | | [上級AI一：RAGとは何か、どのように動作するか](../../docs/zh-cn/stage-3/ai-advanced/3.a1-rag-introduction/extra5-what-is-rag-and-how-does-it-work-and-future.md) | RAGの原理と一般的なアーキテクチャの体系的な理解 | ✅ | | [上級AI二：中・上級RAGとワークフローオーケストレーション：LangGraphを例に](../../docs/zh-cn/stage-3/ai-advanced/3.a2-langgraph-advanced-rag/) | LangGraphを使用した複雑なワークフローと高度なRAGの設計 | 🚧 |
## 🛠️ 学習方法 - 自身のレベルに合わせて章を選択して学習し、実践してください。疑問点があれば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)