delorex/test-repo
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add comprehensive backend topics and fix build issues

Browse Source 
## 新增内容

### 附录文档扩展
- 扩展前端项目架构文档 (frontend-project-architecture.md)
- 扩展后端项目架构文档 (backend-project-architecture.md)
- 扩展数据治理文档 (data-governance.md)
- 扩展数据可视化文档 (data-visualization.md)
- 扩展分布式系统文档 (distributed-systems.md)
- 扩展高可用文档 (high-availability.md)
- 扩展单体到微服务文档 (monolith-to-microservices.md)
- 扩展系统设计方法论文档 (system-design-methodology.md)
- 扩展 Docker 容器文档 (docker-containers.md)
- 扩展 Kubernetes 文档 (kubernetes.md)
- 扩展 Linux 基础文档 (linux-basics.md)
- 扩展神经网络文档 (neural-networks.md)

### 新增交互式组件
- 数据治理组件: DataQualityDemo, DataGovernanceFrameworkDemo, DataLineageDemo
- 数据可视化组件: ChartTypeSelectorDemo, DashboardLayoutDemo
- 分布式系统组件: CAPTheoremDemo, ConsistencyModelsDemo, DistributedChallengesDemo
- 高可用组件: AvailabilityCalculatorDemo, FailoverStrategyDemo
- 系统设计组件: SystemDesignStepsDemo, CapacityEstimationDemo
- Docker 容器组件: DockerArchitectureDemo, DockerLifecycleDemo
- Kubernetes 组件: K8sArchitectureDemo, K8sWorkloadsDemo
- Linux 基础组件: LinuxFileSystemDemo, LinuxCommandDemo, LinuxPermissionsDemo
- 神经网络组件: NeuronDemo, NetworkLayersDemo, NetworkArchitectureDemo
- 单体到微服务组件: ArchEvolutionDemo
- 项目架构组件: ProjectArchitectureComparisonDemo
- 附录导航组件: AppendixFlowMap

### 英文版重构
- 将 en-us 目录重命名为 en
- 更新相关配置和组件中的语言代码

## Bug 修复
- 修复 index.js 中重复的组件导入语句导致的 build 失败
- 恢复被注释的 InvertedIndexDemo 和 SearchRelevanceDemo 导入
- 修复 HomeFeatures.vue 中 en-us 与 config.mjs 中 en 不一致导致的语言切换问题

