███████╗ █████╗ ███████╗██╗   ██╗    ██╗   ██╗██╗██████╗ ███████╗
██╔════╝██╔══██╗██╔════╝╚██╗ ██╔╝    ██║   ██║██║██╔══██╗██╔════╝
█████╗  ███████║███████╗ ╚████╔╝     ██║   ██║██║██████╔╝█████╗
██╔══╝  ██╔══██║╚════██║  ╚██╔╝      ╚██╗ ██╔╝██║██╔══██╗██╔══╝
███████╗██║  ██║███████║   ██║        ╚████╔╝ ██║██████╔╝███████╗
╚══════╝╚═╝  ╚═╝╚══════╝   ╚═╝         ╚═══╝  ╚═╝╚═════╝ ╚══════╝

# Easy-Vibe: Learn Vibe Coding from 0 to 1 ### _ゼロから、プロジェクトベース学習、最初の AI 製品を構築_

📌 オンラインで読み始める (Start Reading Online)

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

## 🚀 プロジェクト紹介 AI でコードを書こうとしてエラーが続き、諦めかけたくなり、プログラムを本当にオンラインにする方法がわからないとき 😢 本チュートリアルは、0 から 1 まで、Vibe Coding のスキルを段階的に習得できるように設計されています： - **第 1 段階**：**ミニゲームからWeb プロトタイプまで**、AI プログラミングの基礎とプロダクト思考を習得 - **第 2 段階**：**フロントエンド・バックエンド開発と AI 能力**に関連する Vibe Coding テクニックの学習、完全なアプリケーションの完成 - **第 3 段階**：**マルチプラットフォーム複雑アプリケーション**の構築手法を習得、本番級アプリケーションへ私たちは、Vibe Coding を習得し体系的なトレーニングを組み合わせることで、一人でフロントエンド開発、バックエンド開発、AI 能力統合、プロダクトデザインを兼ね備えた開発者になれると信じています。 > **本プロジェクトは主に 3 種類の学習者を対象としています：** > > - **初心者（一般人 / プロダクト・運用担当者）**：非技術系初心者が重要な概念を理解し、最初のプロダクトプロトタイプを完成させるのを支援 > - **初中級開発者（一定の基礎がある学生と開発者）**：フロントエンド・バックエンドの Vibe Coding と AI 能力の知識を習得 > - **上級開発者（企業・スタートアップ、オープンソース・独立開発者）**：高度な開発技術、マルチプラットフォーム開発 ### 📖 コンテンツナビゲーション

Learning Map

