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

<!-- trigger vercel build -->
<div align="center">

<pre style="font-family: 'Courier New', monospace; font-size: 16px; color: #000000; margin: 0; padding: 0; line-height: 1.2; transform: skew(-1deg, 0deg); display: block;">
███████╗ █████╗ ███████╗██╗   ██╗    ██╗   ██╗██╗██████╗ ███████╗
██╔════╝██╔══██╗██╔════╝╚██╗ ██╔╝    ██║   ██║██║██╔══██╗██╔════╝
█████╗  ███████║███████╗ ╚████╔╝     ██║   ██║██║██████╔╝█████╗  
██╔══╝  ██╔══██║╚════██║  ╚██╔╝      ╚██╗ ██╔╝██║██╔══██╗██╔══╝  
███████╗██║  ██║███████║   ██║        ╚████╔╝ ██║██████╔╝███████╗
╚══════╝╚═╝  ╚═╝╚══════╝   ╚═╝         ╚═══╝  ╚═╝╚═════╝ ╚══════╝</pre>

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

<p align="center" style="font-size: 1.05em; color: #666; margin: 16px 0 8px;">
  すぐ始めて、一緒に vibe しよう！話せればアプリは作れる<br>
  <span style="font-size: 0.9em; color: #888;">Jump right in and vibe together — if you can talk, you can build apps.</span>
</p>

<p align="center">
  📌 <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">オンラインで読む (Read Online)</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">インタラクティブチュートリアル</a>
</p>

<p align="center">
  <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">オンラインで読む</a> ·
  <a href="#-コンテンツナビゲーション">学習マップ</a> ·
  <a href="#contact">コミュニティ交流</a>
</p>

<p align="center">
    <a href="https://github.com/datawhalechina/easy-vibe/stargazers" target="_blank">
        <img src="https://img.shields.io/github/stars/datawhalechina/easy-vibe?color=660874&style=for-the-badge&logo=star&logoColor=white&labelColor=1a1a2e" alt="Stars"></a>
    <a href="https://github.com/datawhalechina/easy-vibe/network/members" target="_blank">
        <img src="https://img.shields.io/github/forks/datawhalechina/easy-vibe?color=660874&style=for-the-badge&logo=git-fork&logoColor=white&labelColor=1a1a2e" alt="Forks"></a>
    <a href="LICENSE" target="_blank">
        <img src="https://img.shields.io/badge/License-CC_BY_NC_SA_4.0-4ecdc4?style=for-the-badge&logo=creative-commons&logoColor=white&labelColor=1a1a2e" alt="License"></a>
</p>

<p align="center">
  <a href="../zh-CN/README.md"><img alt="简体中文" src="https://img.shields.io/badge/简体中文-d9d9d9"></a>
  <a href="../zh-TW/README.md"><img alt="繁體中文" src="https://img.shields.io/badge/繁體中文-d9d9d9"></a>
  <a href="../en-US/README.md"><img alt="English" src="https://img.shields.io/badge/English-d9d9d9"></a>
  <a href="../ja-JP/README.md"><img alt="日本語" src="https://img.shields.io/badge/日本語-d9d9d9"></a>
  <a href="../es-ES/README.md"><img alt="Español" src="https://img.shields.io/badge/Español-d9d9d9"></a>
  <a href="../fr-FR/README.md"><img alt="Français" src="https://img.shields.io/badge/Français-d9d9d9"></a>
  <a href="../tlh/README.md"><img alt="Klingon" src="https://img.shields.io/badge/Klingon-d9d9d9"></a>
  <a href="../ko-KR/README.md"><img alt="한국어" src="https://img.shields.io/badge/한국어-d9d9d9"></a>
  <a href="../ar-SA/README.md"><img alt="العربية" src="https://img.shields.io/badge/العربية-d9d9d9"></a>
  <a href="../tr-TR/README.md"><img alt="Türkçe" src="https://img.shields.io/badge/Türkçe-d9d9d9"></a>
  <a href="../vi-VN/README.md"><img alt="Tiếng_Việt" src="https://img.shields.io/badge/Tiếng_Việt-d9d9d9"></a>
  <a href="../de-DE/README.md"><img alt="Deutsch" src="https://img.shields.io/badge/Deutsch-d9d9d9"></a>
  <a href="../bn-BD/README.md"><img alt="বাংলা" src="https://img.shields.io/badge/বাংলা-d9d9d9"></a>
