Prisma MCPとNext.jsでEコマースアプリを「バイブコーディング」

Prisma MCPサーバーのリリースに伴い、その実世界での実用的な使用例を紹介したいと考えました。これを実証するため、Prisma ORM、Prisma Postgres、Next.jsを使用してEコマースアプリケーションを構築することに着手しました。すべてを手動でコーディングする代わりに、「バイブコーディング」を採用し、AIが私たちのプロンプトに基づいて機能を迅速に実装できるようにしました。

思考プロセス、実装、そして途中で遭遇したエラーを含む、完全な道のりをご紹介します。

注: これはVS Code CopilotとClaude 3.5 Sonnetを使用して行われました。

AIプロンプトのヒント（概要）

これらのプロンプト戦略は、アーキテクチャの制御を失うことなく、より迅速に作業を進めるのに役立ちました。

• 構造化された仕様主導の出力を得るために、AIの役割を明確に設定します。
• 互換性のないツールやパターンを避けるため、スタックを早めに伝えます。
• 混乱やエラーを減らすために、各プロンプトを1つの機能に集中させます。
• 現実的なシードデータを使用して、レイアウトやフィルタリングのバグを早期に発見します。
• エラーをフィードバックとして扱いましょう。エラーを貼り付けることで、多くの場合迅速な修正につながります。
• サーバーコード内でクライアントフックを呼び出すなどの問題を避けるため、ランタイムの境界を明確にします。

ソフトウェアアーキテクトのようにAIにプロンプトを与える

まず、AIを適切な思考状態にしました。プロジェクトの慣例に従い、適切なアーキテクチャの選択をするよう確実にするため、AIにソフトウェアアーキテクトの役割を担わせ、明確な実装ガイドラインに従うよう求めました。

私たちのプロンプト

あなたはソフトウェアアーキテクトです。あなたのタスクは、エンジニアが実装するための明確で正確な仕様を提供することです。

機能の説明と技術スタックを受け取ります。各機能について、構造化された技術仕様のみで応答し、まだコードは含めないでください。論理的に細分化し、各仕様を約200語に制限してください。将来のアイデアや理論的なアイデアは避け、今必要なことだけを記述してください。

機能と技術スタックが開始されるまで待機してください。*

🧠 ヒント: 最初にAIの役割（例：「ソフトウェアアーキテクト」）を定義してください。これにより、モデルは乱雑なコードや一般的なコードにすぐに飛びつくのではなく、構造化された実装に焦点を当てた応答を出力するようになります。

追加プロンプト

技術スタック

• フレームワーク: Next.js 15（App RouterおよびTypeScript使用）
• スタイリング: TailwindCSS
• データベースORM: Prisma ORM（Prisma MCPサーバーを使用してスキーマ定義およびデータベース生成）
• UIのクライアント/サーバー区別: コンポーネントがいつ"use client"または"use server"を使用する必要があるかを指定します。
• 画像: Next.js Imageコンポーネントを使用—必要に応じてnext.config.jsにドメインを設定。

🧠 ヒント: プロンプトに技術スタックを早い段階で含めましょう。これにより、推測を減らし、AIが互換性のないツールやパターンを提案するのを防ぎます。

AIの応答

以下のモダンなスタックを使用してプロジェクトの技術仕様を設定したいと理解しました。

1. Next.js 15（App Router、TypeScript使用）
2. スタイリングにはTailwindCSS
3. データベース管理にはPrisma ORM（MCPサーバー使用）
4. 適切なクライアント/サーバーコンポーネントの区別
5. Next.jsに最適化された画像処理

機能の仕様を提供する前に、まず適切なプロジェクト構造が設定されていることを確認したいと思います...

そこから、AIは私たちのスタックと開発フローにうまく合致した構造化された実装計画で応答しました。

プロジェクトを足場立てるためのNext.jsとPrisma ORMのセットアップ

スタックとコンテキストが整ったところで、ホームページの構築とデータベーススキーマのセットアップに移る準備ができました。まず、ホームページの機能の説明をAIにプロンプトとして与えることから始めました。

私たちのプロンプト

機能: ホームページ

以下の要素を備えたシンプルなEコマースのホームページ

• 背景画像とCTAボタン付きの全幅ヒーローセクション
• サーバーコンポーネントを介してデータベースから取得される、注目の商品グリッド（最大6点）
• 各商品は画像、名前、価格を表示すること
• すべての画像にNext.js Imageコンポーネントを使用すること
• 外部画像ソースを使用する場合は、必要なドメインをnext.config.jsに追加すること
• CTAボタンは/shopルートにリンクすること

