🚀

大生成AI時代の爆速MVP開発 ver.2025

2025/01/21に公開

こちらは「medicalforce New Year's Blog 2025」11日目の記事です。

はじめに

2025年現在、GPT-3.5のリリースを皮切りに様々な生成AIを活用した開発支援サービスの台頭により、MVP(Minimum Viable Product。顧客に価値を提供できる最小限のプロダクト)の開発にかかる時間は以前よりも圧倒的に短縮されています。その結果、以前のように必ずしもデザインツールのプロトタイピング機能を使って顧客の反応を見る必要性は低くなりつつあり、「とりあえず動くものを作って価値を判断してもらう」という検証サイクルでも大きな手戻りなくビジネスが展開できる時代に入ってきていると思います。
そこで本記事では、生成AIツールを活用してサクッとミニマムプロダクトの開発をおこなう手法をご紹介したいと思います。
また、本記事の次節と末尾には話題のAI省力化ツールを列挙しておりますので、どういうプロダクトがあるのかざっとキャッチアップしたいという方もぜひ目を通してください!

今回の登場人物

実際に開発作業に入る前に、今回のプロダクト開発で利用するサービスについてご紹介します。
※AIによって自動生成された説明文を含みます

bolt.new - プロトタイプ作成

https://bolt.new/

Supabaseとの強力な統合が特徴的なプロトタイプ開発ツール。リアルタイムデータベースの自動構築、認証システムの簡単な実装、API自動生成機能を提供し、フロントエンドからバックエンドまでをシームレスに構築できる。

Supabase - 忙しい人のためのRDB

https://supabase.com/

リアルタイムデータベース、認証システム、ストレージソリューションを提供し、オープンソースのFirebase代替として注目を集める。特にPostgreSQLベースの堅牢なアーキテクチャが特徴で、スケーラブルなアプリケーション開発に適している。

実際にMVP開発してみよう

ここからはご紹介したツールを使って実際にプロダクトを構築していきます。
せっかくならミニマムofミニマムなメディカルフォースを再現したいので、「予約を来院者や施術と紐付けて作成し、それを一覧で閲覧することができる」という機能をもつプロダクトを作っていきたいと思います。

1. プロトタイプ作成 (bolt.new)

1-1. プロンプトからプロジェクト雛形を作成

bolt.newのトップページからプロダクトの要件についてプロンプトを入力してプロトタイプの生成を開始します。
なお、ここでDBもセットアップもおこなってほしいので、プロンプトにて

  • supabase, postgreSQLを利用してほしいこと
  • 予約(reservations)・来院者(visitors)・施術(operations)のテーブルを準備してほしいこと
  • 来院者「メディカル太郎」と施術「ヒゲ脱毛」と紐づく予約をシードデータとして作成してほしいこと

という点も盛り込んであります。

bolt.newに渡しているプロンプトの全体
美容クリニック向けの予約を管理することができるCRMを構築してください。

画面設計は以下の通りです。
- 予約一覧画面(URLパス: "/")
  - 機能: 全予約がリスト形式で閲覧可能。リストに表示されるカラムは来院者名、予約時間、施術名の3つ。また、右上の「新規作成」ボタンから予約作成ダイアログが表示され、予約の項目をクリックすると予約詳細ダイアログが表示される。
- 予約作成ダイアログ
  - 機能: 時間設定や来院者・施術との紐付けが設定された予約を作成することが可能。
- 予約詳細ダイアログ
  - 機能: 予約の詳細情報の閲覧や来院者・施術との紐付けなど予約情報の編集が可能。

Webアプリケーションの構築には、以下の技術スタックを利用してください。
- React.js
- TypeScript
- supabase
- postgreSQL

