Vibeコーディングを使ったイベント登録システムの構築：非エンジニアによる実際の開発レビュー
なぜ独自の登録システムを作成する必要があるのですか?
最近、Vibecoding Practical Community のパートナー向けに ライブ イベント を主催することにしました。論理的に言えば、登録は Google フォームやアキュパスを使用して行うことができますが、Vibecoding を推進する者としては、Vibecoding を登録システムとして使用できれば素晴らしいと思いませんか?
さらに重要なのは、登録プロセスを完全に制御したいことです。確認レターの自動送信、残席数のリアルタイム表示、登録情報のバックグラウンド管理、CSV のエクスポートなどです。これらの機能はサードパーティのプラットフォームでも利用できますが、カスタマイズできるスペースは非常に限られています。
学ぶための最良の方法は、自分でやってみることです。最も説得力のある教えは、あなたが踏んだ落とし穴を本当に共有することです。
!【Vibecoding開発イベント登録システム】(/images/blog/vibe-coding-build-event-registration/hero.svg) ▲ Vibeコーディングを使用してイベント登録システムをゼロから構築
そこで私は、Vibe コーディングを使用して、1 日以内にイベント登録システムを最初からオンラインにするという課題に挑戦することにしました。以下は、テクノロジー選択のアイデア、開発プロセス中に遭遇した落とし穴、そしてそこから抽出した 5 つの実践的な戦略を含む、私の本当のレビューです。
テクノロジーの選択: なぜこの組み合わせなのか?
始める前に、まず技術的なアーキテクチャを決定しました。 Vibe コーディングの精神は、開発のために自然言語を使用して AI と対話することですが、少なくともどのツールを使用するかを知っておく必要があります。料理をする前に、ガス コンロを使用するか電磁調理器を使用するかを決めるのと似ています。
▲イベント登録システムの技術アーキテクチャ
私は以下の組み合わせを選びました。
- Next.js: フロントエンドとバックエンドの両方をカバーする、React エコシステムの中で最も成熟したフルエンド フレームワーク
- Supabase: データベース、認証、インスタント サブスクリプションを内蔵したオープンソースの Firebase 代替サービス
- Vercel: Next.js に最適なデプロイメント プラットフォーム。プッシュ時に自動的にデプロイされます。
- 再送信: 開発者向けに特別に設計された電子メール サービス。React テンプレートをサポートします。
なぜこの組み合わせを選んだのでしょうか？なぜなら、それらの間の統合は非常にスムーズであり、AI (特にクロード) はこれらのツールを非常によく理解しているからです。 AI に「登録機能を実行するために Supabase を使用するのを手伝ってください」と指示すると、AI はすぐに正しいコードを書くことができます。これは Vibe コーディングでは非常に重要です。
開発プロセス: 1 日で何が達成されるでしょうか?
私は AI コラボレーション ツールとして Claude Code を使用し、自然言語で要件を段階的に説明します。全体のプロセスは大きく 3 つの段階に分かれています。
▲ Vibecodingの開発プロセス：要件記述→AI生成→検証・修正
フェーズ 1: データベースの設計と基本機能
私は最初に、AI に必要な登録システムについて説明しました。「複数のチケット タイプをサポートし、登録後に確認レターを自動的に送信し、割り当てがいっぱいの場合は自動的に場所を待機するイベント登録システムが必要です。」 AI は、イベント、チケット タイプ、登録の 3 つの主要なデータ テーブルと、対応する API ルートを含むデータベース構造の設計に役立ちました。
フェーズ 2: フロントエンド インターフェイスと登録プロセス
次に、アクティビティ リスト ページ、アクティビティ詳細ページ (登録フォームを含む)、バックエンド管理ページの各ページがどのようなものであるかを説明しました。私の説明に基づいて、AI はフォーム検証、状態管理、エラー処理を含む完全な React コンポーネントを生成しました。
第 3 段階: メールテンプレートと高度な機能
最後に、オンライン、物理、ハイブリッドの 3 つのイベント形式をサポートする、登録確認レター、イベント リマインダー レター、イベント更新通知の電子メール テンプレートのデザインを AI に依頼しました。
▲ 登録システムの機能アーキテクチャ
このプロセス全体を通じて、自分でコードを記述する必要はほとんどありませんでした。ただし、要件を明確に説明する、AI の出力を検証する、修正指示を提供する という 3 つのことを行う必要があります。これら 3 つは単純に聞こえますが、実際には Vibe コーディングの中核となるスキルです。
本当の落とし穴: 教訓を教えてくれた 3 つのバグ
システムが構築された後、私は喜んでオンラインでテストしました。その結果、私は 3 つの落とし穴を連続して踏んでしまいました。それぞれの落とし穴で Vibe コーディングについての理解が深まりました。
バグ #1: 登録中のデータベース セキュリティ エラー
最初のテスターがサインアップすると、システムはすぐに次のエラーをポップアップ表示しました: 「新しい行は行レベルのセキュリティ ポリシーに違反しています」。
▲ バグ #1: データベース セキュリティ ポリシーによりパブリック登録がブロックされる
**何が問題ですか? ** Supabase の行レベル セキュリティ (RLS) はデータベース レベルのセキュリティ メカニズムです。「誰が」「どのような操作」を実行する権限を持っているかをチェックします。 AI はデータベースの設計時に「誰でも登録できる」というルールを記述しましたが、実際に登録機能を実行すると、ゲスト ID (ログインしていない) が使用され、権限チェックが失敗しました。
**どうやって解決しますか? ** 私は AI に「登録 API は、RLS をバイパスして、代わりにサービス ロールを使用する必要があります。」と言いました。 AI はすぐに、公開登録データの書き込み専用のサービス ロール クライアントを作成しました。
このバグは私に教えてくれました。Vibe コーディングはテクノロジーをまったく理解する必要がないという意味ではありません。少なくとも、エラー メッセージを読み、正しいキーワードを使用して AI と通信できる必要があります。
バグ #2: 登録は成功しましたが、確認レターが送信されませんでした。
登録機能が修復された後、背景では登録が成功したことが示されているにもかかわらず、申請者のメールボックスが空であり、確認レターがまったく送信されていないことがわかりました。
▲ バグ #2: サーバーレス環境では、非同期タスクが時間内に実行されない可能性があります
**何が問題ですか? ** AI がプログラム コードを作成していたとき、「手紙を送信する」というアクションは「発射して忘れる」ように設計されていました。つまり、AI は、手紙を送るコマンドを発行した後、完了を待たずに直接成功メッセージを返します。これは通常のサーバーでは問題ありませんが、Vercel のサーバーレス環境では、関数は戻った直後に終了し、レターを送信したプログラムは実行が完了する前に強制終了されてしまいます。
**どうやって解決しますか？ ** await キーワードを追加するだけです。プログラムは、レターの送信が完了するまで待ってから結果を返します。この変更はたった 1 行ですが、サーバーレスの仕組みを理解していないと、どこに問題があるのかわかりません。
バグ #3: 登録直後に投票数が更新されない
登録が成功した後、ページ上の残りの場所には元の番号が表示され、減っていません。
▲ バグ #3: キャッシュ メカニズムにより、ページは最新のデータを参照できなくなります
**何が問題ですか? ** Next.js はパフォーマンスを向上させるためにページ データをキャッシュします。誰かが登録に成功すると、キャッシュ内の投票数が古いため、ページに表示される数値が実際の状況と一致しなくなります。
**どうやって解決しますか? ** API の登録に成功したら、積極的に revalidatePath を呼び出してページのキャッシュをクリアし、Next.js に最新データを強制的に再取得させます。同時にフロントエンドでもrouter.refresh()を呼び出して画面を更新します。
AI 開発と従来の開発: 違いは何ですか?
この開発プロセス全体を経験することで、AI 支援開発についてより明確に理解できるようになりました。従来の開発との最大の違いは、プログラム コード自体ではなく、開発者の役割です。
▲AI開発と従来の開発の役割の変化
| の場合従来の開発 | バイブコーディング | |
|---|---|---|
| コアスキル | コードを書く | 要件の説明 |
| デバッグ方法 | コードを読んで問題を見つけてください。問題を説明し、AI に解決してもらいましょう | |
| 開発スピード | 数日から数週間 | 数時間から 1 日まで |
| 学習閾値 | 高 (プログラミングの基礎が必要) | 中 (論理的思考が必要) |
| に適しています | エンジニア | アイデアをお持ちの方 |
ただし、Vibe コーディングには技術的な知識はまったく必要ないことに注意してください。少なくとも次の能力が必要です。
- エラー メッセージを理解する: システムが何を訴えているのかを理解する
- 基本的なアーキテクチャを理解する: フロントエンド、バックエンド、データベースがそれぞれどのような役割を果たしているかを理解します。
- 問題を正確に説明: 遭遇した状況を明確な言語で AI に伝えることができる
Vibe コーディングのための 5 つの実践的なヒント
この開発経験から、私は 5 つの実践的なヒントをまとめ、同じく Vibe コーディングに挑戦したいと考えている友人と共有しました。
▲ Vibe コーディングのための 5 つの実践的なヒント
ヒント 1: 話す前によく考えてください
急いで AI に登録システムの構築を手伝ってほしいと言わないでください。 10 分かけて考えてみましょう。どのような機能が必要ですか?ユーザーの操作プロセスは何ですか?どのようなエッジケースに対処する必要がありますか?思考が明確であればあるほど、AI が提供する出力はより正確になります。
ヒント 2: AI に十分なコンテキストを与える
AIは心を読むことができません。登録に問題があるとだけ言っていたら、全く関係のないところに変更されていたかもしれません。 「ユーザーが Gmail を使用してサインアップした後、背景には成功が表示されましたが、確認レターはメールボックスに受信されませんでした。」と言いたいとします。コンテキストが完全であればあるほど、AI の判断はより正確になります。
ヒント 3: 出力を理解することによってのみ、結果を検証できます。
AI によって生成されたコードには、私が遭遇した「ファイア アンド フォーゲット」電子メールの問題のように、隠れた問題が存在する可能性があります。そのコードを自分で書ける必要はありませんが、それが正しいかどうかを判断するためにコードが何をしているのかを理解できる必要があります。
ヒント 4: 小さなステップで高速に実行し、ステップごとに繰り返す
すべての機能を一度に実行しようとしないでください。まずコアの登録プロセスを実行し、アクティブであることを確認した後、電子メール通知、バックグラウンド管理、チケット タイプの設定などの高度な機能を追加します。ひとつの間違いが大きな混乱につながることがないように、すべてのステップがテスト、検証、修正されます。
Tip 5: Establish your own debugging thinking
バグに遭遇したときは、落ち着いて次のように考えてください。「問題はどのレイヤーにあるのでしょうか? フロントエンドの表示の問題なのか、API ロジックの問題なのか、それともデータベースの問題なのか?」事前に判断してAIと議論すれば効率は大幅に向上します。
結論: 最良の学習は実戦です
このイベント登録システムは正式に開始され、登録を受け付けています。開発プロセス全体を通して、私はさらに確信を深めました。Vibe コーディングは本当に実現可能ですが、これは魔法ではありません。論理的思考、問題の説明能力、反復を続ける忍耐力が必要です。
▲自分だけのデジタル作品を作るVibeコーディング実践ワークショップ
自分の手で Vibe コーディングの力を体験したい場合は、私の Vibe コーディング実践ワークショップにぜひご参加ください。 3 時間のワークショップでは、ゼロから始めて、自然言語を使用して AI と連携し、独自の作品を作成します。プログラミングの知識は必要ありません。アイデアを持ってください。
未来はプログラムを書ける人のものではなく、AIと協働できる人のものです。
