Webエンジニア向けプログラミング解説動画をYouTubeで配信中!
▶ チャンネル登録はこちら

【ITニュース解説】How to build a room booking app with an AI agent using the Prisma stack

2026年11月05日に「Dev.to」が公開したITニュース「How to build a room booking app with an AI agent using the Prisma stack」について初心者にもわかりやすく解説しています。

作成日: 更新日:

ITニュース概要

AIエージェントとPrismaスタックで会議室予約アプリを作る方法を解説する。Prisma ORMでデータ管理、PostgresでDB、Computeでホスティング。複数予約を防ぐ堅牢なAPIやモダンなUIを実装し、AIがコード生成。Prisma CLIやGitHub Actionsで開発・デプロイを効率化し、初心者でも簡単に実践できるテンプレートだ。

ITニュース解説

このニュース記事では、AIエージェントとPrismaスタックを組み合わせて、会議室の予約アプリを構築する具体的な方法が解説されている。特に注目すべきは、複数のユーザーが同時に同じ部屋を予約しようとした際に、たった一人だけが成功し、他は適切に拒否されるという、同時予約(二重予約)防止の仕組みが堅牢に実装されている点だ。システムエンジニアを目指す初心者にとって、現代のWebアプリケーション開発で必要とされる様々な技術要素がどのように連携し、複雑な問題を解決しているかを学ぶ良い機会になるだろう。

今回構築される会議室予約アプリは、使いやすいインターフェースと堅牢なバックエンドが特徴だ。ユーザーインターフェースはタイムライン形式で、部屋がフロアごとにグループ化された行として表示される。空いている時間帯をドラッグして予約したり、既存の予約をドラッグして移動したり、端をドラッグして時間を変更したり、クリックしてキャンセルしたりできる。予約できない時間帯は、ドラッグ中に赤く表示され、サーバー側でも二重予約を厳密にチェックする仕組みが働く。初めてアプリにアクセスすると、あらかじめ6つの部屋と一日のデモ予約データがシードされ、すぐに機能を試せるようになっている。デザイン面では、現代的な生産性ツールに合うグラスモーフィズムという透明感のあるテーマが採用され、ライトモードとダークモードに対応している。CSSカスタムプロパティ(デザインシステム)を用いて、色やぼかし、角丸などのあらゆるデザイン値が一元的に管理されており、見た目全体の変更が容易になっている点も興味深い。

このアプリの主要な技術スタックは、フロントエンドに最新のNext.js 16(App Router)とReact 19、タイムライン表示にResource Schedulerというnpmパッケージを使用している。バックエンド、データベース、ホスティングにはPrismaスタックがフル活用されており、データ操作にはPrisma ORM 8、データベースにはPrisma Postgres、そしてホスティングにはPrisma Computeが使われている。これらはPrisma Composerという仕組みを通じて連携し、デプロイやデータベースのプロビジョニングを自動化する。開発作業そのものは、Claude CodeやOpus 5.5のようなAIコーディングエージェントが中心となって行われた。AIエージェントは、シェルコマンドを実行し、「Agent Skills」と呼ばれる指示ファイルを読み取ることで、Prismaプラットフォームの最新の情報を学習し、適切なコードを生成する。これにより、AIが古い学習データに依存せず、常に最新のプラットフォームの仕様に沿った開発が可能になっている。

開発の第一歩として、AIエージェントにPrismaスキルが与えられる。例えば、npx skills add prisma/skills --skill prisma-computeのようなコマンドでPrisma Computeのスキルをインストールする。これにより、エージェントはPrisma Computeのデプロイフローの変更点などを自動的に把握し、現行の正しい方法でコードを記述する。次に、create-prismaコマンドでNext.jsプロジェクトの雛形が作成される。この雛形には、Prisma ORM、Prisma Postgres、Computeに接続するための基本的な設定があらかじめ含まれているため、開発の立ち上がりが非常にスムーズになる。

最も重要な部分であるデータモデルの定義と二重予約防止の仕組みは、src/prisma/contract.prismaファイルで定義される。ここでは、RoomとBookingというモデルが作成され、それぞれにID、名前、フロア、座席数、予約時間などのプロパティが設定される。特に、予約が開始時間より前に終了しないことを保証する@@check制約が設定されている。しかし、データベースのテーブルレベルで直接予約の重複を禁止する制約は、Prismaの契約ファイルだけでは表現できないため、PostgreSQLが提供する「排他制約(EXCLUDE USING gist)」が利用される。これは、マイグレーションファイル内で直接SQLを記述して追加され、同じ部屋で時間帯が重複する予約がデータベースレベルで拒否されるようにする、最終的な安全装置として機能する。npm run contract:emitでデータモデルの型を生成し、npm run migration:planでデータベースの変更計画(マイグレーション)を立て、その後手動で排他制約のSQLを追加するという手順が取られる。

