学習のためのサービスを自分が普段使わない言語でAIに作ってもらった

KANNAのバックエンド開発を担当している山下です。
AIを使いながら個人で開発したサービスについて、作る中での気付きなどを書き留めてみたいと思います。

成果物

https://learn-pm.vercel.app/

プロジェクトマネジメントについて学習できるWebサイトを作りました。
採点機能などもあり無料で使えますので、ぜひご利用＆フィードバックをお待ちしています。

(注意: こちらは山下が個人で開発したもので、アルダグラム社とは関係ありません)

きっかけ

KANNAの新しい機能として、経営層に向けたものを作ろうという企画が立ち上がりました。
それにあたり社内でプロジェクトマネジメントに関する勉強会があったのですが、自分の知識不足を痛感すると共に「プロジェクトマネジメントってなんか面白そう」という興味が湧いてきました。

本読んで勉強するでもいいけど、どうせなら気軽にどこでも見れて後で履歴を簡単に振り返りできる方がいいし、Webで作るなら自分以外の人も使えるほうがいいよな〜と思った結果、今回のサービスを作ることにしました。

また、ちょうどこちらの記事を読んだこともモチベーションになりました。
https://zenn.dev/yosashusaku/articles/perdev-matching-techselect

FullStack-TS という環境では作ったことがほぼないし、Vercelにバックエンド機能持たせるの良さそうと思ったので、自分にTSの知識あんまないけどAIの力でどこまで行けるか試してみたい！というのが動機です。

以下、大体時系列でやったことを書いていこうと思います。

アーキテクチャ

一つ前に作ったものはRails + Fly.ioでデプロイしてたんですが、これだとコールドから起動まで結構待たされるのが微妙だなーと思っていて、Vercelみたいにシュッと立ち上がるやつがいいなーと思っていました。(あと、Fly.ioはデプロイが手動)

なので、先ほどの記事に従って以下の構成で作っていくことにします。

開発環境

• フレームワーク: Next.js 14 (App Router)
• データベース: PostgreSQL 16 (Docker)
• ORM: Drizzle ORM
• 認証: Supabase Auth

本番環境

• ホスティング: Vercel
• データベース: Supabase (PostgreSQL)
• 認証: Supabase Auth
• デプロイ: Git Push to Deploy

と言っても、僕からは「SupabaseとVercelでやるのでいい感じに提案してくれ」とAIにお願いしたらこれがものの数分で開発環境が出来上がりました。
アカウント登録してAPIキーを渡したぐらいです。

開発の流れ

最近よくやるんですが、「最初にざっくり計画を立ててファイルに書かせる」これ結構重要ですね。
順番に沿って箇条書きすると、

1. 自分でコンセプト決めて、大まかな構想を書き出しておく
2. AIとのセッション開始時にこれを共有 (まだコードは書かない)
3. 相談しながらアーキテクチャを決めて環境を立ち上げてもらう
4. とりあえず最初の画面を出せるとこまで行く
5. 相談しながらプロダクトのゴールを決めて、7割これでいくぐらいの道筋をファイルに書き出す (後で変わることも考慮して厳密にしすぎない)
6. 順番に沿って実行していく

という感じです。これがあると自分もAIも迷子になりにくいですね。
適宜読み返しながら「次は何をやるんだっけ？」と質問して進めていく感じ。

アプリケーションの実装については、悩むようなところはほとんどなかったかと思います。
今回は本当にロジックを一つも触らず、全部AIにやってもらいました。

インフラに関しては自分で設定してくところがほとんどになりますが、そこもつまづくことなくできたかなと思います。
元々自分のブログをVercelでやってたりとかherokuやFly.io, Firebaseなどを触った経験があったのは大きかったかも。
とはいえ、AIが大体いい感じに指示してくれるんで今回のような規模なら全くの初見でも大丈夫そう)

Supabaseがめちゃくちゃ使い勝手良い

他のDB系のサービス使ったこともいくつかあったんですが、Supabaseは今回が初めて。これ大変いいサービスですね。
これだけでユーザー認証(メールアドレス管理) とDBが全部できちゃうし無料って最高すぎるだろという気持ちです。

こんな感じでER図がぐりぐり動かせたり、コンソールからすぐSQL投げれたり、ユーザビリティがめちゃくちゃいいです。

唯一不満としては、設定値がどこにあるか今ひとつ分かりづらいっていうぐらいでしょうか。

コンテンツの生成は試行錯誤だった

全体の構成は参考書を作るイメージでいて、見開きの左に内容、右にテスト、というイメージが頭の中にありました。
当初、講義内容や問題などはGPTにやってもらうつもりだったもののいざ出力させたらちょっとしょぼかったんですよね笑

