😎
Vercel v0とSupabaseを使ったアプリづくり

2025/01/06に公開
 サマリー開発経験がほぼ無い筆者が、Vercel v0とSupabaseを使って、スクラムで使えるプロダクトバックログアイテムの作成・管理を行うウェブアプリを作った。
v0でフロントエンド（FE)を、Supabaseでバックエンド（BE)を構築した。
v0とSupabaseを使うことで、非エンジニアでもアプリ開発が可能になった。ポイントは３つ
拙い日本語の指示だけで、おおよそイメージするUIが出来た。
全てウェブ上で完結するため、開発環境の構築は不要。もちろん、ターミナルも一度登場しなかったこと（これは非エンジニアにとっては大きい）
Supabaseへの設定は、v0にSQLのスキーマ文を作ってもらい、Supabaseの「SQL Builder」にコピペするだけで完了する。超簡単。

ソフトウェア開発の敷居が一気に下がったことで、MVP版アプリは低コストかつPOやデザイナーなどの非エンジニアで開発することが現実的になった。そのため、ビジネスにおける仮説検証の重要性がより高まるだろう。
一方で、AIを活用したMVP開発は一つの手段であり、既存のソフトウェア・システム開発に早急に代替するものではない印象を持つ。
この投稿は、その時の作り方を備忘録として書く。しかしながら、非エンジニアのため用語や概念が間違っているかもしれないので、大目に見て頂ける人のみ読んでほしい。

 作ったものプロダクトバックログを管理するアプリを作りました。POがユーザーストーリーマッピングからPBIを作り、各チームへPBIを渡し、タスクに分解し、日々タスクを管理するという一連の体験が可能です。また、管理者権限機能も実装されており、管理者権限を持つアカウントでは入れば、会社やチームを好きに閲覧することが可能です。

 実装している主な機能スクラムを実践出来る最低限の機能は持たせています。
ユーザーストーリーマッピング作成
プロダクトバックログ作成
タスク作成
PBI/タスクごとの予実管理
管理者権限
各種メトリクス表示

 準備1.v0ここからは実際にどうやっているのか、やり方を紹介します。

まず、v0にアクセスし、アカウントを取得します。

メールアドレスか、GitHubなどのアカウントを使って作成することも可能です。

v0は無料でも使用可能ですが、無料プランだとやりとりに上限が決まっているため、ソフトウェア開発を作り込むのは難しいです。有料プランがおすすめです。しかしながら、有料プランだとある程度自由にやり取りができますが、こちらも上限があるようで、どこかのタイミングで一時的に使用できなくなります。だけど、毎日翌９時になると制限が解除されます。

 準備2 Supabase▼Supabaseのアカウントも取得します。ここだけ黒い画面ですが、うろたえる必要はありません。

▼こちらもGitHubのアカウントやメールアドレスで登録可能です。

▼ログインするとダッシュボードに遷移すると思うので、プロジェクトを作ります。キャプチャはすでに１つ登録されている状態です。

無料プランは２つまでしかプロジェクトを作成できません。商用利用の場合は有料プランが必要です。

まずはプロジェクトを作成します。

▼必要な箇所を入力し登録します。

