test-repo/docs-readme/ja-JP/README.md

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

Easy-Vibe: Learn Vibe Coding from 0 to 1

ゼロから、プロジェクトベース学習、最初の AI 製品を構築

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

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

🚀 プロジェクト紹介

AI でコードを書こうとしてエラーが続き、諦めかけたくなり、プログラムを本当にオンラインにする方法がわからないとき 😢

本チュートリアルは、0 から 1 まで、Vibe Coding のスキルを段階的に習得できるように設計されています：

• 第 0 段階：ミニゲームから迅速に入門して Vibe Coding のスキルを習得
• 第 1 段階：プロダクトマネージャーの視点からの Vibe Coding スキルと業務理解、Web アプリケーションプロトタイプの実装
• 第 2 段階：フロントエンド・バックエンド開発と AI 能力に関連する Vibe Coding テクニックの学習、完全なアプリケーションの完成
• 第 3 段階：マルチプラットフォーム複雑アプリケーションの構築手法を習得、本番級アプリケーションへ

私たちは、Vibe Coding を習得し体系的なトレーニングを組み合わせることで、一人でフロントエンド開発、バックエンド開発、AI 能力統合、プロダクトデザインを兼ね備えた開発者になれると信じています。

本プロジェクトは主に 3 種類の学習者を対象としています：

• 初心者（一般人 / プロダクト・運用担当者）：非技術系初心者が重要な概念を理解し、最初のプロダクトプロトタイプを完成させるのを支援
• 初中級開発者（一定の基礎がある学生と開発者）：フロントエンド・バックエンドの Vibe Coding と AI 能力の知識を習得
• 上級開発者（企業・スタートアップ、オープンソース・独立開発者）：高度な開発技術、マルチプラットフォーム開発

📖 コンテンツナビゲーション

総付録

AI 能力辞書：一般的な AI コア概念と用語、シーンの解釈

零、幼児園

章	主要内容	状態
前書：学習マップ	全体学習パスのガイド	✅
初級一：AI 時代、話せるだけでプログラミングできる	スネークゲームなどの事例を通じて AI プログラミングの能力を初めて体験	✅

一、AI プロダクトマネージャー

章	主要内容	状態
初級二：AI IDE ツールを知る	IDE の使用方法を学び、ローカルでミニゲームを作成	✅
初級三：手を動かしてプロトタイプを作る	ニーズ分析、AI による単一ページ生成、複数ページプロダクトプロトタイプの生成へ	✅
初級四：プロトタイプに AI 能力を追加	一般的な AI 能力（テキスト、画像、動画）の接続方法を習得	✅
初級五：完全プロジェクト実戦	実際のシーンをシミュレート、ユーザーフィードバックを受け反復改良、プロジェクトを完全に	✅
大課題：完全な Web アプリケーションプロトタイプを作成し展示	アプリケーションを完全に実装し、アプリケーション効果を展示	✅

付録

章	主要内容	状態
付録 A：プロダクト思考補充	ゼロからイチまでプロダクトを作る際に必要な思考フレームワーク	✅
付録 B：一般的なエラーと解決策	Vibe Coding における一般的なエラーとトラブルシューティング方法	✅

二、初中級開発エンジニア

フロントエンド部分

章	主要内容	状態
フロントエンド零：lovart を使用して素材を生成	lovart を使ってキャラクター、シーンなどの視覚素材を一括生成し、UI デザインとフロントエンド開発に素材基盤を提供	🚧
フロントエンド一：Figma と MasterGo 入門	デザインツールを使って情報アーキテクチャとページ構造を整理し、フロントエンド実装の基礎を築く	🚧
フロントエンド二：最初のモダンアプリケーションを構築 - UI デザイン	デザイン画に基づいてコンポーネント化インターフェースを完成させ、デザインからコードへの最初のパスを実現	🚧
フロントエンド三：UI デザイン仕様とマルチプロダクト UI デザインを参照	統一されたメインビジュアルを中心にマルチプロダクトインターフェースを拡張し、体系的デザイン能力を練習	🚧
フロントエンド四：一緒にハリー・ポッターの肖像画を作ろう	0 から 1 まで AI 能力を統合したフロントエンドアプリケーションを作成し、デザインと開発を接続	✅

バックエンドとフルスタック部分

章	主要内容	状態
バックエンド一：API とは	HTTP インターフェースとリクエスト・レスポンスモデルを理解し、バックエンド統合と連携調整の準備	✅
バックエンド二：データベースから Supabase へ	Supabase 上でデータベースと API を実装し、データモデルとフロントエンドページを接続	✅
バックエンド三：大規模言語モデル支援によるインターフェースコードとドキュメント作成	大規模言語モデルを使ってインターフェースとデータベースのドキュメントおよびコードの生成を支援し、読みやすくテスト可能なバックエンドを実現	🚧
バックエンド四：Git ワークフロー	Git ワークフローでコードを管理し、バージョン管理とコラボレーションを行う	✅
バックエンド五：Zeabur デプロイ	アプリケーションを Zeabur にデプロイしてオンライン化	✅
バックエンド六：モダン CLI 開発ツール	CLI 系 AI プログラミングツールを使用して開発とデバッグを加速し、個人のエンジニアリングワークフローを形成	✅
バックエンド七：Stripe などの課金システムの統合方法	決済システムを接続し、課金パスと基本決済フローを完成	🚧
大課題 1：最初のモダンアプリケーションを構築 - フルスタックアプリ	フロントエンド、バックエンド、決済モジュールを統合し、オンライン可能なフルスタック Web アプリケーションを完成	🚧
大課題 2：モダンフロントエンドコンポーネントライブラリ + Trae 実戦	モダンフロントエンドコンポーネントライブラリと Trae を使用し、ログイン・登録可能で課金対応のプロダクトを独立完成	🚧