コースの流れとか、項目の分解はGPTにやらせて、出てきたものをClaudeに読ませて講義内容・テストを出力させる方が上手くいきました。
あとは出たものを見ながら少しずつ改善していく感じです。 (出力させる -> 自分で違和感があったところは「こう直して」の繰り返し)

特に出題が素直すぎるのが微妙だな〜と思ってたんですが、「ひっかけ問題を作ってください」というプロンプトが効きました。

あと、最後の方で作ったコースはコンテンツが結構多くなってしまったため、まとめて出力しようとするとすごく時間がかかるようになってしまったんですよね。
これも分割したり並列で走らせるなどの工夫をするといいかもしれません。

今までそういうめちゃ時間かかるシチュエーションにあったことがなかったので、AIエージェントを放置して使うというのがピンと来てなかったんですが、確かにこれを上手く回せるようになれば色んなものが作り放題にはなるなと思いました。

(けどまあ、そんなに作りたいものある？っていう..笑 無限に発想が生まれる人が羨ましい)

マイグレーションが絡むと変なハマり方をする

これはもしかするとこのプロジェクト独特の話になっちゃうかもですが、いわゆるRailsのCoC的な制約は何もない状態でBE開発をしているので、データマイグレーションなどはClaudeにお任せ適当な感じでやっていました。

それに加えて、進めていくと「教材の見栄えをこうしたい」「解答の方式をちょっと変えたい」みたいなところで行ったり来たりしていたんで、最後にデプロイかけて本番でチェックした時になんか変だな？みたいなことに。
加えて、データをDBに入れるときもエスケープが上手く効かせられてなくてハマるみたいなことがあったので、この辺は億劫せずに 「上手く進ませるためのルール」をきちんと人間側から提示して守らせる方がスムーズに進められそう な気がします。

また、指示するときに 「わからない部分があったら聞いてください」はこまめに伝えるべき だなと思いました。
これを言わなかったがために前提条件の理解のために数分以上スタックしてるみたいなことがあったので。
すでに運用されてるSaaSの開発だとあんまりこういうことは起こりにくいかなと思います（改修する範囲が狭かったり、前提となる情報が潤沢にあったりなので)。

逆にフロントエンド側の開発は何一つ引っ掛かりなく終われましたね。
やりたいことが明確で、型も使える言語だとちょっとした指示にもササっと対応してくれるし流石だなと。
スタックがNext.jsなのでLLMが知識を豊富に持っていそうな雰囲気もあります。
心なしかRailsモノリスで作ったプロダクトよりデザインもかっこいい気がする笑

デプロイしてみて

やっぱりVercelはいいですね！Pushしたらデプロイ終わって反映後の状態がすぐ見れるのはすごく体験がいいなと改めて思いました。
また、supabaseでレコードいじるとささっと見れるのもいいなと。このスタック本当に使いやすいです。

めちゃくちゃ複雑なロジックを書くのでなければもうこの環境でやってくのが個人開発としては一番楽かもな〜とも思っています。

まとめ

所要時間を整理すると。。。

• 構想約30分
• 事前の技術的調査に30分（Vercel自体には慣れていたので少なく済んだ面はある）
• 実際に作っている時間が2日ぐらい
• デプロイ後に色々やり直しが数時間

という感じなので、トータルで実質3日ぐらいかなと。
AIがいれば何でもすぐ作れちゃう時代になったんだな〜という実感がありますね。

特に今回はプログラムコードは全く触ってません。
本当に一箇所もいじってなくて、画面から操作したりDBの中を見て「ここがおかしい」という指摘はしたけど、修正は全部Claudeにお願いしました。
こうなってくると 自分がどの言語に特化したエンジニアか？というのは作る上で全く関係ない なと実感しました。(私は普段Railsで開発している)

一方で、インフラ側がどう動いているか、DBが今どういう状況か、どんな感じで認証のフローを進めるかというアーキテクチャの部分はある程度理解している上での話にはなります。

立て続けに二つゼロからの個人開発をしてみて、AIをどう動かすと効率的に進められるのか？の知見が自分のなかに少したまった気がします。
すでに色んなとこで言われての通り、コンテキストの渡し方やルール設定を上手く使いつつ、「自分の中ではこうするつもりだったけど、今見ててこう変えたくなった」のタイミングをいい感じに使いこなしていくことで、 企画からリリースまでのボトルネックを分散させていくのがAI時代の開発 なのかもしれません。

とかカッコつけて書きましたけどもうちょっとちゃんと言語化しないとですね笑
引き続き作りながら考えたいと思います。

おまけ

ちょいちょい話に出てきた前回の開発はこちらです。
お陰様で好評いただいておりますので、ぜひ使ってみてください。

https://zenn.dev/ymstshinichiro/articles/e5c07ea3b3c8f5