実際の予約API(src/server/bookings.ts)では、二重予約をより積極的に防止するために、Prisma ORM 8の「行ロック(forNoKeyUpdate())」が使用される。これは、予約処理中に該当する部屋の行をロックすることで、他の並行するリクエストが同じ部屋の予約処理を待機させる仕組みだ。これにより、データベースレベルでの排他制約に加えて、アプリケーション側でも確実に一貫性を保つことができる。ロックは常に決まった順序で行われるため、デッドロック(複数の処理がお互いを待って停止する状態)を防ぐ。また、ブラウザとサーバーで共通のルールセット(src/lib/rules.ts)が利用され、オフィス固有のタイムゾーンで時間を処理することで、どの環境からアクセスしても一貫した予約ルールが適用される。エラーメッセージも非常に詳細で、どの予約が何時に誰によってすでに予約されているかまでユーザーに伝えることができる。

フロントエンドのタイムラインボードは、Resource Schedulerコンポーネントを用いて構築される。このコンポーネントは、部屋を「リソース」、予約を「イベント」として扱い、フロアごとにグループ化された表示を可能にする。サーバーと共有されたルールセット(isPlacementAllowed)に基づいて、ドラッグ中に予約できない場所を赤く表示し、不正な操作を未然に防ぐ。予約処理は「楽観的更新」という手法が使われ、ユーザーが予約操作を行うと、すぐに仮の予約表示(グレーのカード)が画面に現れる。もしサーバーでの処理中に他のユーザーが先に予約を確定してしまった場合、仮の表示はサーバーからのエラーメッセージとともにロールバックされ、画面が更新されて正しい状態(誰かが予約した状態)が反映される。

開発したアプリは、npm run dev:composerコマンドでローカル環境で本番に近い形で実行できる。これは、Bunランタイム上でアプリをビルドし、ローカルのPrisma Postgresエミュレータと連携させて動作させるもので、本番環境と同じ構成でテストが可能だ。データベースのマイグレーションも自動的に適用されるため、開発者は手動でデータベースをセットアップする手間が省ける。テストには、単体テストに加えて、実際のPostgreSQLデータベースに対する統合テストが含まれており、複数リクエストの同時実行による二重予約防止メカニズムの動作が厳密に検証される。

完成したアプリのデプロイは、Prisma Computeを使って簡単に行われる。デプロイ設定は、module.tsとservice.tsというわずか二つのファイルに記述され、Prisma PostgresデータベースのプロビジョニングとNext.jsアプリケーションのデプロイが定義される。GitHub Actionsワークフローを用いることで、コードがGitHubにプッシュされるたびに自動的にデプロイが実行される。このワークフローはGitHubのOIDC(OpenID Connect)トークンを使って認証を行うため、リポジトリに機密情報(シークレット)を保存する必要がない。デフォルトブランチへのプッシュは本番環境に、それ以外のブランチへのプッシュはプレビュー環境に、それぞれ独立したデータベースと共にデプロイされる。さらに、リポジトリのREADMEファイルに「Deploy with Prisma」ボタンを追加することで、他のユーザーがワンクリックで同じアプリを自分のGitHubアカウントに複製し、Prisma Computeにデプロイできるようになる。この際も、環境変数やシークレットの入力は一切不要で、非常に簡単に環境を構築できる。

このように、Prismaスタックを利用することで、開発者は多くの手間を省くことができる。例えば、本番環境でデータベースのURLを直接管理する必要がなくなり、CI/CDパイプラインにデータベースのマイグレーションジョブを組み込む手間も不要になる。デプロイ時にシークレット情報を設定する煩わしさもなくなる。PrismaスキルはAIエージェントに最新のプラットフォーム情報を提供し、create-prismaは適切な雛形を提供し、Prisma ORM 8は行ロックのような高度な機能でコードの品質を高め、Prisma Postgresはローカルと本番で一貫したデータベース機能を提供する。prisma dev module.tsはローカルでの本番環境再現を容易にし、Composerはデータベースの自動プロビジョニングとマイグレーションを担う。そしてGitHub ActionsとDeploy Buttonは、自動デプロイと共有をシンプルにする。

Prismaスタックは、アプリケーションのインフラストラクチャをデータコントラクト、モジュール定義、デプロイワークフローという少数のファイルに集約することを可能にし、AIエージェントが開発作業を効率的に進めるのに非常に適している。すべてのステップがコマンドラインで実行でき、変更はprisma migration planで事前にレビューでき、ローカルで動作するものがそのまま本番で動作するという一貫性も、AIエージェントが安心して開発を進めるための重要な要素だ。人間による初期設定のログイン作業などは一度きりで、その後は自動化されたワークフローが開発を支援する。この方法論は、Prisma ORM 8のような最新のリリース候補技術を使った新しいアプリケーションでも、データベースのプロビジョニングからマイグレーション、そしてアプリケーションの起動まで、完全に機能する開発パスを提供している。

関連コンテンツ

関連IT用語

関連ITニュース