</p>

</div>
<table align="center">
  <tr>
    <td width="50%" valign="top" align="center">
      <img src="../../assets/gif-header.png" width="100%">
      <br>
      <strong>初心者のための学習マップ</strong>
      <br>
      <sub>ゼロベースのガイド、明確なパス設計、「学んで忘れる」からの脱却</sub>
    </td>
    <td width="50%" valign="top" align="center">
      <img src="../../assets/gif-tutorial.png" width="100%">
      <br>
      <strong>ステップバイステップの図解チュートリアル</strong>
      <br>
      <sub>丁寧な図解解説、まるで専属講師がついているかのように進められます</sub>
    </td>
  </tr>
  <tr>
    <td width="50%" valign="top" align="center">
      <img src="../../assets/gif-ide.gif" width="100%">
      <br>
      <strong>没入型シミュレーションプログラミング</strong>
      <br>
      <sub>仮想マウスによる自動ナビゲーションで、IDEのコアな使い方を素早く習得</sub>
    </td>
    <td width="50%" valign="top" align="center">
      <img src="../../assets/gif-diffusion.gif" width="100%">
      <br>
      <strong>「見える」AI原理</strong>
      <br>
      <sub>アルゴリズムの原理をアニメーション化、AIがいかにして画像を「描く」のかを一目で理解</sub>
    </td>
  </tr>
  <tr>
    <td width="50%" valign="top" align="center">
      <img src="../../assets/gif-rag.gif" width="100%">
      <br>
      <strong>ゲームのようにRAGを学ぶ</strong>
      <br>
      <sub>独自の対話型コンポーネントで、クリックするだけでRAGのデータフローを明確に確認</sub>
    </td>
    <td width="50%" valign="top" align="center">
      <img src="../../assets/git-terminal.gif" width="100%">
      <br>
      <strong>可視化されたターミナルの原理</strong>
      <br>
      <sub>コマンドライン操作を可視化し、バックエンドのロジックと原理を直感的に表示</sub>
    </td>
  </tr>
</table>
<div align="center">
  <h3>⭐ <a href="https://github.com/datawhalechina/easy-vibe" style="color: #d0cd16ff;">こちらからStar</a> を追加して更新を応援してください ❤️</h3>
</div>

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-25]** 📚 **README を最新の中国語版に同期**: 日本語の入口ページを、最新の導入文、学習ナビゲーション、コンテンツ構成に合わせて更新しました。
- **[2026-03-02]** 🦞 **OpenClaw & AI Agent 対応強化**: `llms.txt` AI ナビゲーションファイルを追加。OpenClaw、Claude、Cursor、Trae などの AI Agent がリポジトリ構造を素早く理解し、チュートリアルコンテンツを正確に特定できるように。すべての🦞が楽しく学べることを願っています！
- **[2026-03-01]** [上級開発セクション](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/)を全面的にアップグレード：Claude Code の7つの詳細ガイド（MCP、Skills、Agent Teams など）と8つのクロスプラットフォーム開発実践（PWA、Electron、NFT、VS Code 拡張機能、Qt 産業アプリなど）を追加。
- **[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の原理などの一連のインタラクティブ・デモ・コンポーネントをリリース。

<details>
<summary>Past News</summary>

- **[2026-01-16]** プロジェクト構造を再構築し、初心者のハードルを下げるための「初心者入門」の章を正式に確立。
- **[2026-01-14]** 第一段階「製品プロトタイプの構築」ドキュメントの大規模な更新を完了。
- **[2026-01-13]** ドキュメントアーキテクチャの再構築を完了し、多言語(i18n)を全面的にサポート。
- **[2026-01-01]** プロジェクトのコア学習マップ (Learning Map) をリリースし、学習パスを明確化。
</details>

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

<div align="center">
  <img src="../../assets/readme-image1.png" alt="Learning Map" width="70%" style="border-radius: 10px; box-shadow: 0 8px 20px rgba(45,55,72,0.3); margin: 15px 0;"/>
</div>

### 📚 付録知識ベース

> **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)