## 其他改进
- 添加构建脚本 (scripts/build.mjs)
- 更新依赖版本
This commit is contained in:
sanbuphy
2026-02-26 04:35:28 +08:00
parent df51f84ab5
commit ef70b1d8e1
84 changed files with 12917 additions and 3477 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs-readme/ja-JP/README.md
+289 -108
View File
@@ -4,17 +4,15 @@
<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 製品を構築_
# Easy-Vibe : 0から1で学ぶVibe Coding
<p align="center">
📌 <a href="https://datawhalechina.github.io/easy-vibe/">オンラインで読み始める (Start Reading Online)</a>
📌 <a href="https://datawhalechina.github.io/easy-vibe/">オンラインで読む (Read Online)</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/prompt-engineering/">インタラクティブチュートリアル</a>
</p>
<p align="center">
@@ -36,164 +34,347 @@
<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="../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 でコードを書こうとしてエラーが続き、諦めかけたくなり、プログラムを本当にオンラインにする方法がわからないとき 😢
AIアシスタントがいても、「コードが読めない」「環境構築ができない」と諦めてしまう人が多くいます。**Easy-Vibeはそのために生まれました。** 全員がゼロベースであることを前提に、最初の一行のコードから、前後端のロジックの理解、そして最終的な製品のリリースまで、手取り足取りガイドします。
本チュートリアルは、0 から 1 まで、Vibe Coding のスキルを段階的に習得できるように設計されています：
- **対象者**: 初心者、プロダクトマネージャー、フロントエンド/バックエンド/フルスタックエンジニア
- **テーマ**: AIプログラミング、フルスタックWebアプリ開発、AI Agent、ワークフロー、RAGシステム
- **第 1 段階**：**ミニゲームからWeb プロトタイプまで**、AI プログラミングの基礎とプロダクト思考を習得
- **第 2 段階**：**フロントエンド・バックエンド開発と AI 能力**に関連する Vibe Coding テクニックの学習、完全なアプリケーションの完成
- **第 3 段階**：**マルチプラットフォーム複雑アプリケーション**の構築手法を習得、本番級アプリケーションへ
---
私たちは、Vibe Coding を習得し体系的なトレーニングを組み合わせることで、一人でフロントエンド開発、バックエンド開発、AI 能力統合、プロダクトデザインを兼ね備えた開発者になれると信じています。
Easy-Vibeは以下の段階を経て、あなたを0から1へと導きます：
> **本プロジェクトは主に 3 種類の学習者を対象としています：**
>
> - **初心者（一般人 / プロダクト・運用担当者）**：非技術系初心者が重要な概念を理解し、最初のプロダクトプロトタイプを完成させるのを支援
> - **初中級開発者（一定の基礎がある学生と開発者）**：フロントエンド・バックエンドの Vibe Coding と AI 能力の知識を習得
> - **上級開発者（企業・スタートアップ、オープンソース・独立開発者）**：高度な開発技術、マルチプラットフォーム開発
| ステージ | コアスキル | 成果物 |
| ------------ | -------------------------------- | ----------------------------------------- |
| **第一段階** | AIプログラミング入門、プロダクト思考、プロトタイプ設計 | インタラクティブゲーム、Webアプリのプロトタイプ (初心者 & PM) |
| **第二段階** | フルスタック開発、AI統合、データベース | 完全なフルスタックAIアプリケーション |
| **第三段階** | Claude Code活用、ミニプログラム・Android開発 | 本番級のマルチプラットフォームアプリケーション |
| **付録** | コンピュータとAIの基礎概念の理解を支援 | 9大知識領域、80以上のインタラクティブ特集 |
## 🔥 News
- **[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="100%" style="border-radius: 10px; box-shadow: 0 8px 20px rgba(45,55,72,0.3); margin: 15px 0;"/>
<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>
### 総付録
### 📚 付録知識ベース
[AI 能力辞書：一般的な AI コア概念と用語、シーンの解釈](docs/zh-cn/appendix/ai-capability-dictionary.md)
> **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 プログラミングの能力を初めて体験 | ✅ |
| [初級二：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) | 実際のシーンをシミュレート、ユーザーフィードバックを受け反復改良、プロジェクトを完全に | ✅ |
| [大課題：完全な Web アプリケーションプロトタイプを作成し展示](docs/zh-cn/stage-1/1.5-final-project/index.md) | アプリケーションを完全に実装し、アプリケーション効果を展示 | ✅ |
### 一、ゼロからの入門
| 章 | 主要な内容 | 状態 |
| :----------------------------------------------------------------------------------------------- | :------------------------------------------------ | :--- |
| [前書き：学習マップ](../../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 業界アプリケーションシナリオ参考 (B2B)](docs/zh-cn/stage-1/appendix-industry-scenarios/index.md) | さまざまな業界での AI 応用事例を理解する | ✅ |
| [付録 C：AI 消費シナリオインスピレーション参考 (B2C)](docs/zh-cn/stage-1/appendix-c-consumer-scenarios/index.md) | 消費者向け製品での AI 応用事例を探索する | ✅ |
| 章 | 主要な内容 | 状態 |
| :----------------------------------------------------------------------------------------- | :----------------------------------------- | :--- |
| [付録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：7 つの AI プログラミングツール比較](docs/zh-cn/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md) | 主流の AI プログラミングプラットフォームの比較テスト | ✅ |
| [付録 F：デザインとプログラミングエージェントでウェブサイトを設計](docs/zh-cn/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.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>
#### フロントエンド部分
#### フロントエンド
| 章 | 主要内容 | 状態 |
| :------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------- | :--- |
| [フロントエンド零：lovart を使用して素材を生成](docs/zh-cn/stage-2/frontend/2.0-lovart-assets/) | lovart を使ってキャラクター、シーンなどの視覚素材を一括生成し、UI デザインとフロントエンド開発に素材基盤を提供 | 🚧 |
| [フロントエンド一：Figma と MasterGo 入門](docs/zh-cn/stage-2/frontend/2.1-figma-mastergo/) | デザインツールを使って情報アーキテクチャとページ構造を整理し、フロントエンド実装の基礎を築く | 🚧 |
| [フロントエンド二：最初のモダンアプリケーションを構築 - UI デザイン](docs/zh-cn/stage-2/frontend/2.2-ui-design/) | デザイン画に基づいてコンポーネント化インターフェースを完成させ、デザインからコードへの最初のパスを実現 | 🚧 |
| [フロントエンド三：UI デザイン仕様とマルチプロダクト UI デザインを参照](docs/zh-cn/stage-2/frontend/2.3-multi-product-ui/) | 統一されたメインビジュアルを中心にマルチプロダクトインターフェースを拡張し、体系的デザイン能力を練習 | 🚧 |
| [フロントエンド四：一緒にハリー・ポッターの肖像画を作ろう](docs/zh-cn/stage-2/frontend/2.4-hogwarts-portraits/chapter4-lets-build-hogwarts-portraits.md) | 0 から 1 まで AI 能力を統合したフロントエンドアプリケーションを作成し、デザインと開発を接続 | ✅ |
| 章 | 主要な内容 | 状態 |
| :------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------- | :--- |
| [フロントエンド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能力を組み込んだフロントエンドアプリをゼロから作成 | ✅ |
#### バックエンドとフルスタック部分
#### バックエンドとフルスタック
| 章 | 主要内容 | 状態 |
| :-------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------- | :--- |
| [バックエンド一：API とは](docs/zh-cn/stage-2/backend/2.1-what-is-api/extra2/extra2-what-is-api.md) | HTTP インターフェースとリクエスト・レスポンスモデルを理解し、バックエンド統合と連携調整の準備 | ✅ |
| [バックエンド二：データベースから Supabase へ](docs/zh-cn/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase.md) | Supabase 上でデータベースと API を実装し、データモデルとフロントエンドページを接続 | ✅ |
| [バックエンド三：大規模言語モデル支援によるインターフェースコードとドキュメント作成](docs/zh-cn/stage-2/backend/2.3-ai-interface-code/) | 大規模言語モデルを使ってインターフェースとデータベースのドキュメントおよびコードの生成を支援し、読みやすくテスト可能なバックエンドを実現 | 🚧 |
| [バックエンド四：Git ワークフロー](docs/zh-cn/stage-2/backend/2.4-git-workflow/extra1/extra1-what-is-git-and-what-is-github.md) | Git ワークフローでコードを管理し、バージョン管理とコラボレーションを行う | ✅ |
| [バックエンド五：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 にデプロイしてオンライン化 | ✅ |
| [バックエンド六：モダン 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 系 AI プログラミングツールを使用して開発とデバッグを加速し、個人のエンジニアリングワークフローを形成 | ✅ |
| [バックエンド七：Stripe などの課金システムの統合方法](docs/zh-cn/stage-2/backend/2.7-stripe-payment/) | 決済システムを接続し、課金パスと基本決済フローを完成 | 🚧 |
| [大課題 1：最初のモダンアプリケーションを構築 - フルスタックアプリ](docs/zh-cn/stage-2/assignments/2.1-fullstack-app/) | フロントエンド、バックエンド、決済モジュールを統合し、オンライン可能なフルスタック Web アプリケーションを完成 | 🚧 |
| [大課題 2：モダンフロントエンドコンポーネントライブラリ + Trae 実戦](docs/zh-cn/stage-2/assignments/2.2-modern-frontend-trae/) | モダンフロントエンドコンポーネントライブラリと Trae を使用し、ログイン・登録可能で課金対応のプロダクトを独立完成 | 🚧 |
| 章 | 主要な内容 | 状態 |
| :-------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------ | :--- |
| [バックエンド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能力付録
| 章 | 主要内容 | 状態 |
| :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------- | :--- |
| [ 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 を検索する方法を学び、テキスト、画像などのマルチモーダル能力をプロダクトに統合 | 🚧 |
| 章 | 主要な内容 | 状態 |
| :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------- | :--- |
| [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>
| 章 | 主要内容 | 状態 |
| :---------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------- | :--- |
| [上級一：MCP と Claude Code Skills](docs/zh-cn/stage-3/core-skills/3.1-mcp-claude-code-skills/) | MCP と Skills を通じて IDE 能力を拡張し、外部サービスをツールとして接続 | 🚧 |
| [上級二：Coding Tools を長時間動作させる方法](docs/zh-cn/stage-3/core-skills/3.2-long-running-tasks/) | 長時間動作するタスクを設計・設定し、Coding Tools をより安定して信頼性の高いものに | 🚧 |
| [上級三：マルチプラットフォーム開発：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 などのツールを使用し、Web/ネイティブ一体化の Android アプリ開発を完成 | 🚧 |
| [上級六：マルチプラットフォーム開発：iOS アプリの構築方法](docs/zh-cn/stage-3/cross-platform/3.6-ios-app/) | Expo などのツールを使用し、Web/ネイティブ一体化の iOS アプリ開発を完成 | 🚧 |
| [上級七：自分専用の個人ウェブページと学術ブログの構築方法](docs/zh-cn/stage-3/personal-brand/3.7-personal-website-blog/) | 選定、構築からデプロイまで、個人プロジェクトと学術成果を展示する長期的なオンラインホームページを構築 | 🚧 |
<details>
<summary><strong>三、上級エンジニア</strong></summary>
#### AI 能力付録
| 章 | 主要な内容 | 状態 |
| :------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------- | :--- |
| [上級一：MCPとClaude Code Skills](../../docs/zh-cn/stage-3/core-skills/3.1-mcp-claude-code-skills/) | MCPとSkillsによるIDE能力の拡張 | 🚧 |
| [上級二：Coding Toolsを長時間稼働させる方法](../../docs/zh-cn/stage-3/core-skills/3.2-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アプリ開発 | ✅ |
| [上級七：自分だけの個人ページと学術ブログの構築](../../docs/zh-cn/stage-3/personal-brand/3.7-personal-website-blog/) | 技術選定から構築、デプロイまでを網羅 | 🚧 |
| 章 | 主要内容 | 状態 |
| :------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------- | :--- |
| [上級 AI 一：RAG とは、それがどのように動作するか](docs/zh-cn/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/zh-cn/stage-3/ai-advanced/3.a2-langgraph-advanced-rag/) | LangGraph などのツールを使用してマルチステップワークフローと中上級 RAG システムを設計 | 🚧 |
#### AI能力付録
| 章 | 主要な内容 | 状態 |
| :-------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------ | :--- |
| [上級AI一：RAGとは何か、どのように動作するか](../../docs/zh-cn/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/zh-cn/stage-3/ai-advanced/3.a2-langgraph-advanced-rag/) | LangGraphを使用した複雑なワークフローと高度なRAGの設計 | 🚧 |
</details>
## 🛠️ 学習方法
- 個人の能力に応じて、関連する章を選択的に読み实践し、問題があれば Issue で質問してください。
- 自身のレベルに合わせて章を選択して学習し、実践してください。疑問点があればIssueで質問してください。
## 💻 本课件をローカルで起動
## 💻 ローカルでの起動方法
### モダン手法
### 現代的な方法
AI IDE ダイアログボックス（vscode、cursor、trae など）で、以下のプロンプトを入力して本课件を起動：
AI IDEの対話ボックス（VS Code, Cursor, Traeなど）で以下のプロンプトを入力してください：
```
このプロジェクトのローカルサービスを実行してください
このプロジェクトのローカルサービスを起動してください。
```
### 旧手法
### 従来の方法
1. npm install
2. npm run dev
3. ブラウザを開いて `http://localhost:3000` にアクセスして確認。
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)に従って操作してください~
- 問題を見つけた場合や、改善案がある場合は、Issueでフィードバックをお願いします。
- 貢献を希望される場合は、Pull Requestを送信してください。
- 新しいプロジェクトの立ち上げに興味がある場合は、Datawhaleオープンソースプロジェクトガイドに従ってください。
## 🙏 すべての貢献者に感謝
## 🙏 貢献者への感謝
- [散步-プロジェクト責任者](https://github.com/sanbuphy) (Datawhale メンバー)
- 方可-指導教官（Datawhale メンバー、清華大学）
- [Yerim Kang](https://github.com/yerim25)（实践项目部分-清華大学）
- 赵芷霖（実践プロジェクト部分-清華大学）
- [李亦萱](https://yixuan20.github.io/)（ページ美術デザイン-清華大学）
- AI Vibe Coding 101 ベータテストグループでアドバイスと体験を提供してくれたすべての仲間たち
- [散歩-プロジェクトリーダー](https://github.com/sanbuphy) (Datawhaleメンバー)
- 方可-アドバイザー (Datawhaleメンバー, 清華大学)
- [Yerim Kang](https://github.com/yerim25) (実践プロジェクト部分-清華大学)
- 趙芷霖 (実践プロジェクト部分-清華大学)
- [李亦萱](https://yixuan20.github.io/) (ページデザイン-清華大学)
- その他、suggestionをくださったすべてのベータテスターの皆様に感謝します。
### 特別な感謝
- [@Sm1les](https://github.com/Sm1les) さんの本プロジェクトへの支援と支持に感謝
- 本プロジェクトに貢献してくれたすべての開発者に感謝 ❤️
- [@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">
@@ -204,10 +385,10 @@ AI IDE ダイアログボックス（vscode、cursor、trae など）で、以
## <span id="contact">📧 お問い合わせ</span>
<div align=center>
<p>ご質問、ご提案、不満、または交流をご希望の場合は、以下の QR コードをスキャンしてください</p>
<img src="../assets/wechat.png" width="280">
<p>質問、提案、交流をご希望の方は、以下のQRコードをスキャンしてください</p>
<img src="../../assets/wechat.png" width="280">
<p>以下の QR コードをスキャンして公式アカウントをフォローしてください：Datawhale</p>
<p>公式アカウントをフォロー：Datawhale</p>
<img src="https://raw.githubusercontent.com/datawhalechina/pumpkin-book/master/res/qrcode.jpeg" width="180" height="180">
</div>
@@ -216,7 +397,7 @@ AI IDE ダイアログボックス（vscode、cursor、trae など）で、以
<div align="center">
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
<img
alt="クリエイティブ・コモンズ・ライセンス"
alt="知識共有ライセンス"
style="border-width:0"
src="https://img.shields.io/badge/license-CC%20BY--NC--SA%204.0-lightgrey"
/>
@@ -224,7 +405,7 @@ AI IDE ダイアログボックス（vscode、cursor、trae など）で、以
<br />
本作品は
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
クリエイティブ・コモンズ 表示 - 非営利 - 継承 4.0 国際ライセンス
クリエイティブ・コモンズ 表示 - 非営利 - 継承 4.0 国際 ライセンス
</a>
の下でライセンスされています。
</div>