feat(docs): add NavGrid/NavCard components and restructure stage pages

- Add NavGrid.vue and NavCard.vue components for better navigation layout - Restructure stage-0 index pages across languages into intro.md with new navigation components - Remove old stage-0 index.md files and update stage-3 pages similarly - Add new dependencies 'claude' and 'codex' to package.json - Improve code formatting in multiple Vue components for better readability - Update documentation content and structure for better user experience
2026-02-01 23:42:12 +08:00
parent a9a5c5c8a7
commit ad95658a11
171 changed files with 16366 additions and 7946 deletions
@@ -1,42 +0,0 @@
-# Appendix
-
-Knowledge base for AI, Frontend, Backend, and General Skills.
-
-## Content Overview
-
-### AI Basics
- [Prompt Engineering](/ja-jp/appendix/prompt-engineering)
- [AI Evolution](/ja-jp/appendix/ai-evolution)
- [LLM Introduction](/ja-jp/appendix/llm-intro)
- [VLM Introduction](/ja-jp/appendix/vlm-intro)
- [AI Image Generation](/ja-jp/appendix/image-gen-intro)
- [AI Audio Models](/ja-jp/appendix/audio-intro)
- [Context Engineering](/ja-jp/appendix/context-engineering)
- [AI Agents](/ja-jp/appendix/agent-intro)
- [AI Capability Dictionary](/ja-jp/appendix/ai-capability-dictionary)
-
-### Frontend Development
- [Web Basics (HTML/CSS/JS)](/ja-jp/appendix/web-basics)
- [Frontend Evolution](/ja-jp/appendix/frontend-evolution)
- [Frontend Performance](/ja-jp/appendix/frontend-performance)
- [Canvas 2D](/ja-jp/appendix/canvas-intro)
- [URL to Browser](/ja-jp/appendix/url-to-browser)
- [Browser DevTools](/ja-jp/appendix/browser-devtools)
-
-### Backend Development
- [Backend Evolution](/ja-jp/appendix/backend-evolution)
- [Backend Languages](/ja-jp/appendix/backend-languages)
- [Database Principles](/ja-jp/appendix/database-intro)
- [Cache Design](/ja-jp/appendix/cache-design)
- [Message Queues](/ja-jp/appendix/queue-design)
- [Authentication](/ja-jp/appendix/auth-design)
- [Tracking Design](/ja-jp/appendix/tracking-design)
- [Operations](/ja-jp/appendix/operations)
-
-### General Skills
- [API Introduction](/ja-jp/appendix/api-intro)
- [IDE Introduction](/ja-jp/appendix/ide-intro)
- [Terminal Introduction](/ja-jp/appendix/terminal-intro)
- [Git Introduction](/ja-jp/appendix/git-intro)
- [Computer Networks](/ja-jp/appendix/computer-networks)
- [Deployment](/ja-jp/appendix/deployment)
@@ -0,0 +1,186 @@
+# 付録
+
+**付録**セクションへようこそ！ここは人工知能の基礎とフルスタック開発の基礎を集めたもので、学習旅の重要な参考ライブラリです。
+
+## コンテンツカテゴリー
+
+### AI基礎
+
+人工知能の核心的概念、発展歴史、最先端の技術原理を理解する：
+<NavGrid>
+  <NavCard
+    href="/ja-jp/appendix/prompt-engineering/"
+    title="プロンプトエンジニアリング"
+    description="AIとの効率的な対話の技術をマスターし、大規模モデルの潜在能力を引き出す"
+  />
+  <NavCard
+    href="/ja-jp/appendix/ai-evolution"
+    title="AI進化史"
+    description="AI開発の重要なマイルストーンを振り返り、技術進化の軌跡を理解する"
+  />
+  <NavCard
+    href="/ja-jp/appendix/llm-intro"
+    title="大規模言語モデル"
+    description="大規模言語モデル（LLM）の仕組みと応用を深くわかりやすく解説する"
+  />
+  <NavCard
+    href="/ja-jp/appendix/vlm-intro"
+    title="マルチモーダル大規模モデル"
+    description="画像や音声などの複数のデータモダリティを処理できる高度なモデルを探索する"
+  />
+  <NavCard
+    href="/ja-jp/appendix/image-gen-intro"
+    title="AI画像生成原理"
+    description="AI画像生成の根本的なロジックと技術実装を解明する"
+  />
+  <NavCard
+    href="/ja-jp/appendix/audio-intro"
+    title="AIオーディオモデル"
+    description="音声合成、認識、音楽生成分野でのAI応用を理解する"
+  />
+  <NavCard
+    href="/ja-jp/appendix/context-engineering"
+    title="コンテキストエンジニアリング"
+    description="コンテキスト管理を最適化し、AIタスクの長期的な一貫性を向上させる方法を学ぶ"
+  />
+  <NavCard
+    href="/ja-jp/appendix/agent-intro"
+    title="エージェントインテリジェンス"
+    description="自律的な意思決定と実行能力を持つAIエージェントアーキテクチャを探索する"
+  />
+  <NavCard
+    href="/ja-jp/appendix/ai-capability-dictionary"
+    title="AI能力辞書"
+    description="AI分野の常用語と核心概念のクイックリファレンスハンドブック"
+  />
+</NavGrid>
+
+
+### フロントエンド基礎
+
+フロントエンド開発の技術基盤を固める：
+<NavGrid>
+  <NavCard
+    href="/ja-jp/appendix/web-basics"
+    title="HTML/CSS/JS基礎"
+    description="Webページ構築の三大柱、フロントエンド開発初心者の必修科目"
+  />
+  <NavCard
+    href="/ja-jp/appendix/frontend-evolution"
+    title="フロントエンド進化史"
+    description="フロントエンド技術スタックの進化を理解し、技術発展トレンドを把握する"
+  />
+  <NavCard
+    href="/ja-jp/appendix/frontend-performance"
+    title="フロントエンドパフォーマンス最適化"
+    description="Webページの読み込み速度とインタラクションのスムーズさを向上させる重要な戦略を学ぶ"
+  />
+  <NavCard
+    href="/ja-jp/appendix/canvas-intro"
+    title="Canvas 2D入門"
+    description="Canvas描画APIをマスターし、クールなグラフィックスとアニメーション効果を実現する"
+  />
+  <NavCard
+    href="/ja-jp/appendix/url-to-browser"
+    title="URLからブラウザ表示まで"
+    description="ブラウザがページをレンダリングする完全なプロセスのフルチェーン分析"
+  />
+  <NavCard
+    href="/ja-jp/appendix/browser-devtools/"
+    title="ブラウザ開発者ツール"
+    description="開発者ツールを熟練に使用し、フロントエンドの問題を効率的に特定・解決する"
+  />
+</NavGrid>
+
+
+### バックエンド基礎
+
+バックエンド開発の核心概念をマスターする：
+<NavGrid>
+  <NavCard
+    href="/ja-jp/appendix/backend-evolution"
+    title="バックエンド進化史"
+    description="モノリシックからマイクロサービスへ、バックエンドアーキテクチャの進化を探索する"
+  />
+  <NavCard
+    href="/ja-jp/appendix/backend-languages"
+    title="バックエンドプログラミング言語"
+    description="主流のバックエンド言語の特性と適用シナリオを比較し、最適な技術スタックを選ぶ"
+  />
+  <NavCard
+    href="/ja-jp/appendix/database-intro"
+    title="データベース原理"
+    description="データベースの核心原理を理解し、データストレージと検索の技術をマスターする"
+  />
+  <NavCard
+    href="/ja-jp/appendix/cache-design"
+    title="システムキャッシュ設計"
+    description="キャッシュ戦略を学び、システムの高並列処理能力を向上させる"
+  />
+  <NavCard
+    href="/ja-jp/appendix/queue-design"
+    title="メッセージキュー設計"
+    description="メッセージキューの分離とピークシェービングにおける重要な役割をマスターする"
+  />
+  <NavCard
+    href="/ja-jp/appendix/auth-design"
+    title="認証原理と実践"
+    description="安全な身元認証と権限管理システムを構築する"
+  />
+  <NavCard
+    href="/ja-jp/appendix/tracking-design"
+    title="トラッキング設計"
+    description="科学的にデータトラッキングを設計し、プロダクト意思決定にデータサポートを提供する"
+  />
+  <NavCard
+    href="/ja-jp/appendix/operations"
+    title="オンライン運用"
+    description="システムデプロイメント、モニタリング、トラブルシューティングの運用スキルをマスターする"
+  />
+</NavGrid>
+
+
+### 汎用スキル
+
+ソフトウェア開発の基礎知識：
+<NavGrid>
+  <NavCard
+    href="/ja-jp/appendix/api-intro"
+    title="API入門"
+    description="APIインターフェース設計と開発の基礎知識"
+  />
+  <NavCard
+    href="/ja-jp/appendix/ide-intro/"
+    title="IDE原理"
+    description="統合開発環境（IDE）の内部動作メカニズムを理解する"
+  />
+  <NavCard
+    href="/ja-jp/appendix/terminal-intro"
+    title="ターミナル入門"
+    description="コマンドラインターミナルの基本操作をマスターし、開発効率を向上させる"
+  />
+  <NavCard
+    href="/ja-jp/appendix/git-intro"
+    title="Git詳細紹介"
+    description="Gitバージョン管理の原理と高度な使用方法を深く理解する"
+  />
+  <NavCard
+    href="/ja-jp/appendix/computer-networks"
+    title="コンピュータネットワーク"
+    description="ネットワークプロトコルと通信原理の基礎知識"
+  />
+  <NavCard
+    href="/ja-jp/appendix/deployment"
+    title="デプロイメントと公開"
+    description="アプリケーションデプロイメントとリリースの完全なプロセスとベストプラクティス"
+  />
+</NavGrid>
+
+
+## 使用提案
+
+- 学習プロセス中の参考資料として、必要に応じて参照する
+- 馴染みのない技術概念に遭遇した場合、まずここで説明を探す
+- 一度通読することをお勧めし、完全な知識体系を確立する
+
+ここはあなたの技術知識の宝庫です、いつでも参照を歓迎します！
@@ -1,19 +0,0 @@
-# AI Product Manager
-
-Welcome to the AI Product Manager stage. Here, you will start from scratch and master the Vibe Coding workflow to become a super individual capable of independent product design.
-
-## Stage Overview
-
-### Getting Started
-Suitable for product, operations, and non-technical backgrounds. Understand AI programming logic through games and build confidence.
-
- 1. Learning Map (Coming Soon)
- 2. If you can speak, you can code (Coming Soon)
-
-### Product Manager
-Master the Vibe Coding workflow. Learn to break down requirements and independently complete high-fidelity web application prototypes.
-
- 1. Introduction to AI IDE (Coming Soon)
- 2. Building a Prototype (Coming Soon)
- 3. Integrating AI Capabilities (Coming Soon)
- 4. Complete Project Practice (Coming Soon)
@@ -0,0 +1,66 @@
+# 初心者とプロダクトプロトタイプ
+
+**AIプロダクトマネージャー**ステージへようこそ！これはEasy-Vibeチュートリアルの出発点で、プログラミング経験ゼロの学習者向けに設計されています。
+
+## 学べること
+
+このステージでは、ゼロから始めてVibe Codingワークフローをマスターし、独立したプロダクトデザインができるスーパー個体になります。
+
+### 入門編
+
+プロダクト、オペレーション、非技術職の方に最適。ゲームを通じてAIプログラミングのロジックを理解し、自信を築きます：
+<NavGrid>
+  <NavCard
+    href="/ja-jp/stage-0/0.1-learning-map/"
+    title="学習マップ"
+    description="全体の学習パスを理解し、各ステージの目標と成果を明確にする"
+  />
+  <NavCard
+    href="/ja-jp/stage-0/0.2-ai-capabilities-through-games/"
+    title="AI時代：話せればプログラミングできる"
+    description="スネークゲームなどを通じてAIプログラミングの魅力を体験し、コーディングへの恐怖を打破する"
+  />
+</NavGrid>
+
+
+### プロダクトマネージャー
+
+Vibe Codingワークフローをマスター。要件を分解し、高忠実度のWebアプリケーションプロトタイプを独立して完成させる：
+<NavGrid>
+  <NavCard
+    href="/ja-jp/stage-1/1.1-introduction-to-ai-ide/"
+    title="AI IDEツール入門"
+    description="現在の主流AIプログラミングツールを学び、最適な開発パートナーを選ぶ"
+  />
+  <NavCard
+    href="/ja-jp/stage-1/1.2-building-prototype/"
+    title="プロトタイプ作成"
+    description="プロダクトアイデアを迅速にビジュアルプロトタイプに変換し、低コストで試行錯誤する方法を学ぶ"
+  />
+  <NavCard
+    href="/ja-jp/stage-1/1.3-integrating-ai-capabilities/"
+    title="AI機能の統合"
+    description="シンプルなAI APIを統合して、プロトタイプにインテリジェンスを持たせる"
+  />
+  <NavCard
+    href="/ja-jp/stage-1/1.4-complete-project-practice/"
+    title="完全プロジェクト実践"
+    description="学んだことを総合的に応用し、0から1までの完全なプロダクトプロトタイプ開発を完成させる"
+  />
+</NavGrid>
+
+
+## 対象者
+
+- プログラミング経験ゼロのプロダクトマネージャー、オペレーションスタッフ
+- アイデアを迅速に検証したい起業家
+- AIプログラミングに興味のある非技術職の方
+- プロトタイピングスキルを向上させたいデザイナー
+
+## 学習パス
+
+```
+入門編 → プロダクトマネージャー基礎 → AI機能統合 → 完全プロジェクト実践
+```
+
+AIプログラミングの旅を始める準備はできましたか？左のナビゲーションをクリックして学習を始めましょう！
@@ -1,37 +0,0 @@
-# Full-Stack Development
-
-Deep dive into full-stack development. Frontend componentization, database design, backend API development, and deployment.
-
-## Stage Overview
-
-### Frontend Development
-Master modern frontend development with component libraries and design tools.
-
- [Frontend 0: Lovart Assets](/ja-jp/stage-2/frontend/2.0-lovart-assets/)
- [Frontend 1: Figma & MasterGo](/ja-jp/stage-2/frontend/2.1-figma-mastergo/)
- [Frontend 2: UI Design](/ja-jp/stage-2/frontend/2.2-ui-design/)
- [Frontend 3: Multi-Product UI](/ja-jp/stage-2/frontend/2.3-multi-product-ui/)
- [Frontend 4: Hogwarts Portraits](/ja-jp/stage-2/frontend/2.4-hogwarts-portraits/chapter4-lets-build-hogwarts-portraits)
-
-### Backend & Full-Stack
-Learn API design, database management, and deployment strategies.
-
- [Backend 1: What is API](/ja-jp/stage-2/backend/2.1-what-is-api/extra2/extra2-what-is-api)
- [Backend 2: Database & Supabase](/ja-jp/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase)
- [Backend 3: AI Interface Code](/ja-jp/stage-2/backend/2.3-ai-interface-code/)
- [Backend 4: Git Workflow](/ja-jp/stage-2/backend/2.4-git-workflow/extra1/extra1-what-is-git-and-what-is-github)
- [Backend 5: Zeabur Deployment](/ja-jp/stage-2/backend/2.5-zeabur-deployment/extra6/extra6-zeabur-what-is-it-and-how-to-deploy-web-applications)
- [Backend 6: Modern CLI Tools](/ja-jp/stage-2/backend/2.6-modern-cli/extra7/extra7-cli-ai-coding-tools-and-the-principles-of-test-driven-development)
- [Backend 7: Stripe Payment](/ja-jp/stage-2/backend/2.7-stripe-payment/)
-
-### Assignments
-Practical projects to apply your full-stack skills.
-
- [Assignment 1: Full-Stack App](/ja-jp/stage-2/assignments/2.1-fullstack-app/)
- [Assignment 2: Modern Frontend + Trae](/ja-jp/stage-2/assignments/2.2-modern-frontend-trae/)
-
-### AI Capabilities
-Integrate AI features like knowledge bases and multimodal APIs.
-
- [AI 1: Dify & Knowledge Base](/ja-jp/stage-2/ai-capabilities/2.1-dify-knowledge-base/chapter3/chapter3-getting-started-with-dify-and-its-knowledge-base-integration)
- [AI 2: Multimodal API](/ja-jp/stage-2/ai-capabilities/2.2-multimodal-api/extra3/extra3-ai-capability-starter-handbook)
@@ -0,0 +1,241 @@
+# フルスタック開発
+
+**フルスタック開発**ステージへようこそ！ここでは、フロントエンドのコンポーネント化、データベース設計、バックエンドAPI開発、デプロイメントをマスターし、フルスタック開発に深く掘り下げます。
+
+## 学べること
+
+### フロントエンド開発
+
+モダンなフロントエンド開発をマスターし、コンポーネントライブラリとデザインツールの使用方法を学ぶ：
+
+<NavGrid>
+
+</NavGrid>
+    <div class="card-desc">Lovartで素材を作成</div>
+  </div>
+</a>
+
+<a href="/ja-jp/stage-2/frontend/2.1-figma-mastergo/" class="card-link">
+  <div class="content-card">
+    <div class="card-header">
+      <span class="card-icon">🖼️</span>
+      <span class="card-title">フロントエンド1</span>
+    </div>
+    <div class="card-desc">FigmaとMasterGo入門</div>
+  </div>
+</a>
+
+<a href="/ja-jp/stage-2/frontend/2.2-ui-design/" class="card-link">
+  <div class="content-card">
+    <div class="card-header">
+      <span class="card-icon">✨</span>
+      <span class="card-title">フロントエンド2</span>
+    </div>
+    <div class="card-desc">初めてのモダンアプリ - UIデザイン</div>
+  </div>
+</a>
+
+<a href="/ja-jp/stage-2/frontend/2.3-multi-product-ui/" class="card-link">
+  <div class="content-card">
+    <div class="card-header">
+      <span class="card-icon">📐</span>
+      <span class="card-title">フロントエンド3</span>
+    </div>
+    <div class="card-desc">UIデザインガイドラインとマルチプロダクト</div>
+  </div>
+</a>
+
+<a href="/ja-jp/stage-2/frontend/2.4-hogwarts-portraits/chapter4-lets-build-hogwarts-portraits" class="card-link">
+  <div class="content-card">
+    <div class="card-header">
+      <span class="card-icon">🧙</span>
+      <span class="card-title">フロントエンド4</span>
+    </div>
+    <div class="card-desc">ホグワーツ肖像画を作ろう</div>
+  </div>
+</a>
+
+</div>
+
+### バックエンドとフルスタック
+
+API設計、データベース管理、アプリケーションデプロイメント戦略を学ぶ：
+
+<NavGrid>
+
+</NavGrid>
+    <div class="card-desc">APIとは</div>
+  </div>
+</a>
+
+<a href="/ja-jp/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase" class="card-link">
+  <div class="content-card">
+    <div class="card-header">
+      <span class="card-icon">🗄️</span>
+      <span class="card-title">バックエンド2</span>
+    </div>
+    <div class="card-desc">データベースからSupabaseへ</div>
+  </div>
+</a>
+
+<a href="/ja-jp/stage-2/backend/2.3-ai-interface-code/" class="card-link">
+  <div class="content-card">
+    <div class="card-header">
+      <span class="card-icon">🤖</span>
+      <span class="card-title">バックエンド3</span>
+    </div>
+    <div class="card-desc">AI支援インターフェースコードとドキュメント</div>
+  </div>
+</a>
+
+<a href="/ja-jp/stage-2/backend/2.4-git-workflow/extra1/extra1-what-is-git-and-what-is-github" class="card-link">
+  <div class="content-card">
+    <div class="card-header">
+      <span class="card-icon">🌿</span>
+      <span class="card-title">バックエンド4</span>
+    </div>
+    <div class="card-desc">Gitワークフロー</div>
+  </div>
+</a>
+
+<a href="/ja-jp/stage-2/backend/2.5-zeabur-deployment/extra6/extra6-zeabur-what-is-it-and-how-to-deploy-web-applications" class="card-link">
+  <div class="content-card">
+    <div class="card-header">
+      <span class="card-icon">🚀</span>
+      <span class="card-title">バックエンド5</span>
+    </div>
+    <div class="card-desc">Zeaburデプロイメント</div>
+  </div>
+</a>
+
+<a href="/ja-jp/stage-2/backend/2.6-modern-cli/extra7/extra7-cli-ai-coding-tools-and-the-principles-of-test-driven-development" class="card-link">
+  <div class="content-card">
+    <div class="card-header">
+      <span class="card-icon">💻</span>
+      <span class="card-title">バックエンド6</span>
+    </div>
+    <div class="card-desc">モダンCLI開発ツール</div>
+  </div>
+</a>
+
+<a href="/ja-jp/stage-2/backend/2.7-stripe-payment/" class="card-link">
+  <div class="content-card">
+    <div class="card-header">
+      <span class="card-icon">💳</span>
+      <span class="card-title">バックエンド7</span>
+    </div>
+    <div class="card-desc">Stripe決済システムの統合</div>
+  </div>
+</a>
+
+</div>
+
+### 課題
+
+実践プロジェクトを通じてフルスタック開発スキルを固める：
+
+<NavGrid>
+
+</NavGrid>
+    <div class="card-desc">初めてのモダンアプリ - フルスタック</div>
+  </div>
+</a>
+
+<a href="/ja-jp/stage-2/assignments/2.2-modern-frontend-trae/" class="card-link">
+  <div class="content-card">
+    <div class="card-header">
+      <span class="card-icon">🎯</span>
+      <span class="card-title">課題2</span>
+    </div>
+    <div class="card-desc">モダンフロントエンド + Trae</div>
+  </div>
+</a>
+
+</div>
+
+### AI機能拡張
+
+<NavGrid>
+
+</NavGrid>
+    <div class="card-desc">Dify入門とナレッジベース統合</div>
+  </div>
+</a>
+
+<a href="/ja-jp/stage-2/ai-capabilities/2.2-multimodal-api/extra3/extra3-ai-capability-starter-handbook" class="card-link">
+  <div class="content-card">
+    <div class="card-header">
+      <span class="card-icon">🎭</span>
+      <span class="card-title">AI 2</span>
+    </div>
+    <div class="card-desc">AI辞書クエリとマルチモーダルAPI</div>
+  </div>
+</a>
+
+</div>
+
+## 対象者
+
+- プログラミング基礎があり、体系的にフルスタック開発を学びたい開発者
+- プロダクトマネージャーからフルスタックエンジニアへ転向したい学習者
+- モダンな開発ツールとワークフローをマスターしたい初中級開発者
+- 完全なプロダクトを独立して開発したい起業家
+
+## 前提条件
+
+- 「初心者とプロトタイプ」ステージを完了している、または同等の基礎知識を持っている
+- 基本的なHTML/CSS/JavaScriptの概念を理解している
+- AIプログラミングツールについて予備的な知識を持っている
+
+フルスタック開発に深く掘り下げる準備はできましたか？左のナビゲーションをクリックして学習を始めましょう！
+
+<style>
+.content-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 16px;
+  margin: 20px 0;
+}
+
+.card-link {
+  text-decoration: none;
+  color: inherit;
+}
+
+.content-card {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  padding: 16px;
+  transition: all 0.3s ease;
+  background: var(--vp-c-bg-soft);
+}
+
+.content-card:hover {
+  border-color: var(--vp-c-brand);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.card-icon {
+  font-size: 20px;
+}
+
+.card-title {
+  font-weight: 600;
+  color: var(--vp-c-brand);
+  font-size: 14px;
+}
+
+.card-desc {
+  color: var(--vp-c-text-2);
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>
@@ -1,30 +0,0 @@
-# Advanced Development
-
-Build complex cross-platform applications. WeChat Mini-Program practice, challenge higher-level AI-native application development.
-
-## Stage Overview
-
-### Core Skills
-Advanced AI coding skills and long-running task management.
-
- [Advanced 1: MCP & ClaudeCode Skills](/ja-jp/stage-3/core-skills/3.1-mcp-claudecode-skills/)
- [Advanced 2: Long-running Tasks](/ja-jp/stage-3/core-skills/3.2-long-running-tasks/)
-
-### Cross-Platform Development
-Build apps for WeChat, Android, and iOS.
-
- [Advanced 3: WeChat Mini-Program](/ja-jp/stage-3/cross-platform/3.3-wechat-miniprogram/)
- [Advanced 4: WeChat Mini-Program (Backend)](/ja-jp/stage-3/cross-platform/3.4-wechat-miniprogram-backend/)
- [Advanced 5: Android App](/ja-jp/stage-3/cross-platform/3.5-android-app/)
- [Advanced 6: iOS App](/ja-jp/stage-3/cross-platform/3.6-ios-app/)
-
-### Personal Brand
-Build your personal website and blog.
-
- [Advanced 7: Personal Website & Blog](/ja-jp/stage-3/personal-brand/3.7-personal-website-blog/)
-
-### AI Advanced
-Deep dive into RAG and advanced agent workflows.
-
- [Advanced AI 1: What is RAG](/ja-jp/stage-3/ai-advanced/3.a1-rag-introduction/extra5-what-is-rag-and-how-does-it-work-and-future)
- [Advanced AI 2: Advanced RAG with LangGraph](/ja-jp/stage-3/ai-advanced/3.a2-langgraph-advanced-rag/)
@@ -0,0 +1,93 @@
+# 上級開発
+
+**上級開発**ステージへようこそ！ここでは、複雑なクロスプラットフォームアプリケーションを構築し、WeChatミニプログラム開発をマスターし、より高度なAIネイティブアプリケーション開発に挑戦します。
+
+## 学べること
+
+### 核心スキル
+
+MCPプロトコルとClaude Codeの高度なテクニックを深くマスターし、開発効率を向上させる：
+<NavGrid>
+  <NavCard
+    href="#"
+    title="上級1：MCPとClaudeCodeスキル"
+    description="Model Context Protocol (MCP)をマスターし、AIプログラミングツールの能力を拡張する"
+  />
+  <NavCard
+    href="#"
+    title="上級2：長時間実行タスク"
+    description="AIコーディングツールが長時間実行される複雑なタスクを処理する方法を学ぶ"
+  />
+</NavGrid>
+
+
+### クロスプラットフォーム開発
+
+WeChatミニプログラム、Android、iOSアプリケーションを構築し、クロスプラットフォームカバレッジを実現する：
+<NavGrid>
+  <NavCard
+    href="#"
+    title="上級3：WeChatミニプログラムの構築"
+    description="ゼロからWeChatミニプログラムを開発し、ミニプログラム開発の核心的ワークフローをマスターする"
+  />
+  <NavCard
+    href="#"
+    title="上級4：バックエンド付きWeChatミニプログラム"
+    description="バックエンドサポートを持つ完全なWeChatミニプログラムアプリケーションを構築する"
+  />
+  <NavCard
+    href="#"
+    title="上級5：Androidアプリの構築"
+    description="モダンなクロスプラットフォームフレームワークを使用してAndroidネイティブアプリケーションを構築する"
+  />
+  <NavCard
+    href="#"
+    title="上級6：iOSアプリの構築"
+    description="iOSアプリケーションを開発・公開し、iOSエコシステムの開発標準をマスターする"
+  />
+</NavGrid>
+
+
+### パーソナルブランド
+
+自分自身のパーソナルウェブサイトとテックブログを構築し、個人的な影響力を確立する：
+<NavGrid>
+  <NavCard
+    href="#"
+    title="上級7：パーソナルウェブサイトとアカデミックブログの構築"
+    description="モダンな技術スタックを使用して、高性能で視覚的に魅力的なパーソナルブログを構築する"
+  />
+</NavGrid>
+
+
+### 高度なAI機能
+
+RAGやLangGraphなどの高度なAI技術を探索し、複雑なAIアプリケーションワークフローを構築する：
+<NavGrid>
+  <NavCard
+    href="#"
+    title="高度なAI 1：RAGとは何か、どのように機能するか"
+    description="Retrieval-Augmented Generation (RAG)の原理とAIアプリケーションにおける価値を深く理解する"
+  />
+  <NavCard
+    href="#"
+    title="高度なAI 2：高度なRAGとワークフロー編成 - LangGraph"
+    description="LangGraphを使用して複雑なAIワークフローを編成し、高度なRAGシステムを構築する方法を学ぶ"
+  />
+</NavGrid>
+
+
+## 対象者
+
+- フルスタック開発経験があり、より複雑なアプリケーションに挑戦したい上級開発者
+- クロスプラットフォーム開発技術をマスターしたいエンジニア
+- AIネイティブアプリケーション開発を深く理解したい探索者
+- パーソナルテックブランドを構築したいテックブロガー
+
+## 前提条件
+
+- 「フルスタック開発」ステージを完了している、またはフルスタック開発経験を持っている
+- フロントエンドフレームワーク（React/Vueなど）とバックエンド開発に精通している
+- 基本的なAI概念とAPIの使用方法を理解している
+
+上級開発に挑戦する準備はできましたか？左のナビゲーションをクリックして学習を始めましょう！