test-repo/docs-readme/ja-JP

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

Easy-Vibe : 0から1で学ぶVibe Coding

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

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

初心者のための学習マップ ゼロベースのガイド、明確なパス設計、「学んで忘れる」からの脱却	ステップバイステップの図解チュートリアル 丁寧な図解解説、まるで専属講師がついているかのように進められます
没入型シミュレーションプログラミング 仮想マウスによる自動ナビゲーションで、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] 付録知識ベースを更新。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の最前線までのコア概念を直感的に理解するのを助けます。

👉 完全な付録を表示 · 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の探し方、それらの統合方法を学ぶ	🚧

三、上級エンジニア

章	主要な内容	状態
上級一：MCPとClaude Code Skills	MCPとSkillsによるIDE能力の拡張	🚧
上級二：Coding Toolsを長時間稼働させる方法	長時間実行されるタスクの設計と構成	🚧
上級三：マルチプラットフォーム開発：WeChatミニプログラムの構築	WeChatミニプログラムのエコシステムと開発フロー	✅
上級四：マルチプラットフォーム開発：バックエンドを含むWeChatミニプログラム	ミニプログラムへのデータベースとバックエンドロジックの導入	🚧
上級五：マルチプラットフォーム開発：Androidアプリの構築	Expoなどのツールを使用したAndroidアプリ開発	✅
上級六：マルチプラットフォーム開発：iOSアプリの構築	Expoなどのツールを使用したiOSアプリ開発	✅
上級七：自分だけの個人ページと学術ブログの構築	技術選定から構築、デプロイまでを網羅	🚧

AI能力付録

章	主要な内容	状態
上級AI一：RAGとは何か、どのように動作するか	RAGの原理と一般的なアーキテクチャの体系的な理解	✅
上級AI二：中・上級RAGとワークフローオーケストレーション：LangGraphを例に	LangGraphを使用した複雑なワークフローと高度なRAGの設計	🚧

🛠️ 学習方法

• 自身のレベルに合わせて章を選択して学習し、実践してください。疑問点があればIssueで質問してください。

💻 ローカルでの起動方法

現代的な方法

AI IDEの対話ボックス（VS Code, Cursor, Traeなど）で以下のプロンプトを入力してください：

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

従来の方法

1. npm install
2. npm run dev
3. ブラウザで http://localhost:3000 にアクセスしてください。

🤝 貢献について

• 問題を見つけた場合や、改善案がある場合は、Issueでフィードバックをお願いします。
• 貢献を希望される場合は、Pull Requestを送信してください。
• 新しいプロジェクトの立ち上げに興味がある場合は、Datawhaleオープンソースプロジェクトガイドに従ってください。

🙏 貢献者への感謝

• 散歩-プロジェクトリーダー (Datawhaleメンバー)
• 方可-アドバイザー (Datawhaleメンバー, 清華大学)
• Yerim Kang (実践プロジェクト部分-清華大学)
• 趙芷霖 (実践プロジェクト部分-清華大学)
• 李亦萱 (ページデザイン-清華大学)
• その他、suggestionをくださったすべてのベータテスターの皆様に感謝します。

特別な感謝

• @Sm1les 氏の多大なるサポートに感謝します。
• プロジェクトに貢献してくださったすべての開発者、スターをくださった皆様に感謝します ❤️

  

📧 お問い合わせ

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

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

📄 LICENSE

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

Star History