### 総付録 [AI 能力辞書：一般的な AI コア概念と用語、シーンの解釈](docs/zh-cn/appendix/ai-capability-dictionary.md) ### 一、初心者入門とプロダクトプロトタイプ | 章 | 主要内容 | 状態 | | :----------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------- | :--- | | [前書：学習マップ](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 プログラミングの能力を初めて体験 | ✅ | | [初級二：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) | 実際のシーンをシミュレート、ユーザーフィードバックを受け反復改良、プロジェクトを完全に | ✅ | | [大課題：完全な Web アプリケーションプロトタイプを作成し展示](docs/zh-cn/stage-1/1.5-final-project/index.md) | アプリケーションを完全に実装し、アプリケーション効果を展示 | ✅ | #### 付録 | 章 | 主要内容 | 状態 | | :------------------------------------------------------------------------------------- | :------------------------------------------------------------- | :--- | | [付録 A：プロダクト思考補充](docs/zh-cn/stage-1/appendix-a-product-thinking/index.md) | ゼロからイチまでプロダクトを作る際に必要な思考フレームワーク | ✅ | | [付録 B：一般的なエラーと解決策](docs/zh-cn/stage-1/appendix-b-common-errors/index.md) | Vibe Coding における一般的なエラーとトラブルシューティング方法 | ✅ | ### 二、初中級開発エンジニア #### フロントエンド部分 | 章 | 主要内容 | 状態 | | :------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------- | :--- | | [フロントエンド零：lovart を使用して素材を生成](docs/zh-cn/stage-2/frontend/2.0-lovart-assets/) | lovart を使ってキャラクター、シーンなどの視覚素材を一括生成し、UI デザインとフロントエンド開発に素材基盤を提供 | 🚧 | | [フロントエンド一：Figma と MasterGo 入門](docs/zh-cn/stage-2/frontend/2.1-figma-mastergo/) | デザインツールを使って情報アーキテクチャとページ構造を整理し、フロントエンド実装の基礎を築く | 🚧 | | [フロントエンド二：最初のモダンアプリケーションを構築 - UI デザイン](docs/zh-cn/stage-2/frontend/2.2-ui-design/) | デザイン画に基づいてコンポーネント化インターフェースを完成させ、デザインからコードへの最初のパスを実現 | 🚧 | | [フロントエンド三：UI デザイン仕様とマルチプロダクト UI デザインを参照](docs/zh-cn/stage-2/frontend/2.3-multi-product-ui/) | 統一されたメインビジュアルを中心にマルチプロダクトインターフェースを拡張し、体系的デザイン能力を練習 | 🚧 | | [フロントエンド四：一緒にハリー・ポッターの肖像画を作ろう](docs/zh-cn/stage-2/frontend/2.4-hogwarts-portraits/chapter4-lets-build-hogwarts-portraits.md) | 0 から 1 まで AI 能力を統合したフロントエンドアプリケーションを作成し、デザインと開発を接続 | ✅ | #### バックエンドとフルスタック部分 | 章 | 主要内容 | 状態 | | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------- | :--- | | [バックエンド一：API とは](docs/zh-cn/stage-2/backend/2.1-what-is-api/extra2/extra2-what-is-api.md) | HTTP インターフェースとリクエスト・レスポンスモデルを理解し、バックエンド統合と連携調整の準備 | ✅ | | [バックエンド二：データベースから Supabase へ](docs/zh-cn/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase.md) | Supabase 上でデータベースと API を実装し、データモデルとフロントエンドページを接続 | ✅ | | [バックエンド三：大規模言語モデル支援によるインターフェースコードとドキュメント作成](docs/zh-cn/stage-2/backend/2.3-ai-interface-code/) | 大規模言語モデルを使ってインターフェースとデータベースのドキュメントおよびコードの生成を支援し、読みやすくテスト可能なバックエンドを実現 | 🚧 | | [バックエンド四：Git ワークフロー](docs/zh-cn/stage-2/backend/2.4-git-workflow/extra1/extra1-what-is-git-and-what-is-github.md) | Git ワークフローでコードを管理し、バージョン管理とコラボレーションを行う | ✅ | | [バックエンド五：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 にデプロイしてオンライン化 | ✅ | | [バックエンド六：モダン 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 系 AI プログラミングツールを使用して開発とデバッグを加速し、個人のエンジニアリングワークフローを形成 | ✅ | | [バックエンド七：Stripe などの課金システムの統合方法](docs/zh-cn/stage-2/backend/2.7-stripe-payment/) | 決済システムを接続し、課金パスと基本決済フローを完成 | 🚧 | | [大課題 1：最初のモダンアプリケーションを構築 - フルスタックアプリ](docs/zh-cn/stage-2/assignments/2.1-fullstack-app/) | フロントエンド、バックエンド、決済モジュールを統合し、オンライン可能なフルスタック Web アプリケーションを完成 | 🚧 | | [大課題 2：モダンフロントエンドコンポーネントライブラリ + Trae 実戦](docs/zh-cn/stage-2/assignments/2.2-modern-frontend-trae/) | モダンフロントエンドコンポーネントライブラリと 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 と ClaudeCode Skills](docs/zh-cn/stage-3/core-skills/3.1-mcp-claudecode-skills/) | MCP と Skills を通じて IDE 能力を拡張し、外部サービスをツールとして接続 | 🚧 | | [上級二：Coding Tools を長時間動作させる方法](docs/zh-cn/stage-3/core-skills/3.2-long-running-tasks/) | 長時間動作するタスクを設計・設定し、Coding Tools をより安定して信頼性の高いものに | 🚧 | | [上級三：マルチプラットフォーム開発：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 などのツールを使用し、Web/ネイティブ一体化の Android アプリ開発を完成 | 🚧 | | [上級六：マルチプラットフォーム開発：iOS アプリの構築方法](docs/zh-cn/stage-3/cross-platform/3.6-ios-app/) | Expo などのツールを使用し、Web/ネイティブ一体化の 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 ダイアログボックス（vscode、cursor、trae など）で、以下のプロンプトを入力して本课件を起動： ``` このプロジェクトのローカルサービスを実行してください ``` ### 旧手法 1. npm install 2. npm run dev 3. ブラウザを開いて `http://localhost:3000` にアクセスして確認。 ## 🤝 貢献に参加 - もし問題を発見した場合、または本プロジェクトを改善できる点があると思われる場合は、Issue を提出してフィードバックしてください。提出後に誰も返信しない場合は、[保母チーム](https://github.com/datawhalechina/DOPMC/blob/main/OP.md)のメンバーに連絡してフィードバックとフォローアップを受けることができます~ - もしあなたが本プロジェクトへの貢献に参加したい場合は、Pull Request を提出してください。提出後に誰も返信しない場合は、[保母チーム](https://github.com/datawhalechina/DOPMC/blob/main/OP.md)のメンバーに連絡してフィードバックとフォローアップを受けることができます~ - もしあなたが Datawhale に非常に興味があり、新しいプロジェクトを開始したい場合は、[Datawhale オープンソースプロジェクトガイド](https://github.com/datawhalechina/DOPMC/blob/main/GUIDE.md)に従って操作してください~ ## 🙏 すべての貢献者に感謝 - [散步-プロジェクト責任者](https://github.com/sanbuphy) (Datawhale メンバー) - 方可-指導教官（Datawhale メンバー、清華大学） - [Yerim Kang](https://github.com/yerim25)（实践项目部分-清華大学） - 赵芷霖（実践プロジェクト部分-清華大学） - [李亦萱](https://yixuan20.github.io/)（ページ美術デザイン-清華大学） - AI Vibe Coding 101 ベータテストグループでアドバイスと体験を提供してくれたすべての仲間たち ### 特別な感謝 - [@Sm1les](https://github.com/Sm1les) さんの本プロジェクトへの支援と支持に感謝 - 本プロジェクトに貢献してくれたすべての開発者に感謝 ❤️

## 📧 お問い合わせ

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

以下の 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)