v0とChatGPTを使って、実際に動くWebアプリを作ってみませんか？
今回は、社内で使える日報・週報の提出アプリを一緒に開発していきます！
プログラミング初心者の方でも大丈夫です。
v0の直感的なインターフェースとChatGPTの強力なサポートがあれば、思っているよりも簡単にアプリが作れてしまいます。
毎日の業務報告や週次の振り返りを効率化できるツールを、自分の手で作り上げる達成感を味わってみましょう。
v0について
v0についてはこちらをどうぞ。
ChatGPTにv0に渡すプロンプトを作ってもらう
まずはChatGPTに、v0で使うプロンプトを考えてもらいましょう。
社内用日報・週報提出アプリをつくりたいので、要件定義と設計をして、v0に渡すプロンプトを作成してください。
作成してくれました。
了解です。以下に「社内用日報・週報提出アプリ」のための要件定義・設計と、v0.dev に渡すためのプロンプトを用意しました。 ⸻ ■ 要件定義 目的 社内メンバーが日報・週報を簡単に記入・提出し、管理者が一覧で確認・フィードバックできるシンプルなWebアプリを構築する。 想定ユーザー •投稿者（社員・スタッフ） •閲覧者（上司・管理者） 機能一覧 A. 投稿者機能 •ログイン（仮実装でも可） •日報・週報の作成フォーム •日付選択 •種別（日報 / 週報） •本日の業務内容（テキスト） •所感（テキスト） •提出（送信）ボタン •過去の提出履歴（リスト） B. 管理者機能 •提出された日報・週報の一覧（フィルター：日付 / ユーザー / 種別） •個別詳細閲覧 •コメント入力（返信・フィードバック） ⸻ ■ ページ構成（UI設計） 1.ログイン画面（仮） •ユーザー名・パスワード（UI上の擬似ログインで可） 2.ダッシュボード •提出ボタン（＋） •過去の投稿一覧（表形式 or カード） 3.日報・週報作成フォーム •日付選択 •種別（ドロップダウン） •業務内容（テキストエリア） •所感（テキストエリア） •提出ボタン 4.管理画面（Admin） •提出一覧（表形式） •検索・フィルター：日付・種別・ユーザー名 •コメント入力フォーム付き詳細画面 ⸻ ■ v0に渡すプロンプト Build a web application interface for an internal report submission system, consisting of the following pages: 1. **Login Page**: - Username input - Password input - Submit/Login button (The login does not need real authentication for now.) 2. **Dashboard Page**: - A “+ New Report” button to go to the submission form - A list of submitted reports (by date, type: daily/weekly) 3. **New Report Submission Page**: - Date picker - Dropdown to select report type (daily or weekly) - Textarea for “Work Details” - Textarea for “Comments / Reflections” - Submit button 4. **Admin Page**: - Table listing all submitted reports with filters by date, user, and type - Clicking a report opens a detail view - Inside the detail view: - Show report content - Textarea for admin comments - Submit button for admin feedback Use a clean, modern UI design (like TailwindCSS or similar). Prefer a layout with a side navigation bar or header menu to switch between pages.⸻このプロンプトをv0.devにそのまま投げれば、かなり近いUIを即座に提案してくれます。必要に応じて、「モバイル対応にして」「ダークモードありで」など条件追加も可能です。さらに進める場合、API連携や保存処理（Supabase, Firebaseなど）も組み合わせて開発できます。もっとカスタマイズしたいですか？（例：Slack通知、Markdown対応など）v0に投げてみます。ちょっと待ちます。
v0に、ChatGPTに作ってもらったプロンプトを投げてみる
作成してくれました。
ダッシュボードとログイン画面みたいなものができた
なんかログインしてないのにサイドバーが見えてるので、直してみます。
あとやりとりが英語になってるので日本語で回答してもらえるようにしてみます。
ログインしていない時はログインフォームだけ見えるようにして。
あとこれからは日本語で答えて。
いい感じになりました。
社内用日報・週報提出アプリのログインフォームができた
適当に入力すると、ログインができました。（まだ試作品なので、認証のところは一旦これでOKとします）
ダッシュボードができた
これでもう一応画面ができてしまいました。
ただ、v0上で画面ができただけで、デプロイ（リリース）はできていません。デプロイやバックエンドの実装が必要になります。
そこで、またChatGPTに聞いてみます。
デプロイをしたいですが、バックエンドの実装はどうやりますか？
めちゃ色々考えてくれました。
v0.dev は UI（フロントエンド）を自動生成するサービスなので、デプロイやバックエンドの実装は自分で行う必要があります。以下に、構成パターン別にバックエンドの選択肢とデプロイ手順を紹介します。 ⸻ ■ おすすめ構成（最小実装） •フロント：v0 で生成された React + Next.js (App Router) プロジェクト •バックエンド：Supabase（Firebaseでも可） •デプロイ：Vercel ⸻ 1. バックエンド実装：Supabaseを使う場合 利点： •認証（Auth）付き •PostgreSQL + REST & Realtime API •SQLクエリも使える •Supabase StudioでGUI操作可能 実装ステップ： Step 1: Supabase プロジェクト作成 https: Step 2: テーブル作成（例） -- reports（投稿された日報・週報）CREATE TABLE reports ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), user_id UUID, date DATE, type TEXT, -- 'daily' or 'weekly' work_details TEXT, comments TEXT, created_at TIMESTAMP DEFAULT now()); -- admin_comments（管理者コメント）CREATE TABLE admin_comments ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), report_id UUID REFERENCES reports(id), comment TEXT, created_at TIMESTAMP DEFAULT now()); Step 3: API接続 Next.js 側で Supabase Client を使って API 経由でデータを読み書き。 npm install @supabase/supabase-js import { createClient } from '@supabase/supabase-js'export const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY) ⸻ 2. フロントエンドのコードをVercelでデプロイ Step 1: v0からエクスポート •Export to Code → Download Code •npm install / pnpm install •.env.local に Supabase のキーを追加 Step 2: Vercelにデプロイ •https: •GitHub連携またはローカルアップロードでデプロイ •Supabaseの環境変数（NEXT_PUBLIC_SUPABASE_URL など）を設定 ⸻ 3. バックエンドの別選択肢 バックエンド特徴SupabaseSQLベース、UIも使いやすいFirebase (Firestore)NoSQL。スピード重視ならアリAppwriteオープンソース、柔軟な設計が可能自前Laravel APIフルコントロールできるが重いv0 + Clerk認証付きのUI構築がスムーズ ⸻ 次のアクション 「Supabaseで進めたい」と決めたら、Supabaseプロジェクト初期化 → テーブル作成 → クライアント接続コードを追加で最短30分で動きます。ご希望があれば、Supabase用のテーブル定義・API呼び出しコードも生成できます。必要ですか？どうやらSupabaseで進めると早く実装できるみたいなので、それでやってみます。
はい、お願いします
すると、色々考えて返してくれました。難易度が上がった感じがします。
指示通りに進めてみることにします。
了解しました。それでは、Supabase + v0 UI で「社内用日報・週報提出アプリ」を構築するために必要な： ⸻ ■ Supabase用テーブル定義（SQL） ■ Next.js（v0）用クライアント接続コード の両方を用意します。 ⸻ 1. Supabase用テーブル定義（SQL） Supabaseの「SQLエディタ」で以下を実行してください： -- 投稿者のユーザー情報create table users ( id uuid primary key default gen_random_uuid(), email text unique, name text, created_at timestamp default now()); -- 日報・週報レコードcreate table reports ( id uuid primary key default gen_random_uuid(), user_id uuid references users(id) on delete cascade, date date not null, type text check (type in ('daily', 'weekly')), work_details text, comments text, created_at timestamp default now()); -- 管理者コメント（1:1対応）create table admin_comments ( id uuid primary key default gen_random_uuid(), report_id uuid references reports(id) on delete cascade, comment text, created_at timestamp default now()); 補足：SupabaseのAuth機能を使う場合、users テーブルは auth.users と統合する構成も可能ですが、ここでは簡略化のため独立テーブルにしています。 ⸻ 2. Supabaseクライアント初期化コード（Next.js用） npm install /supabase-js utils/supabase.ts を作成： import { createClient } from '@supabase/supabase-js' const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL as stringconst supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY as string export const supabase = createClient(supabaseUrl, supabaseAnonKey) .env.local に環境変数を追加： NEXT_PUBLIC_SUPABASE_URL=https:NEXT_PUBLIC_SUPABASE_ANON_KEY=xxxxxxxxxxxxxxxxxxxxxxxxx ⸻ 3. フロントエンドからのAPI例 レポートの新規作成 import { supabase } from '@/utils/supabase' export async function submitReport({ userId, date, type, workDetails, comments,}: { userId: string date: string type: 'daily' | 'weekly' workDetails: string comments: string}) { const { data, error } = await supabase.from('reports').insert([ { user_id: userId, date, type, work_details: workDetails, comments, }, ]) return { data, error }} 管理者コメントの追加 export async function submitAdminComment({ reportId, comment,}: { reportId: string comment: string}) { const { data, error } = await supabase.from('admin_comments').insert([ { report_id: reportId, comment, }, ]) return { data, error }} ⸻ 4. 補足：レポート一覧取得（管理者用） export async function fetchReports() { const { data, error } = await supabase .from('reports') .select('*, users(name)') .order('created_at', { ascending: false }) return { data, error }}⸻この構成で、v0で作ったUIにAPI接続を組み込むことで、データ保存付きのWebアプリになります。必要があれば「ログイン認証付き構成」や「Supabase Authとの連携」も追加できます。次にやりたいことがあれば教えてください（例：フォームとsubmit関数の接続、一覧表示、編集機能など）。今回はここまで
今回はChatGPTでプロンプトを作成し、画面と次のアクションを確認するところまで進めました。
次回はSupabaseなどを使ってバックエンド側の処理を作っていきます。
フォームの作成からデータの表示まで、実際に手を動かしながら進めていく予定です。
お疲れさまでした。
次回もお楽しみに。
さいごに🙇♂️
ここまでご覧いただき、誠にありがとうございました。
Noteの内容でわからないことがあれば、XかLINEからどうぞ！
質問以外にも、有料Noteの先行案内や限定特典なども配信しています。
ルミナス@エンジニア × AI × 起業
X：https://x.com/hgvSUfIYWZ52382
LINE：https://lin.ee/ZaDu2q1
宜しくお願いします！🙇♂️
Views: 0
