delorex/test-repo
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
26abc96b2f9a55df8c7a9d9720cccc0ad27e370d
test-repo/docs-readme/ja-JP/README.md
T
sanbuphy 0e0de6382f refactor: restructure docs for i18n support 
- Move existing documentation to docs/zh-cn/
- Initialize structure for multiple languages (ar-sa, de-de, en-us, etc.)
- Add update_readmes.cjs utility script
- Update deployment documentation
2026-01-13 20:09:45 +08:00

232 lines
19 KiB
Markdown
Raw Blame History

<!-- 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: Learn Vibe Coding from 0 to 1
### *ゼロから、プロジェクトベース学習、最初の AI 製品を構築*
<p align="center">
📌 <a href="https://datawhalechina.github.io/easy-vibe/">オンラインで読み始める (Start Reading Online)</a>
</p>
<p align="center">
<a href="https://datawhalechina.github.io/easy-vibe/">オンラインで読む</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="./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="../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="../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>
</p>
</div>
## 🚀 プロジェクト紹介
AI でコードを書こうとしてエラーが続き、諦めかけたくなり、プログラムを本当にオンラインにする方法がわからないとき 😢
本チュートリアルは、0 から 1 まで、Vibe Coding のスキルを段階的に習得できるように設計されています：
- **第 0 段階**：**ミニゲームから迅速に入門**して Vibe Coding のスキルを習得
- **第 1 段階**：プロダクトマネージャーの視点からの **Vibe Coding スキルと業務理解**、Web アプリケーションプロトタイプの実装
- **第 2 段階**：**フロントエンド・バックエンド開発と AI 能力**に関連する Vibe Coding テクニックの学習、完全なアプリケーションの完成
- **第 3 段階**：**マルチプラットフォーム複雑アプリケーション**の構築手法を習得、本番級アプリケーションへ
私たちは、Vibe Coding を習得し体系的なトレーニングを組み合わせることで、一人でフロントエンド開発、バックエンド開発、AI 能力統合、プロダクトデザインを兼ね備えた開発者になれると信じています。
> **本プロジェクトは主に 3 種類の学習者を対象としています：**
>
> - **初心者（一般人 / プロダクト・運用担当者）**：非技術系初心者が重要な概念を理解し、最初のプロダクトプロトタイプを完成させるのを支援
> - **初中級開発者（一定の基礎がある学生と開発者）**：フロントエンド・バックエンドの Vibe Coding と AI 能力の知識を習得
> - **上級開発者（企業・スタートアップ、オープンソース・独立開発者）**：高度な開発技術、マルチプラットフォーム開発
### 📖 コンテンツナビゲーション
<div align="center">
<img src="../assets/readme-image1.png" alt="Learning Map" width="100%" style="border-radius: 10px; box-shadow: 0 8px 20px rgba(45,55,72,0.3); margin: 15px 0;"/>
</div>
### 総付録
[AI 能力辞書：一般的な AI コア概念と用語、シーンの解釈](docs/appendix/ai-capability-dictionary.md)
### 零、幼児園
| 章 | 主要内容 | 状態 |
| :--- | :--- | :--- |
| [前書：学習マップ](docs/stage-0/0.1-learning-map/index.md) | 全体学習パスのガイド | ✅ |
| [初級一：AI 時代、話せるだけでプログラミングできる](docs/stage-0/0.2-ai-capabilities-through-games/index.md) | スネークゲームなどの事例を通じて AI プログラミングの能力を初めて体験 | ✅ |
### 一、AI プロダクトマネージャー
| 章 | 主要内容 | 状態 |
| :--- | :--- | :--- |
| [初級二：AI IDE ツールを知る](docs/stage-1/1.1-introduction-to-ai-ide/index.md) | IDE の使用方法を学び、ローカルでミニゲームを作成 | ✅ |
| [初級三：手を動かしてプロトタイプを作る](docs/stage-1/1.2-building-prototype/index.md) | ニーズ分析、AI による単一ページ生成、複数ページプロダクトプロトタイプの生成へ | ✅ |
| [初級四：プロトタイプに AI 能力を追加](docs/stage-1/1.3-integrating-ai-capabilities/index.md) | 一般的な AI 能力（テキスト、画像、動画）の接続方法を習得 | ✅ |
| [初級五：完全プロジェクト実戦](docs/stage-1/1.4-complete-project-practice/index.md) | 実際のシーンをシミュレート、ユーザーフィードバックを受け反復改良、プロジェクトを完全に | ✅ |
| [大課題：完全な Web アプリケーションプロトタイプを作成し展示](docs/stage-1/1.5-final-project/index.md) | アプリケーションを完全に実装し、アプリケーション効果を展示 | ✅ |
#### 付録
| 章 | 主要内容 | 状態 |
| :--- | :--- | :--- |
| [付録 A：プロダクト思考補充](docs/stage-1/appendix-a-product-thinking/index.md) | ゼロからイチまでプロダクトを作る際に必要な思考フレームワーク | ✅ |
| [付録 B：一般的なエラーと解決策](docs/stage-1/appendix-b-common-errors/index.md) | Vibe Coding における一般的なエラーとトラブルシューティング方法 | ✅ |
### 二、初中級開発エンジニア
#### フロントエンド部分
| 章 | 主要内容 | 状態 |
| :--- | :--- | :--- |
| [フロントエンド零：lovart を使用して素材を生成](docs/stage-2/frontend/2.0-lovart-assets/) | lovart を使ってキャラクター、シーンなどの視覚素材を一括生成し、UI デザインとフロントエンド開発に素材基盤を提供 | 🚧 |
| [フロントエンド一：Figma と MasterGo 入門](docs/stage-2/frontend/2.1-figma-mastergo/) | デザインツールを使って情報アーキテクチャとページ構造を整理し、フロントエンド実装の基礎を築く | 🚧 |
| [フロントエンド二：最初のモダンアプリケーションを構築 - UI デザイン](docs/stage-2/frontend/2.2-ui-design/) | デザイン画に基づいてコンポーネント化インターフェースを完成させ、デザインからコードへの最初のパスを実現 | 🚧 |
| [フロントエンド三：UI デザイン仕様とマルチプロダクト UI デザインを参照](docs/stage-2/frontend/2.3-multi-product-ui/) | 統一されたメインビジュアルを中心にマルチプロダクトインターフェースを拡張し、体系的デザイン能力を練習 | 🚧 |
| [フロントエンド四：一緒にハリー・ポッターの肖像画を作ろう](docs/stage-2/frontend/2.4-hogwarts-portraits/chapter4-lets-build-hogwarts-portraits.md) | 0 から 1 まで AI 能力を統合したフロントエンドアプリケーションを作成し、デザインと開発を接続 | ✅ |
#### バックエンドとフルスタック部分
| 章 | 主要内容 | 状態 |
| :--- | :--- | :--- |
| [バックエンド一：API とは](docs/stage-2/backend/2.1-what-is-api/extra2/extra2-what-is-api.md) | HTTP インターフェースとリクエスト・レスポンスモデルを理解し、バックエンド統合と連携調整の準備 | ✅ |
| [バックエンド二：データベースから Supabase へ](docs/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase.md) | Supabase 上でデータベースと API を実装し、データモデルとフロントエンドページを接続 | ✅ |
| [バックエンド三：大規模言語モデル支援によるインターフェースコードとドキュメント作成](docs/stage-2/backend/2.3-ai-interface-code/) | 大規模言語モデルを使ってインターフェースとデータベースのドキュメントおよびコードの生成を支援し、読みやすくテスト可能なバックエンドを実現 | 🚧 |
| [バックエンド四：Git ワークフロー](docs/stage-2/backend/2.4-git-workflow/extra1/extra1-what-is-git-and-what-is-github.md) | Git ワークフローでコードを管理し、バージョン管理とコラボレーションを行う | ✅ |
| [バックエンド五：Zeabur デプロイ](docs/stage-2/backend/2.5-zeabur-deployment/extra6/extra6-zeabur-what-is-it-and-how-to-deploy-web-applications.md) | アプリケーションを Zeabur にデプロイしてオンライン化 | ✅ |
| [バックエンド六：モダン CLI 開発ツール](docs/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/stage-2/backend/2.7-stripe-payment/) | 決済システムを接続し、課金パスと基本決済フローを完成 | 🚧 |
| [大課題 1：最初のモダンアプリケーションを構築 - フルスタックアプリ](docs/stage-2/assignments/2.1-fullstack-app/) | フロントエンド、バックエンド、決済モジュールを統合し、オンライン可能なフルスタック Web アプリケーションを完成 | 🚧 |
| [大課題 2：モダンフロントエンドコンポーネントライブラリ + Trae 実戦](docs/stage-2/assignments/2.2-modern-frontend-trae/) | モダンフロントエンドコンポーネントライブラリと Trae を使用し、ログイン・登録可能で課金対応のプロダクトを独立完成 | 🚧 |
#### AI 能力付録
| 章 | 主要内容 | 状態 |
| :--- | :--- | :--- |
| [ AI 一：Dify 入門とナレッジベース統合](docs/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/stage-2/ai-capabilities/2.2-multimodal-api/extra3/extra3-ai-capability-starter-handbook.md) | 適切なモデルと API を検索する方法を学び、テキスト、画像などのマルチモーダル能力をプロダクトに統合 | 🚧 |
### 三、上級開発エンジニア
| 章 | 主要内容 | 状態 |
| :--- | :--- | :--- |
| [上級一：MCP と ClaudeCode Skills](docs/stage-3/core-skills/3.1-mcp-claudecode-skills/) | MCP と Skills を通じて IDE 能力を拡張し、外部サービスをツールとして接続 | 🚧 |
| [上級二：Coding Tools を長時間動作させる方法](docs/stage-3/core-skills/3.2-long-running-tasks/) | 長時間動作するタスクを設計・設定し、Coding Tools をより安定して信頼性の高いものに | 🚧 |
| [上級三：マルチプラットフォーム開発：WeChat ミニプログラムの構築方法](docs/stage-3/cross-platform/3.3-wechat-miniprogram/) | WeChat ミニプログラムのエコシステムを理解し、公式テンプレートからリリースまでフロントエンドミニプログラムを完成 | ✅ |
| [上級四：マルチプラットフォーム開発：WeChat ミニプログラムの構築方法 - バックエンド含む](docs/stage-3/cross-platform/3.4-wechat-miniprogram-backend/) | ミニプログラムにデータベースとバックエンドロジックを統合し、完全な業務クローズドループを実現 | 🚧 |
| [上級五：マルチプラットフォーム開発：Android アプリの構築方法](docs/stage-3/cross-platform/3.5-android-app/) | Expo などのツールを使用し、Web/ネイティブ一体化の Android アプリ開発を完成 | 🚧 |
| [上級六：マルチプラットフォーム開発：iOS アプリの構築方法](docs/stage-3/cross-platform/3.6-ios-app/) | Expo などのツールを使用し、Web/ネイティブ一体化の iOS アプリ開発を完成 | 🚧 |
| [上級七：自分専用の個人ウェブページと学術ブログの構築方法](docs/stage-3/personal-brand/3.7-personal-website-blog/) | 選定、構築からデプロイまで、個人プロジェクトと学術成果を展示する長期的なオンラインホームページを構築 | 🚧 |
#### AI 能力付録
| 章 | 主要内容 | 状態 |
| :--- | :--- | :--- |
| [上級 AI 一：RAG とは、それがどのように動作するか](docs/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/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) さんの本プロジェクトへの支援と支持に感謝
- 本プロジェクトに貢献してくれたすべての開発者に感謝 ❤️
<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>以下の QR コードをスキャンして公式アカウントをフォローしてください：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)
Reference in New Issue View Git Blame Copy Permalink