Beyond Vibe Coding

第7章 AIでWebアプリケーションを構築する AIでウェブアプリケーションを構築する

この作品はAIを使って翻訳されている。ご意見、ご感想をお待ちしている：[e-mail]

この章では、素早くプロトタイピングを行うことから、AIの支援を利用した完全なウェブアプリケーションの開発に焦点を移す。ウェブ・アプリケーションには通常、フロントエンド（React、Angular、Vueなどのフレームワークで書かれることが多い）、バックエンド（API、データベース、サーバ）、そしてすべてをつなぐグルーが含まれる。 Vibeコーディングは、これらの各レイヤーを高速化することができる。

AIペア・プログラマと一緒に、 、ウェブ・アプリケーションを構築するためのエンド・ツー・エンドのワークフローを紹介しよう：

• プロジェクトとその足場のセットアップ

• フロントエンドUIのコーディング

• バックエンドロジックの実装

• データベースとの統合

• スタック全体のテストと検証

その過程で、フロントエンド向けのAI開発パターン（例えば、AIに説明からReactやVueの構成要素を生成させる）とバックエンド向けのAI開発パターン（自然言語プロンプトを通じてルート、ビジネスロジック、データベースクエリを記述する）を紹介する。また、フルスタックのプロジェクトで人間とAIのコラボレーションを最適化し、それぞれが最も得意とする仕事に貢献できるようにする方法も取り上げる。この章が終わるころには、AIを単独のコーディングタスクに使うだけでなく、ウェブ開発のワークフロー全体を効率的かつ効果的に管理するための、明確なロードマップを手にしているはずだ。

プロジェクトをセットアップする：AIによる足場作り

すべてのウェブアプリケーションは、ビルドツールの初期化、ファイル構造、依存関係などの足場から始まる。AIは、多くのボイラープレートの作成を自動化することができる。最近のWebフレームワークには、ベースプロジェクトを生成できるコマンドラインインタフェース（CLI）ツールが付属していることが多いが、それでも特定のものを設定したり、追加のライブラリを統合したりする必要があるかもしれない。AIアシスタントは、これらのCLIツールを使ってガイドしたり、オンデマンドでカスタムプロジェクト構造をセットアップすることで、あなたを助けることができる。

例えば、フロントエンド向けのReactとバックエンド向けのExpressを使用して、新しいアプリケーションプロジェクトを開始したいとする。このタスクのAI以前のワークフローは、おそらく次のようなものだろう：

1. CLIツールまたはViteを実行し、Reactプロジェクトをセットアップする。

2. Expressアプリを初期化する（おそらくnpm init 、Expressをインストールする）。

3. 開発向けのプロキシをセットアップするか、Cross-Origin Resource Sharing（CORS）を設定して、ReactフロントエンドがExpressバックエンドと会話できるようにする。

4. MongoDBのようなデータベースを統合するか、シンプルな使い方のためにSQLiteファイルをセットアップする。

CursorやClineのようなAIコーディング環境を使えば、希望するセットアップを一度に記述することができる：

Reactフロントエンド（Viteを使用）とExpressバックエンドで新しいプロジェクトを立ち上げる。バックエンドはToDoリストのREST ...