<table>
  <tr>
    <td valign="top" width="33%">
      <strong>💻 コンピュータ基礎</strong><br><br>
      • <a href="../../docs/zh-cn/appendix/1-computer-fundamentals/transistor-to-cpu.md">トランジスタからCPUへ</a><br>
      • <a href="../../docs/zh-cn/appendix/1-computer-fundamentals/operating-systems.md">オペレーティングシステム</a><br>
      • <a href="../../docs/zh-cn/appendix/1-computer-fundamentals/data-encoding-storage.md">データのエンコード・保存・伝送</a><br>
      • <a href="../../docs/zh-cn/appendix/1-computer-fundamentals/computer-networks.md">ネットワーク：二台のPCはどう対話するか</a><br>
      • <a href="../../docs/zh-cn/appendix/1-computer-fundamentals/data-structures.md">データ構造</a><br>
      • <a href="../../docs/zh-cn/appendix/1-computer-fundamentals/algorithm-thinking.md">アルゴリズム思考入門</a>
    </td>
    <td valign="top" width="33%">
      <strong>🔧 開発ツール</strong><br><br>
      • <a href="../../docs/zh-cn/appendix/2-development-tools/git-version-control.md">Git：コードのタイムマシン</a><br>
      • <a href="../../docs/zh-cn/appendix/2-development-tools/command-line-shell.md">コマンドラインとShellスクリプト</a><br>
      • <a href="../../docs/zh-cn/appendix/2-development-tools/package-managers.md">パッケージマネージャー</a><br>
      • <a href="../../docs/zh-cn/appendix/2-development-tools/debugging-art/">デバッグの芸術</a><br>
      • <a href="../../docs/zh-cn/appendix/2-development-tools/regex.md">正規表現</a><br>
      • <a href="../../docs/zh-cn/appendix/2-development-tools/environment-path.md">環境変数とPATH</a>
    </td>
    <td valign="top" width="33%">
      <strong>🌐 ブラウザとフロントエンド</strong><br><br>
      • <a href="../../docs/zh-cn/appendix/3-browser-and-frontend/javascript-deep-dive.md">JavaScript言語の深掘り</a><br>
      • <a href="../../docs/zh-cn/appendix/3-browser-and-frontend/browser-as-os-rendering.md">ブラウザレンダリングパイプライン</a><br>
      • <a href="../../docs/zh-cn/appendix/3-browser-and-frontend/frontend-frameworks.md">フロントエンドフレームワークの比較</a><br>
      • <a href="../../docs/zh-cn/appendix/3-browser-and-frontend/graphics-animation.md">グラフィックスとアニメーション</a><br>
      • <a href="../../docs/zh-cn/appendix/3-browser-and-frontend/web-performance.md">Webパフォーマンスの測定と最適化</a><br>
      • <a href="../../docs/zh-cn/appendix/3-browser-and-frontend/frontend-engineering.md">フロントエンドエンジニアリングの全貌</a>
    </td>
  </tr>
  <tr>
    <td valign="top" width="33%">
      <strong>🖥️ サーバーとバックエンド</strong><br><br>
      • <a href="../../docs/zh-cn/appendix/4-server-and-backend/http-protocol.md">HTTPプロトコル</a><br>
      • <a href="../../docs/zh-cn/appendix/4-server-and-backend/api-design.md">API設計の哲学</a><br>
      • <a href="../../docs/zh-cn/appendix/4-server-and-backend/auth-authorization.md">認証と認可の体系</a><br>
      • <a href="../../docs/zh-cn/appendix/4-server-and-backend/concurrency-async.md">並行・非同期・マルチスレッド</a><br>
      • <a href="../../docs/zh-cn/appendix/4-server-and-backend/message-queues.md">メッセージキューとイベント駆動</a><br>
      • <a href="../../docs/zh-cn/appendix/4-server-and-backend/backend-layered-architecture.md">バックエンド階層構造</a>
    </td>
    <td valign="top" width="33%">
      <strong>📊 データ</strong><br><br>
      • <a href="../../docs/zh-cn/appendix/5-data/sql.md">SQL</a><br>
      • <a href="../../docs/zh-cn/appendix/5-data/database-fundamentals.md">データベース原理</a><br>
      • <a href="../../docs/zh-cn/appendix/5-data/data-tracking.md">データトラッキングとユーザー行動収集</a><br>
      • <a href="../../docs/zh-cn/appendix/5-data/data-analysis.md">データ分析の基礎</a><br>
      • <a href="../../docs/zh-cn/appendix/5-data/ab-testing.md">A/Bテストと実験駆動</a><br>
      • <a href="../../docs/zh-cn/appendix/5-data/data-visualization.md">データの可視化とダッシュボード</a>
    </td>
    <td valign="top" width="33%">
      <strong>🏗️ アーキテクチャとシステム設計</strong><br><br>
      • <a href="../../docs/zh-cn/appendix/6-architecture-and-system-design/monolith-to-microservices.md">モノリスからマイクロサービスへの進化</a><br>
      • <a href="../../docs/zh-cn/appendix/6-architecture-and-system-design/distributed-systems.md">分散システムの課題</a><br>
      • <a href="../../docs/zh-cn/appendix/6-architecture-and-system-design/high-availability.md">高可用性と災害復旧</a><br>
      • <a href="../../docs/zh-cn/appendix/6-architecture-and-system-design/system-design-methodology.md">システム設計メソッドロジー</a>
    </td>
  </tr>
  <tr>
    <td valign="top" width="33%">
      <strong>☁️ インフラと運用</strong><br><br>
      • <a href="../../docs/zh-cn/appendix/7-infrastructure-and-operations/docker-containers.md">Dockerコンテナ化</a><br>
      • <a href="../../docs/zh-cn/appendix/7-infrastructure-and-operations/kubernetes.md">Kubernetesオーケストレーション</a><br>
      • <a href="../../docs/zh-cn/appendix/7-infrastructure-and-operations/ci-cd.md">CI / CDオートメーション</a><br>
      • <a href="../../docs/zh-cn/appendix/7-infrastructure-and-operations/dns-https.md">ドメイン、DNS、HTTPS</a><br>
      • <a href="../../docs/zh-cn/appendix/7-infrastructure-and-operations/monitoring-logging.md">モニタリング、ログ、アラート</a><br>
      • <a href="../../docs/zh-cn/appendix/7-infrastructure-and-operations/infrastructure-as-code.md">Infrastructure as Code (IaC)</a>
    </td>
    <td valign="top" width="33%">
      <strong>🤖 人工知能</strong><br><br>
      • <a href="../../docs/zh-cn/appendix/8-artificial-intelligence/llm-principles.md">大規模言語モデルの仕組み</a><br>
      • <a href="../../docs/zh-cn/appendix/8-artificial-intelligence/transformer-attention.md">Transformerとアテンション機構</a><br>
      • <a href="../../docs/zh-cn/appendix/8-artificial-intelligence/rag.md">RAGアーキテクチャ</a><br>
      • <a href="../../docs/zh-cn/appendix/8-artificial-intelligence/ai-agents.md">AI Agentとツール呼び出し</a><br>
      • <a href="../../docs/zh-cn/appendix/8-artificial-intelligence/prompt-engineering.md">プロンプトエンジニアリング</a><br>
      • <a href="../../docs/zh-cn/appendix/8-artificial-intelligence/image-generation.md">画像生成の原理</a>
    </td>
    <td valign="top" width="33%">
      <strong>🎯 エンジニアの素養</strong><br><br>
      • <a href="../../docs/zh-cn/appendix/9-engineering-excellence/code-quality-refactoring.md">コード品質とリファクタリング</a><br>
      • <a href="../../docs/zh-cn/appendix/9-engineering-excellence/testing-strategies.md">テスト戦略</a><br>
      • <a href="../../docs/zh-cn/appendix/9-engineering-excellence/design-patterns.md">デザインパターン</a><br>
      • <a href="../../docs/zh-cn/appendix/9-engineering-excellence/security-thinking.md">セキュリティ思考と攻防の基礎</a><br>
      • <a href="../../docs/zh-cn/appendix/9-engineering-excellence/technical-writing.md">技術ドキュメントの作成</a><br>
      • <a href="../../docs/zh-cn/appendix/9-engineering-excellence/open-source-collaboration.md">オープンソースでの協力</a>
    </td>
  </tr>
