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へと導きます：

あなたのレベルに応じて、異なるステージから始めることをお勧めします：

• ゼロベース / プロダクトマネージャー：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-02] 🦞 OpenClaw & AI Agent 対応強化: llms.txt AI ナビゲーションファイルを追加。OpenClaw、Claude、Cursor、Trae などの AI Agent がリポジトリ構造を素早く理解し、チュートリアルコンテンツを正確に特定できるように。すべての🦞が楽しく学べることを願っています！
• [2026-03-01] 上級開発セクションを全面的にアップグレード：Claude Code の7つの詳細ガイド（MCP、Skills、Agent Teams など）と8つのクロスプラットフォーム開発実践（PWA、Electron、NFT、VS Code 拡張機能、Qt 産業アプリなど）を追加。
• [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の探し方、それらの統合方法を学ぶ	🚧

三、上級エンジニア

Claude Code コアスキル

章	主要な内容	状態
Claude Code クイックスタート	インストール、基本操作、実践的なヒントとよく使うコマンド	✅
Claude Code MCP 完全ガイド	MCPでClaude CodeをGitHub、データベース、APIなどの外部サービスに接続	✅
Claude Code Skills 完全ガイド	専門知識を再利用可能なスキルパックにパッケージ化	✅
Claude Code ワークフローベストプラクティス	日常開発、リファクタリング、コードレビューなどのベストプラクティス	✅
Claude Agent Teams 完全ガイド	複数AIインスタンスの協調作業、本物の開発チームのように並行作業	✅
Claude Code Superpowers エンジニアリング開発	TDDとベストプラクティスに従ったエンジニアリンググレードのコードを書く	✅
Claude Code を長時間稼働させる方法	長時間実行タスクを設計し、完了まで継続的に動作させる	✅

マルチプラットフォーム開発

章	主要な内容	状態
WeChatミニプログラムの構築方法	WeChatミニプログラムのエコシステム、公式テンプレートからリリースまで	✅
バックエンドを含むWeChatミニプログラムの構築方法	ミニプログラムへのデータベースとバックエンドロジックの導入	✅
Androidアプリ開発	Expoなどのツールを使用したAndroidアプリ開発	✅
iOSアプリ開発	Expoなどのツールを使用したiOSアプリ開発	✅
PWA開発	オフライン対応のプログレッシブWebアプリを構築	🚧
Electronデスクトップアプリ開発	クロスプラットフォームデスクトップアプリケーションを構築	🚧
VS Code拡張機能開発	VS Code拡張機能とプラグインを開発	🚧
Qt産業アプリケーション開発	Qtを使用した産業グレードのデスクトップアプリケーションを構築	🚧

🛠️ 学習方法

• 自身のレベルに合わせて章を選択して学習し、実践してください。疑問点があれば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