テーブル構造は以下のmermaid記法によるER図を参照してください。
erDiagram
    reservations {
        uuid id
        datetime start_at
        datetime end_at
        uuid operation_id
        uuid visitor_id
    }

    visitors {
        uuid id
        string name
        string birthday
    }

    operations {
        uuid id
        string name
        int time_minutes
        int price
    }

    reservations }o--|| operations : "operation_id"
    visitors ||--o{ reservations : "visitor_id"

なお、初期値として各テーブルに対して以下のデータを挿入してください。
visitors: {
  id: "visitor_1",
  name: "メディカル太郎",
  birthday: "2000-01-01"
}
reservations: {
  id: "reservation_1",
  start_at: "2025-01-01 10:00:00.000000",
  end_at: "2025-01-01 11:00:00.000000",
  operation_id: "operation_1",
  visitor_id: "visitor_1"
}
operations: {
  id: "operation_1",
  name: "ヒゲ脱毛",
  time_minutes: 60,
  price: 10000
}

↓上記のプロンプト内で渡しているテーブル構造↓

プロンプト入力

生成されたコードでは技術スタックとして

  • バンドラ: vite
  • CSSフレームワーク: Tailwind CSS

が利用されているのがわかります。


1-2. DBとの接続

コード生成は完了しましたが、UIが真っ白のままになっていますね。
これはDBであるsupabase前提のコードでありながら、.envにsupabaseへの接続情報が記載されていないためです。

Supabaseと連携
そこで、右上の "Connect to Supabase" を押してsupabaseと連携しましょう。(画像では気持ちが高ぶってスクショ撮る前に押してしまいました...)

migration
.envファイルも作成され、ついにUIにお目にかかることができました!
ただ、このままではDBのmigrationがデータが実行されていないため、シードデータが入っていません。
左下の"Apply changes"を押してmigrationファイルを実行しましょう。(今回のmigrationファイルはこちら

表示された!
migrationファイルのシードデータとして指定した「メディカル太郎」「ヒゲ脱毛」が反映されていますね!


ちなみに、予約作成のUIはこんな感じ。しっかりプルダウンから「ヒゲ脱毛」が選べるようになっています!
ここで、テストとしてシードデータとは別に1月2日の予約も作成しておきます。

1-3. GitHubリポジトリへアップロード (optionalです)

生成されたプロダクトに大きな修正は不要そうですので、このまま右上の"Export"から生成されたプロジェクトコードをダウンロードします。
boltからダウンロードしたzipファイルはgit initして適当なリモートリポジトリと連携させておきましょう。
今回生成された全コードは以下のリポジトリで公開しています。
https://github.com/puertocampo/minimum-crm

本記事のようにbolt上からそのままデプロイする場合はダウンロード・リポジトリ連携は不要です。

2. データの中身を見てみる (supabase)

次にsupabase側でどのようにデータが格納されているかチェックしたいと思います。
プロトタイプ生成時に"Connect to Supabase"を押したことで、新しいプロジェクトが作成されているので該当プロジェクトのデータベースを覗いてみましょう。

ER図

ER図(もどき)から、意図した通りにテーブルが作成されていることがわかります!

実データ

reservationsテーブルを確認すると、シードデータの1月1日の予約と、UIから作成した1月2日の予約の両方がちゃんとINSERTされていますね🙆

3. デプロイ (bolt.new)

それでは、bolt.newにもどってデプロイ作業をおこないましょう。

右上の"Deploy"ボタンを押してみます。

待つこと10~20秒ほどでデプロイが完了しました!
URLからしてデプロイ先のプラットフォームとしてnetlifyを利用しているようです。

表示されているURLにアクセスするとちゃんとsupabase内のデータが参照されていることがわかります。

もちろん、FEからDBへ直接アクセスしているため接続文字列がAPIリクエスト時に見えてしまっていたり、コードの変更容易性が少し低かったりと、このままで本番リリースとはいきません。しかし、小規模のプロダクトであればクローズドベータとして顧客や社内で利用してもらい、仮説検証するのに十分なクオリティだと思います。

まとめ

今回作成したMVPでよしとするのにむずがゆさを感じるエンジニアの方もいらっしゃる方もいるかと思います笑。
ただ、よりアジャイルにプロダクトを開発するために、開発者としてそもそも手を動かさないという選択肢を持っておくべきなのかなと感じています。

AIの進化に伴い、単純なコーディングそのものの価値は下がりつつあります。
まだAIを日常的に活用していない開発者の方は、まずはエディタを試してみることをおすすめします!
今回は触れませんでしたが、例えばCursorは、Visual Studio Codeから拡張機能をインポートでき、操作感も同じなので、ぜひ一度お試しください😊

おまけ

今回採用されなかった開発ツールやマーケ、オペレーションの省力化に寄与しそうなツールたち
※AIによって自動生成された説明文を含みます

Lovable - 群雄割拠のプロトタイプ生成

https://lovable.dev/

デザインからプロトタイプまでを一気通貫で行えるLovableは、チーム開発に最適化されたプラットフォームです。リアルタイムのコラボレーション機能と充実したUIコンポーネントライブラリにより、デザイナーとエンジニアの協業をスムーズにします。(boltとほぼ同機能だけど、アメリカだとこっちの方がなんか評価高いイメージ。日本語入力がストレスフルなので筆者はbolt推し)

Cursor - 言わずと知れたAIエディタ

https://www.cursor.com/

次世代のAIパワードコードエディタ、Cursorは開発効率を大幅に向上させます。リアルタイムコード補完、コンテキストを理解した自動コード生成、インテリジェントなバグ修正提案機能により、開発者の生産性を最大化します。特に、自然言語でのコード生成機能は、プロトタイプ開発のスピードを劇的に向上させます。

Glide - 典型的なアプリをノーコードで

https://www.glideapps.com/

スプレッドシートからアプリケーションを作成できるGlideは、ビジネスユーザーにも使いやすい設計になっています。ドラッグ&ドロップインターフェースと豊富なテンプレートにより、技術的な知識がなくてもモバイルアプリケーションを作成できます。

BuildShip - サクッとバックエンド実装

https://buildship.com/

BuildShipは、バックエンド開発を効率化する統合プラットフォームです。インフラストラクチャの自動構築からデプロイメントまで、開発者の作業を大幅に削減します。セキュリティ機能の自動実装により、安全なアプリケーション開発が可能です。

Hasura - GraphQLベースのバックエンド

https://hasura.io/

HasuraはGraphQL APIを自動生成するプラットフォームとして、バックエンド開発を革新しています。リアルタイムサブスクリプション機能とロールベースのアクセス制御により、複雑なバックエンド機能を簡単に実装できます。

NocoDB - スプレッドシートライクDB

https://nocodb.com/

NocoDBは、従来のデータベース管理の概念を覆す、スプレッドシートライクなインターフェースが特徴です。既存データベースとの連携やAPI自動生成機能により、データベース管理の敷居を大幅に下げています。

Render - ポチポチで簡単継続的デプロイ

https://render.com/

ゼロコンフィグデプロイメントを実現する、モダンなクラウドプラットフォーム。自動SSL証明書の発行やグローバルCDNの統合により、セキュアで高速なアプリケーションのデプロイが可能。

n8n - オペレーション自動化(その1)

https://n8n.io/

ワークフロー自動化の新標準として注目を集めるn8nは、豊富な連携機能とカスタマイズ性が特徴です。

zapier - オペレーション自動化(その2)

https://zapier.com/

3000以上のアプリ連携を実現する業界標準の自動化ツールとして、多くの企業で採用されています。

Dify - オペレーション自動化(その3)

https://dify.ai/jp

AI機能に特化した開発プラットフォームとして、LLMの統合やプロンプトエンジニアリングを支援します。

Framer - Webサイトビルダー

https://www.framer.com/

モダンなWebサイトビルダーとして、コンポーネントベースの開発とアニメーション機能が特徴です。

Discussion