</table>

### 一、ゼロからの入門

| 章 | 主要な内容 | 状態 |
| :----------------------------------------------------------------------------------------------- | :------------------------------------------------ | :--- |
| [前書き：学習マップ](../../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エージェントとの協調作業の方法を学ぶ | ✅ |

<details>
<summary><strong>二、初・中級エンジニア</strong></summary>

#### フロントエンド

| 章 | 主要な内容 | 状態 |
| :------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------- | :--- |
| [フロントエンド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の探し方、それらの統合方法を学ぶ | 🚧 |

</details>

<details>
<summary><strong>三、上級エンジニア</strong></summary>

#### Claude Code コアスキル

| 章 | 主要な内容 | 状態 |
| :--- | :--- | :--- |
| [Claude Code クイックスタート](../../docs/zh-cn/stage-3/core-skills/basics/) | インストール、基本操作、実践的なヒントとよく使うコマンド | ✅ |
| [Claude Code MCP 完全ガイド](../../docs/zh-cn/stage-3/core-skills/mcp/) | MCPでClaude CodeをGitHub、データベース、APIなどの外部サービスに接続 | ✅ |
| [Claude Code Skills 完全ガイド](../../docs/zh-cn/stage-3/core-skills/skills/) | 専門知識を再利用可能なスキルパックにパッケージ化 | ✅ |
| [Claude Code ワークフローベストプラクティス](../../docs/zh-cn/stage-3/core-skills/workflow/) | 日常開発、リファクタリング、コードレビューなどのベストプラクティス | ✅ |
| [Claude Agent Teams 完全ガイド](../../docs/zh-cn/stage-3/core-skills/agent-teams/) | 複数AIインスタンスの協調作業、本物の開発チームのように並行作業 | ✅ |
| [Claude Code Superpowers エンジニアリング開発](../../docs/zh-cn/stage-3/core-skills/superpowers/) | TDDとベストプラクティスに従ったエンジニアリンググレードのコードを書く | ✅ |
| [Claude Code を長時間稼働させる方法](../../docs/zh-cn/stage-3/core-skills/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アプリ開発 | ✅ |
| [PWA開発](../../docs/zh-cn/stage-3/cross-platform/3.7-pwa/) | オフライン対応のプログレッシブWebアプリを構築 | 🚧 |
| [Electronデスクトップアプリ開発](../../docs/zh-cn/stage-3/cross-platform/3.8-electron/) | クロスプラットフォームデスクトップアプリケーションを構築 | 🚧 |
| [VS Code拡張機能開発](../../docs/zh-cn/stage-3/cross-platform/3.9-vscode-extension/) | VS Code拡張機能とプラグインを開発 | 🚧 |
| [Qt産業アプリケーション開発](../../docs/zh-cn/stage-3/cross-platform/3.10-qt-industrial/) | Qtを使用した産業グレードのデスクトップアプリケーションを構築 | 🚧 |

</details>

## 🛠️ 学習方法

- 自身のレベルに合わせて章を選択して学習し、実践してください。疑問点があれば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) 氏の多大なるサポートに感謝します。
- プロジェクトに貢献してくださったすべての開発者、スターをくださった皆様に感謝します ❤️

<div align="center"> 

 <p> 
   <a href="https://github.com/datawhalechina/easy-vibe/stargazers"><img src="https://reporoster.com/stars/datawhalechina/easy-vibe" alt="Stargazers"/></a> 
   &nbsp;&nbsp; 
   <a href="https://github.com/datawhalechina/easy-vibe/network/members"><img src="https://reporoster.com/forks/datawhalechina/easy-vibe" alt="Forkers"/></a> 
 </p> 
 
 <a href="https://www.star-history.com/#datawhalechina/easy-vibe&type=timeline&legend=top-left"> 
   <picture> 
     <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=datawhalechina/easy-vibe&type=timeline&theme=dark&legend=top-left" /> 
     <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=datawhalechina/easy-vibe&type=timeline&legend=top-left" /> 
   </picture> 
 </a>
</div>

<div align=center style="margin-top: 30px;">
  <a href="https://github.com/datawhalechina/easy-vibe/graphs/contributors">
    <img src="https://contrib.rocks/image?repo=datawhalechina/easy-vibe" />
  </a>
</div>

## <span id="contact">📧 お問い合わせ</span>

<div align=center>
<p>質問、提案、交流をご希望の方は、以下のQRコードをスキャンしてください</p>
<img src="../../assets/wechat.png" width="280">

<p>公式アカウントをフォロー：Datawhale</p>
<img src="https://raw.githubusercontent.com/datawhalechina/pumpkin-book/master/res/qrcode.jpeg" width="180" height="180">
</div>

## 📄 LICENSE

<div align="center">
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
  <img
    alt="知識共有ライセンス"
    style="border-width:0"
    src="https://img.shields.io/badge/license-CC%20BY--NC--SA%204.0-lightgrey"
  />
</a>
<br />
本作品は
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
  クリエイティブ・コモンズ 表示 - 非営利 - 継承 4.0 国際 ライセンス
</a>
の下でライセンスされています。
</div>

## 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)