▼この画面が表示されたら完了です。このページにあるProject URLとProject API Key (Anon public）があとで必要になります。

このページを離れても

ナビゲーションの設定＞APIを選択すれば参照することが可能です。

 プロダクトづくり
 UI作成▼v0を開き、作りたいアプリを日本語で入力しましょう。細かい要件を伝えるよりもざっくり伝えるほうが、効率良いです。

▼自動的にプログラミングがはじまります

▼プラグラミングが完了すると、プレビューで操作が可能になります。

 BE連携（初回時）フロントエンドが意図通りであればBEと連携しましょう。

Supabaseを開き、Project URLとAPI Keyを取得します。

ナビゲーションの設定＞APIを選択すれば参照することが可能です。

それを踏まえて、以下をチャット欄入力しましょう。いずれもProject URLとAPI Key（anonpublic）はそれっぽく見せてますが適当です。

ポイントは、BEと接続したい、ローカル環境は使わない、Project URLとAPIの３つを伝えることです。これを伝えればあとは勝手にSupabaseと接続します。
こちらをSupabaseに連携してデータの永続化を行いたいです。
今回のアプリはブラウザで簡潔するようにv0とSupabaseだけで作りたいです。
ローカル環境は使用しません。
なお、SupabaseのProject URLとProject API Keysは以下のとおりです。
https://fewaifewafeawfaewfweafieawfeafea.supabase.co

eyJhbGaifeawfawe9feawf9q3r9q2rfjiowaefwajfiaoewfjarq2rdwadfa9ri32erj32orfwdowdwncawnfaewf9w0efjewafjwqf3w2jfq2wf
もしくは、環境変数を入力したいからフォームを出してくれといえばでてきます。

▼環境変数を入力したところ、以下のエラーが表示されました。エラーが表示されたら、そのエラーをコピーしてチャットに貼ると、エラーを解消してくれます。

▼ただ、上記のキャプチャを見ると、Supabase側の設定が必要にも関わらず出来てないように見えますので、
Supabaseで設定を行いたいので、SQL Editorで使用できるスキーマ文を考えてください。
と書いてしまうのも「あり」です。これはコツなんですが、ときたまv0は、Supabaseの設定のためのSQL文を吐き出すのを忘れてしまい、いつまでもエラーが解消しないなんてことがあります。そういうときは、上記のように書くと理解してくれます。実は私が最初に苦労をしたところでもあり、「明らかにFEだけでは実現しなくない？（Supabaseの反映も必要じゃない？」っていうものはSQL文を作ってもらいましょう（SQL文も必要なんじゃないの？っていうと「そうでした」とか言って書いてくれます）

 Supabaseの設定（マイグレがある際は必ず）▼SQL文が吐き出されたらSQL文をコピーし、Supabaseを開きます。SupabaseのSQL Editorを開き、v0からコピーしたSQL文を貼り付け、実行します。問題がなければSuccessと表示されるはずです。一方で、何かしらエラーが起きた場合は、v0に戻りチャット欄にエラー内容を書き込むと、新しいSQL文が表示されますので、再びv0に戻り、それを実行してください。

▼Supabaseの操作を終え、v0に戻りSupabaseが正常に更新出来たことを伝えると最新のプレビューを表示してくれるので、プレビューで動作確認を行います。（ここがステージング環境のようです）

 デプロイ▼画面右上のボタンを押すとデプロイが出来ます。Vercel上にデプロイされるようです。デプロイする際に「フォルダを選んでください」と聞かれるので、適当なフォルダを作成するか選択してください。

▼デプロイ失敗

デプロイが失敗することもよくあります。その際は、ログを参照し、ログをチャットに貼り付けるか、Fix with v0ボタンをクリックし修正します。

▼デプロイ成功

デプロイに成功するとURLが発行されます。これはデプロイする度に変わります。もし、URLを固定させたい場合は、Set a custome domeinから好きなドメインを設定してください。ちなみにこの操作は毎回必要です。Unpublishすれば本番環境から引き下げることが出来ます。

 本番環境での動作環境本番環境で正常に動作するかを確認しましょう。

これ以降は、プロダクトをv0で作り、たまにSupabaseへマイグレし、デプロイを繰り返すだけです。　非常にカンタンにプロダクトを構築することが出来ます。

 ユーザーアカウントを作成するこれは次回書きますが、ざっくり書くと、

「ユーザーアカウント機能を作ってください。Supabaseのユーザー認証機能を使いたいです」とざっくり投げればきっとよしなに作ってくれると思います。

アドミン権限みたいなものを作りたい際は、まずSupabaseでアカウントを登録しておき、UUIDが発行されるので、「このUUIDのユーザーを管理者権限にしてください」ってチャットにかけばよしなにやってくれると思います。詳細は次回書きますが、一番苦戦しました。

 画像をアップロードするロゴ画像などをSupabaseにアップロードしておき、ツールに表示させることも可能です。

キャプチャの通り、SupabaseのStorage機能に画像をアップし、URLを取得します。そのURLをv0に貼り付け、使い方を指定すれば使えます。

 RestoreとFork万が一プロダクトがおかしくなっても、バージョンを戻すことが出来ます。それがRestoreです。また、プロジェクトを分岐させて、これまでの成果物の上に派生形をつくることも可能です。それがForkです。

 所管非エンジニアの私が、バックエンドを含むアプリを作れるようになったことに感動しました！！あと、BEの設定をコピペで出来るとは、、、！すごいですね。

実は、これまでアプリを作ろうした経験が何回かあります。プログラミングの知識はもちろんのこと、環境構築の段階でつまずくことがよくありました。特に、コマンドプロンプトやターミナルが出てきた時点で、軽いアレルギー反応が、、、しかし、v0とSupabaseを使えば、ターミナルを触ることなくプロダクトを作ることが出来ますので、プロダクトオーナーやデザイナーといった非エンジニアでも、アイデアをすぐに実現することを可能にします。このことは、アイデアの仮説検証のスピードと回数を飛躍的に向上させると思います。MVP（Minimum Viable Product）を迅速にリリースし、ユーザーに適しているかどうかを検証するプロセスがこれまで以上に簡単になります。その結果、仮説検証の方法論がますます重要になるでしょう。具体的には、仮説の構築、検証方法の設計、そして検証結果の分析といったスキルが成功の鍵となるはずです。
一方で、よく議論される「この方法がすぐに開発者の代替になるのか」という点については、現時点ではそうではないと感じています。AIが生成したものには限界があり、急に画面のデザインや機能が刷新されたり、デグレ（既存機能の不具合）が発生したりと、予測不可能な事態が起こることがあります。そのため、本格的なプロダクトを運用するには、これらの不安定な状況を考慮するとリスクが高すぎるでしょう。現時点では、これらのツールを仮説検証の初期段階で活用するのが適していると思います。

 以上です！何か質問・お手伝い出来ることがあればいつでもお声がけください。

また、もっといいやり方があるよ！という知見があればぜひ共有いただけますと嬉しいです。