ちまたでは、”Vibe Coding（ノリのコーディング）”というキーワードが飛び交ってますね。「すごいよね」という肯定派と「めちゃくちゃなコード書かれちゃって、かえってお守りが大変」という否定派がいるように思います。なぜ、そうしたVibe Codingの記事について興味があったのかというと、実は、私は、アプリを作りたいとずっと思っていたのです。
いっとき（i-modeの時代）は、地元のバスの時刻表を確認できるアプリを作ろうと思いました。まだ、駅探やナビタイムにバス時刻表の機能がなかった時代です。バス時刻表アプリを作れば、地元の人がたくさん利用するはずだから地域のお店の広告が取れるんじゃないか？などと考え、地域のバス停を自転車で回って、時刻表を写メしまくって、収集したりしたものです。
が、プログラミングができないため（おまけにそのころはSQLも書けなかったし）、形にはならず、アプリ開発は果たせぬ夢でした。
そんなところに、生成AIが登場し、Vibe Codingでアプリが開発できるんじゃないか？と思った私（ノンプログラマー）は、生まれて始めてアプリを開発しました。この記事はその顛末記です。
開発したアプリは意外とフルスペック
3`週間ほどで完成したのが、以下のアプリです。マーケターとしてのSQL記述スキルをテスト形式で診断できるアプリです。
機能の詳細については後述しますが、以下の機能を実装するにあたり、複数のAPI連携を利用しており、初回に作るアプリとしては、まあまあ本格的なフルスペックとでも呼べるようなアプリとなりました。
- 課金の仕組みまで実装した
- 受験生が記述したSQLをBigQueryに投げて、戻ってきた結果テーブルを正解の結果テーブルと比較して正誤判定している
- 回答提出後、受験生の回答内容をGeminiに投げて「AI講評」として出力している
ちなみに、このアプリの技術スタック（←この言葉も、アプリを開発して始めて知りました^^;）は以下の通りとなっています。
え、アプリ作ろうと思った気持ちが萎えちゃう？
大丈夫です。私も、開発を開始するときまでは、ホスティングサービスを使って、PHPでプログラムし、データベースは、そこに付随するMySQLで構成しようと思っていたくらいですから。（で、その考えは、最初のGeminiとの会話の中で「古い！」と一喝されました^^;）
技術スタック
- 開発支援（AI）：Gemini（設計の相談、実装案の提案、コードレビュー補助などを行う）
- 言語：TypeScript / JavaScript（アプリの動きや処理内容を記述する“プログラムの言葉”）
- フレームワーク：Next.js（Webアプリの土台。画面表示やAPIなどを効率よく作る枠組み）
- 開発環境（エディタ/IDE）：Cursor（コードを書く・修正する・補完やAI支援で開発を進める作業場）
- ソースコード管理：GitHub（コードを保存・履歴管理し、共同作業やレビュー、公開/共有の基盤にする）
- ホスティング（デプロイ）：Vercel（作ったアプリをインターネット上に公開し、動かす場所）
- データベース：Neon（PostgreSQL）（ユーザー情報や設定、履歴などを保存するデータ置き場）
- ORM（DBアクセス）：Prisma（アプリからデータベースを安全・簡単に読み書きするための橋渡し）
- SQL検証（実行環境）：BigQuery（SQLを実行して、受験者のSQLの正誤を判定する場）
- 講評生成（AI）：Google Gemini（受験生の回答SQL・設問・正解SQLなどを入力として渡し、回答内容に応じた講評文を生成して返す）
- 課金（決済）：Stripe（クレジットカード決済やサブスク課金を処理する仕組み）
開発時の流れを紫、アプリ運用時の流れをオレンジで表現した模式図は以下の通りです。
アプリの仕様
また、アプリの仕様は以下の通りです。つまり、上記の技術スタック（アプリを開発するための環境や、利用したシステム一式）を利用すれば、以下の仕様は実現できる。と考えていただいて良いと思います。
- 認証とマイページ：Google認証のみを使ったログイン機能を実装しています。個人が特定できるので、マイページも提供しています。
- 出題：レベル1から5に分けた問題群の中から、レベル1を2問、レベル2を2問、、、と、合計10問、ランダムに出題されます。それぞれのレベルで複数の問題を用意しており、その組み合わせは4000万通りになりました。
- 正誤判定：受験者の書いた回答SQLを判定するのではなく、回答SQLをBigQueryに投げて、戻ってきた「結果テーブル」があらかじめアプリに登録しておいた正解SQLが戻す「結果テーブル」と合致しているかどうかで正誤判断しています。
- 支払い/受験権管理：お支払いを済ませてくれたユーザー（受験者）には「受験権」を付与し、テスト開始後にそれが消費される仕様としました。
- 合格証書/成績証書の発行：80点以上取った人には「合格証書」を、それ未満だった人は「成績証明書」をPDFで発行するようにしました。
- AIによる講評：出題した内容と、受験者の回答SQLと、正誤を生成AI（Gemini）に投げて、「講評」をもらう仕様を組み込みました。
- 管理画面：受験者側からは見えませんが、アプリの稼働を確認する機能、支払いの完了状況を確認する機能、受験状況を確認する機能などをもった管理画面を開発しています。
アプリを開発した所感と苦労話
以下がアプリを開発してみた所感と苦労話です。
簡単だし、楽しい
まず、最初の所感は、「簡単だし、楽しい。」です。人間側は、「こういうページを作ってほしい。」「これこれこういう動作をする機能を実装してほしい」と定義して、Cursor（開発環境）のチャット欄に入れるだけです。
作ってくれた機能やページは、テストして、違和感あるところも自然言語で指示を出すと修正してくれます。本当にプログラミングスキルはゼロでいいんです。
例えば、開発中、実際に、
「一度テストを開始した受験生が、バックボタンを押すと初期画面に戻れてしまう。もう一度テスト開始ボタンを押すと、先程見ていたのとは別の問題が出題される」
という事象がありました。これはとても良くないですね。そこで、Cursorに修正を依頼します。実際にはこんな感じ。
「どのように解決するか？」については、私は指示していません。実際、どうやるかは分からないからです。でも、何が正しい挙動なのかは分かっているので、それを伝えていますね。すると、Cursorがよしなに修正してくれる。というわけです。
すごく簡単で、すごく楽しい。
Error続きで苦しい
すごく簡単で、楽しいとはいっても、もちろん、苦労もあります。自分でプログラミングしていないので、エラーが出た時に、解決の方向性も、具体策も思いつかない無力感。そして、「あれ？このアプリ、完成しないんじゃないの？」という恐怖感。その2つは苦しかったです。
以下は、デプロイ（Vercelという、アプリをホスティングしてくれているサービスのサーバーに、修正したコードを送り込んで、アプリとして実行可能な状態にする作業）のログなんですが、何度も、何度もエラーがでています。デプロイが成功しない。ということはアプリとして動かない。ということです。
もちろん、修正しないまま、同じコードを何度もデプロイしているわけではありません。デプロイを繰り返すということは実際にCursor側で修正もしているんです。なので、
「（機能なり、画面なりを）開発する→デプロイする→エラーが出る→エラーメッセージを伝えて修正を指示する→修正したからデプロイしてみてと言われる→デプロイする→エラーが出る→もとに戻る」
の繰り返しです。これは苦しかった。
で、結局、アプリがローンチできたということはエラーは解消したのですが、どうやったのかというと、Cursorに修正を頼むのを一旦やめて、エラーメッセージを、Geminiに投げました。
「こんなエラーが出ていて、Cursorが修正に苦労しています。Errorが連続して、直る気配がないのですが、あなたなら、以下のエラーを見て、Cursorにどんな指示をしますか？」
みたいな感じです。
すると、Geminiがドンピシャな回答をくれたんですね。Cursorが煮詰まってしまったところ、岡目八目的にGeminiが助け舟を出す。
岡目八目ってAIにもあるんだwww
収益的にはほろ苦
マーケターとしてのSQLスキルを客観的に診断したいというニーズは一定量あると思うので、課金型のアプリにしたのですが、収益的にはほろ苦ですね。お金を稼ぐのは大変。
アプリの完成後1週間での収益は以下の通りです。Stripeを使うと簡単に割引クーポンが作れるので、売価がまちまちになっています。
最初に買ってくれたお客さんは、、、自分。えぇ、テスト目的で買いました。www
まぁ、収益は後から付いてくるものだと思いますし、収益以外で、ものすごく大きな学びがあったので、アプリ開発の体験はすごく良かったです。この経験が財産になった。。。という肌感があります。また、今後、別のアプリも作りたいなというモチベにもなってます。さらに、このアプリができたんなら、別のアプリもきっとできるよね。という自信にもなりました。
皆さんも、課金するかどうかはともかく、自分のちょっとした不便を解決するようなアプリを作ってみるといいんじゃないかな？
企画して、実際に作って、ローンチする、アプリをゼロから作り切るという体験を通じて、私がそうであったように、あなたにも学びは絶対にあると思いますし、（ちょっといやらしいですけれど）、以下のような点で、自分のキャリア上もプラスだと思います。
- どこかの会社に就職や転職する上で、AI開発でアプリを開発した実績、開発意図や、苦労話のエピソードは興味を引くはず
- 「AIを使いこなす能力」として、画像を作ったり、動画を作ったり、140字小説を作ったり、議事録を作成したり、スライドを作ったり、、、と比較的ライトな分野でアピールする人が多い（ように見える）中で、独自のAI活用リテラシーをアピールすることになる（かもしれない）
- ひょうたんから駒で、万一、収益があがればサラリーマンじゃなくても食っていけるかもしれない（かどうかの目処がなんとなくつく）
この記事を見て、アプリ作ったよ。という人がいましたら、ぜひ、Xで呟いてみてください。@kazkida のメンションを忘れずにね。