🧠 ヒント: 一度に1つの機能にプロンプトを与えましょう。AIが一度に複数の責任を処理しなくて済むため、より明確なロジックと少ない誤出力を実現できます。

AIの応答

ホームページ機能の技術仕様を作成します。まず、必要な設定でNext.jsプロジェクトをセットアップしましょう。

そこから、AIは2つのコマンドを実行してワークスペースを足場立てました。

• create-next-app@latest .: 現在のディレクトリに新しいNext.jsアプリを作成します。いくつかのフラグを使用してツールオプションを自動選択します。
• prisma init --output: カスタム出力パスでPrisma ORMを初期化します。

その後、Prismaを追加しました。

Prismaを初期化した後、Prisma MCPサーバーにデータベースを作成するよう促しました。作成されると、データベースに接続し、それで完了です！

この時点で、プロジェクトの基盤が整いました。Next.jsプロジェクト、Prismaのセットアップ、そして動作するPrisma Postgresデータベースがありました。すべて数秒のうちに完了しました。

prisma.schemaでのカテゴリと製品のセットアップ

Prisma ORMが初期化され、MCP管理のデータベースに接続されると、AIはストアのデータをモデル化するためのスキーマを生成しました。

私たちはAIに、データベースの2つの主要なモデル、CategoryとProductを定義するよう依頼しました。各製品はカテゴリに一対多の関係で属します。これは、シンプルで宣言的であり、AIが正確に生成しやすいPrismaのスキーマ言語（PSL）のおかげでスムーズに機能しました。

完全なスキーマはこちら

これにより、クエリが簡単で、私たちが望む種類の分類に理想的な、シンプルでリレーショナルな構造が得られました。

AIにデータベースをシードさせる

スキーマが整ったものの、データベースはまだ空でした。テストデータが必要だったため、AIにシード処理を依頼しました。

私たちのプロンプト

UIのテストを開始できるように、いくつかのカテゴリと製品のシードデータを生成してもらえますか？

🧠 ヒント: シードするときは現実世界のデータを使用しましょう。これにより、レイアウトやエッジケースのバグを早期に発見し、UIが本番環境により近い振る舞いをするようになります。

AIの応答

承知いたしました。まずカテゴリを作成し、次に適切なカテゴリ関係を持つ製品を作成するseed.tsスクリプトを作成します。また、簡単に実行できるように、package.jsonにシードコマンドを追加します。

生成されたスクリプトはクリーンで構造化されていました。まずProductおよびCategoryテーブルの現在のレコードを削除し、次にそれらを定義し、新しいレコードを作成します。

その後、package.jsonに以下を追加しました。

そして、私たちのためにコマンドを実行しました。

AIの確認

シード処理が完了しました。Prisma Studioを開いてデータを表示できます。

案の定、npx prisma studioを実行してPrisma Studioを開くと、すべて準備が整っていました。

Prisma ORMでフィルタリング可能なショップページを構築する

シードデータが整った後、/shopページの構築に移りました。私たちの目標は、ユーザーがカテゴリで製品をフィルタリングし、結果をクリーンなグリッドレイアウトで表示できるようにすることでした。

私たちのプロンプト

デフォルトですべての製品を一覧表示し、検索パラメータを介したカテゴリによるフィルタリングもサポートする/shopページを作成したいと考えています。

• Prismaを使用してカテゴリと製品を取得する
• サーバーコンポーネントを使用する
• カテゴリフィルターコンポーネントと製品グリッドを含める
• searchParams.categoryを介してフィルタリングを処理する

AIの応答

承知いたしました。カテゴリのリストを取得し、searchParamsを使用してオプションで製品をフィルタリングします。その後、結果をprops経由でCategoryFilterおよびProductGridコンポーネントに渡します。searchParamsは動的であるため、この関数がasyncであることを確認してください。

AIが生成したコードの重要な部分はこちらです。これがショップページの核となる機能を動かしています。

• フィルターUI用のすべてのカテゴリを取得する
• searchParamsを介してカテゴリでオプションでフィルタリングされた製品を取得する
• 余分なクエリを避けるために各製品のカテゴリを含める

フェッチ後、クライアントで使用するために製品をシリアライズし、よりスムーズなUXのためにサスペンス境界を使用してすべてをレンダリングしました。コンポーネントの読み込み中にローディングプレースホルダーを表示することで、レイアウトのずれを防ぎ、即座に視覚的なフィードバックを与えました。