AI 能力付録

章	主要内容	状態
AI 一：Dify 入門とナレッジベース統合	Dify Workflow と基本 RAG を使ってツール系プロダクトを構築し、以降のアプリケーションアップグレードのモデルケースを作成	✅
AI 二：AI 辞典の検索とマルチモーダル API 統合を学ぶ	適切なモデルと API を検索する方法を学び、テキスト、画像などのマルチモーダル能力をプロダクトに統合	🚧

三、上級開発エンジニア

章	主要内容	状態
上級一：MCP と ClaudeCode Skills	MCP と Skills を通じて IDE 能力を拡張し、外部サービスをツールとして接続	🚧
上級二：Coding Tools を長時間動作させる方法	長時間動作するタスクを設計・設定し、Coding Tools をより安定して信頼性の高いものに	🚧
上級三：マルチプラットフォーム開発：WeChat ミニプログラムの構築方法	WeChat ミニプログラムのエコシステムを理解し、公式テンプレートからリリースまでフロントエンドミニプログラムを完成	✅
上級四：マルチプラットフォーム開発：WeChat ミニプログラムの構築方法 - バックエンド含む	ミニプログラムにデータベースとバックエンドロジックを統合し、完全な業務クローズドループを実現	🚧
上級五：マルチプラットフォーム開発：Android アプリの構築方法	Expo などのツールを使用し、Web/ネイティブ一体化の Android アプリ開発を完成	🚧
上級六：マルチプラットフォーム開発：iOS アプリの構築方法	Expo などのツールを使用し、Web/ネイティブ一体化の iOS アプリ開発を完成	🚧
上級七：自分専用の個人ウェブページと学術ブログの構築方法	選定、構築からデプロイまで、個人プロジェクトと学術成果を展示する長期的なオンラインホームページを構築	🚧

AI 能力付録

章	主要内容	状態
上級 AI 一：RAG とは、それがどのように動作するか	RAG 原理と一般的なアーキテクチャを体系的に理解し、複雑なアプリケーションに知識検索基盤を提供	✅
上級 AI 二：中上級 RAG とワークフロー編成：LangGraph を例に	LangGraph などのツールを使用してマルチステップワークフローと中上級 RAG システムを設計	🚧

🛠️ 学習方法

• 個人の能力に応じて、関連する章を選択的に読み实践し、問題があれば Issue で質問してください。

💻 本课件をローカルで起動

モダン手法

AI IDE ダイアログボックス（vscode、cursor、trae など）で、以下のプロンプトを入力して本课件を起動：

このプロジェクトのローカルサービスを実行してください

旧手法

1. npm install
2. npm run dev
3. ブラウザを開いて http://localhost:3000 にアクセスして確認。

🤝 貢献に参加

• もし問題を発見した場合、または本プロジェクトを改善できる点があると思われる場合は、Issue を提出してフィードバックしてください。提出後に誰も返信しない場合は、保母チームのメンバーに連絡してフィードバックとフォローアップを受けることができます~
• もしあなたが本プロジェクトへの貢献に参加したい場合は、Pull Request を提出してください。提出後に誰も返信しない場合は、保母チームのメンバーに連絡してフィードバックとフォローアップを受けることができます~
• もしあなたが Datawhale に非常に興味があり、新しいプロジェクトを開始したい場合は、Datawhale オープンソースプロジェクトガイドに従って操作してください~

🙏 すべての貢献者に感謝

• 散步-プロジェクト責任者 (Datawhale メンバー)
• 方可-指導教官（Datawhale メンバー、清華大学）
• Yerim Kang（实践项目部分-清華大学）
• 赵芷霖（実践プロジェクト部分-清華大学）
• 李亦萱（ページ美術デザイン-清華大学）
• AI Vibe Coding 101 ベータテストグループでアドバイスと体験を提供してくれたすべての仲間たち

特別な感謝

• @Sm1les さんの本プロジェクトへの支援と支持に感謝
• 本プロジェクトに貢献してくれたすべての開発者に感謝 ❤️

📧 お問い合わせ

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

以下の QR コードをスキャンして公式アカウントをフォローしてください：Datawhale

📄 LICENSE

本作品は クリエイティブ・コモンズ 表示 - 非営利 - 継承 4.0 国際ライセンス の下でライセンスされています。

Star History