delorex/test-repo
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
b68eaa03646034fdbf95ef387f4742085950c264
test-repo/docs-readme/ja-JP/README.md
T
sanbuphy c8b68e5139 feat(ui): update hero button text and enhance welcome screen 
- Change primary hero button text from "Start Learning" to "Start Vibe Together!" across all language versions to align with project branding
- Update online reading links in README files to point to /welcome.html for better user onboarding
- Enhance WelcomeScreen.vue with improved animation timing and spacing
- Add dynamic SVG wordmark to homepage hero section for visual appeal
- Implement animated color transition for top promo bar
- Remove testing guidelines comment in AGENTS.md as placeholder
- Adjust feature card styling with increased min-height and icon sizes
2026-03-18 12:17:03 +08:00

431 lines
34 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!-- 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">
📌 <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-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)
Reference in New Issue View Git Blame Copy Permalink