最終的なUIは、上部にフィルターバー、下部に製品グリッドを含みます。

永続的なカート機能のためのReact Context

ショップページが整ったところで、永続的なカートシステムが必要になりました。シンプルでセッション安全なもので、認証やバックエンドセッションを使用していなかったため、ページ再読み込み間でカートデータを保持するにはlocalStorageが明白な選択肢でした。

認証やバックエンドセッションを使用していなかったため、localStorageはページ再読み込み全体でカートを永続化する簡単な方法を提供しました。

私たちのプロンプト

React Contextを使用して完全なカートをセットアップできますか？

• 追加、削除、数量更新をサポート
• localStorageに永続化
• ヘッダーにアイテム数を表示

AIの応答

状態を管理し、localStorageに同期し、合計アイテム数を計算するためのヘルパーを備えたCartContextを作成します。これは、"use client"を使用して完全にクライアント側で動作します。

最終的なセットアップの概要はこちらです

これにより、共有状態、永続的なカートデータ、そしてAIが使用できるアプリ内のどこからでもuseCart()フックを介して簡単にアクセスできるなど、必要なものがすべて揃いました。

途中で発生したエラーへの対処

プロセスを通じていくつかの問題に遭遇しましたが、関連するエラーメッセージを提供すると、AIによってそれぞれが迅速に解決されました。

AIが機能全体を生成する場合、これはかなり典型的です。最初の段階では、人間ならすぐに気づくような小さくても重要な詳細を見落とすことがよくあります。しかし、修正は通常、プロンプト一つで済みました。

🧠 ヒント: エラーをフィードバックとして扱い、プロンプトを洗練させましょう。スタックトレースや予期せぬ動作をAIにフィードバックすることで、AIは修正し、最小限の労力で出力を向上させることができます。

無効な画像URLの解決

初期のシード後、いくつかの製品画像がaltテキストにフォールバックしていることに気づきました。エラーを捕捉し、AIに引き継ぎました。

私たちのプロンプト

エラーが発生しているようです。エラーメッセージはこちらです。

AIの応答

提供された画像URLが存在しないようです。修正されたURLはこちらです。

seed.tsファイルをこのURLで更新し、再実行してください。

これにより問題はすぐに修正され、すべての画像が正しく表示されるようになりました。

クライアント/サーバーコンポーネントのエラー

カート機能を構築する際に、クライアント/サーバーコンポーネントのエラーに遭遇しました。再び、AIに問題を診断させました。

私たちのプロンプト

エラーが発生しているようです。エラーメッセージはこちらです。

🧠 ヒント: プロンプトでランタイムの境界を明確にしましょう。AIが間違ったコンテキストにロジックを配置すると、"use client"のような詳細が欠けているためにuseCart is not a functionのようなエラーが発生する可能性があります。

AIの応答

このエラーは、useCartがサーバーコンポーネントから呼び出されているために発生します。これを修正するには、コンポーネントファイルの最上部に以下を追加して、コンポーネントを明示的にクライアントコンポーネントとしてマークしてください。

（コンポーネントファイルの）一番上に。

この簡単な修正を適用すると、問題はすぐに解決し、カートは完全に機能するようになりました。

Next.js searchParamsエラー

/shopページに動的ルートを実装する際に、searchParamsで問題が発生しました。今回も、AIにガイダンスを求めました。

私たちのプロンプト

エラーが発生しているようです。エラーメッセージはこちらです。

AIの応答

問題は、Next.jsがsearchParamsを非同期で処理することを期待していることです。ルートが非同期関数であることを確認し、パラメータにアクセスする前に明示的にawaitしてください。例えば、

この迅速な調整により問題は解決し、動的ルート機能が回復しました。

まとめ

このプロジェクトは、Prisma MCPとAI主導の開発で実際のアプリを構築することがどのようなものかを探る実用的な深掘りでした。

Prisma MCPサーバーのおかげで、数秒で完全なデータベースを定義できました。これは非常にシンプルな体験であり、データベースの問題ではなく、アプリ自体について考える時間を増やすことができました。

AIとのバイブコーディングは完璧ではありませんでした。ほとんどの作業を迅速に進めることはできましたが、小さくても重要な詳細を見落とすことがよくありました。しかし、エラーに遭遇して指摘すると、修正は迅速に行われました。

全体として、このワークフローにより、Eコマースアプリの核となる部分の構築が効率的になりました。Prisma MCPはデータベース管理を楽々と行い、AIはアーキテクチャの制御を失うことなく、より迅速に進めることを可能にしました。