VibeCodingスターターガイド

このドキュメントは、VibeCoding開発手法（>85% AI）を初めて使用するユーザー向けに推奨される技術スタックと構造を提供します。目標は、初期の選択を簡素化し、AIとの効果的な対話方法の学習に集中できるようにすることです。

スターター向けの推奨技術選択

開始にあたり、以下の技術スタックのいずれかを選択することをお勧めします。これらは明確な構造、良好な型付けサポートを持ち、AIによるコード生成に適しています。

1. バックエンド

あなたまたはプロジェクトに適した1つの言語とフレームワークを選択してください：

Node.js:
- NestJS (v11以降): TypeScriptベースの非常に厳密な構造。AIが既存のパターン（モジュール、コントローラー、サービス）を学習するのに理想的です。
- Honojs: ミニマル、高速。APIまたはEdge Functionsアプリケーション（例：Cloudflare Workers上）に非常に適しています。そのミニマリズムのため、優れたプロジェクト構造が必要です。
PHP:
- Laravel (v11以降) と PHP 8+ 強力な型付け: PHP 8+の強力な型付け機能（コントローラー、フォームリクエスト、サービス内）を使用して、AIがより正確なコードを生成できるようにします。
Python:
- FastAPI: Pythonの型ヒントに基づいてAPIドキュメントを自動生成します。要件: VibeCodingで最高の効率を得るために、型ヒントを一貫して使用します。

2. フロントエンド

好みやプロジェクト要件に基づいて1つのフレームワークを選択してください：

Nuxt 3 (Vue.jsベース): 明確な構造（pages, layouts, composables）。Vue.jsに慣れている場合に適しています。
Next.js (Reactベース): Nuxtと同様の構造（pagesまたはapp router）。Reactに慣れている場合に適しています。

注意: Nuxt 3とNext.jsの両方とも、VibeCodingを最適化するためにTypeScriptと共に使用する必要があります。

3. モバイル（必要な場合）

1つのフレームワークを選択してください：

Flutter (Dart): Dart言語は強力な型付けを持ち、宣言的なUIモデルはAIがウィジェットを生成しやすくします。
React Native (TypeScript使用): Reactの原則を使用します。要件: VibeCodingを効果的に行うには、TypeScriptの使用が必須です。

AIエージェントをサポートするIDEの選択

エージェントモードをサポートするIDEであれば、VibeCodingを実行できます。重要なのは、IDEの種類ごとにコンテキスト（ユーザールール、プロジェクトルール、ドキュメントなど）を設定する必要があることです。

開始にあたり推奨されるIDEは以下の通りです：

VSCode + AugmentCode: 14日間のトライアルを利用可能。インラインアシストと補完はまだ改善の余地がありますが、エージェントは非常に優れています。
Cursor: 開始に適した良い選択肢です。
Windsurf: 開始に適した良い選択肢です。

推奨されるディレクトリ構造：機能ベース (Feature-Based)

ファイルを技術的な種類（controllers、services）でグループ化する代わりに、機能またはビジネスドメインでグループ化します。ルートディレクトリ名を modules（または features、domains）とすることをお勧めします。

plaintext

src/
├── modules/  # または features, domains
│   │
│   ├── users/  # ユーザー管理モジュール
│   │   ├── user.controller.ts  # HTTPリクエストを処理するコントローラー
│   │   ├── user.service.ts     # ビジネスロジック
│   │   ├── user.entity.ts      # エンティティ/モデル定義
│   │   ├── user.dto.ts         # データ転送オブジェクト（リクエスト/レスポンス用）
│   │   ├── user.routes.ts      # （自動ルーティングを使用しないフレームワークの場合）
│   │   └── user.module.ts      # （NestJSまたは同様の構造の場合）
│   │
│   ├── products/ # 製品管理モジュール
│   │   ├── product.controller.ts
│   │   ├── product.service.ts
│   │   ├── product.entity.ts
│   │   └── ... （その他のファイル）
│   │
│   └── orders/   # 注文管理モジュール
│       └── ... （同様のファイル）
│
└── shared/     # 共有コンポーネント
    ├── config/
    ├── middleware/
    ├── utils/
    └── types/    # 共有型定義

利点: この構造は、特定の機能に取り組む際にAIに明確なコンテキストを提供し、より一貫性があり保守しやすいコードの生成に役立ちます。

覚えておくべき主要原則

型付けが最重要: 可能な限り常にTypeScriptまたは強力な型付け（PHP 8+、Python型ヒント、Dart）を使用してください。これはAIが効果的に機能するための最も重要な要素です。
明確なプロンプト: AIに詳細な指示とコンテキストを提供します。
慎重なレビュー: AIが生成したコードは常に再確認してください。AIはアシスタントであり、完全な代替ではありません。

効果的なVibeCoding体験をお楽しみください！

VibeCodingスターターガイド ​

スターター向けの推奨技術選択 ​

1. バックエンド ​

2. フロントエンド ​

3. モバイル（必要な場合） ​

AIエージェントをサポートするIDEの選択 ​

推奨されるディレクトリ構造：機能ベース (Feature-Based) ​

覚えておくべき主要原則 ​