🔥

AI駆動開発でブログサービス作った話

に公開
TypeScript
Cloudflare
zennfes2025ai
zennfes2025free
tech

はじめに

ブログサービス Born を作りました!
ベータ版ですが、是非使ってみて下さい!
https://born-docs.com/

今回は Born の開発について書いていこうと思います。

今回の開発の経緯

元々、個人開発で Richmd というMarkdown パーサー&HTML変換ライブラリを作っていました。
https://github.com/richmd/react

しかし、これは開発者向けのもので、やっぱり、ユーザにこの機能を使ってもらう媒体がほしいなということで、今回ブログサービスを開発しようと思いました。

企画・開発からリリースまで

企画

この内容を Zenn に書くのは、大変おこがましいので恐縮なのですが、、、、、
最近のブログサービスは、サービスブランドが全面的に出ている感じがしており、一昔前は自由なデザインで個人が提供するコンテンツという側面から、今はナレッジサービス的な運用をしてるものが結構多くなってきたと思います。
その中で、ブログ自体のデザインは統一されているものが多いので、自分でデザインをカスタマイズできる機能を追加したいなと思いました。

技術選定

今回のテーマとしては「実験的」ということを意識し、今まで触ったことがない技術も取り入れて、選定しました。

フロントエンドはいつも使ってる Next.js を選定しましたが、バックエンドは色々試行錯誤して、リアーキテクチャしました。
最初は tPRC + Next.js API Routes でサーバサイド実装していましたが、デプロイ後のレスポンスが遅く、OGP画像生成を実装が難しい問題が起きていたので ISR (Incremental Static Regeneration) の選択が取れるように、API Routes をやめて、Hono で分割し、モノレポで動かすようにしました。

↓ISR についてはこちらの記事がわかりやすいです。
https://zenn.dev/nextbeat/articles/about-the-isr

インフラ側ですが、今回は Cloudflare をフルに使うことにしました。
D1で DB構築することになり、当初は Prisma を使用して、DBを構成していましたが、D1 の場合は Wrangler で管理するため、Prisma の連携は相性悪く、マイグレーション管理が複雑になってしまったので、より管理がしやすい Drizzle ORM に移行しました。

メールサーバーは予算がローコストな Resend を使いました。

https://resend.com/

結果として、最終的にはこのような構成になりました。

最終的な構成

  • Framework
    • Next.js 15 (App Router)
  • API
    • Hono
    • Cloudflare Workers
  • ORM
    • Drizzle ORM
  • DB
    • Cloudflare D1 (SQLite)
  • Storage
    • Cloudflare R2
  • Mail Server
    • Resend
  • Deployment
    • Vercel (Client)
    • Cloudflare Workers (API)

開発

今回の開発の特徴として、Claude Code という AI に大半のコーディングを任せました。
今回は AI 駆動開発の知見を増やそうと思い、自分は作業指示や素材の作成、QAにほぼ徹しました。
また、リリース前だったこともあり、まずは初速のスピードを最優先する開発をしました。

良かったところ

めちゃめちゃ、複雑な機能でも、さっと早く実装できるのは良いなと思いました。
通常であれば、時間かかりそうな部分でも、どんどん開発してくれるのは、かなり強いなと思いました。

今回はログイン周りもセキュリティ面を強化しており、レート制限によるアクセスブロックやメールアドレス認証も取り入れましたが、AIパワーでかなり早い時間で実装できてるので、そこは結構良かったです。

image
(↑こういう複雑なフォームも短時間で実装してくれる)

特にリアーキテクチャ等の大工事系は、指針が決まっていれば、かなり助かるなと思いました。
(実際 Storybook 実装等で工数削減できた)

イマイチだったところ

反面、個人的にはイマイチな部分が目立ちました。

  • 稀に長考や想定外のエラーが出て、どんどん修正重ねて、複雑でわかりにくいコードになってしまう
  • マイグレーション実行失敗した時に、「DBリセットします!」というセリフとともに、破壊的なコマンドを実行しようとする
  • バグコードをたまに出す

今回は、AIのアウトプットを全て目を通していましたが、結構危なっかしいコードとか、特にDB周りの実装(SQL,マイグレーション)は、結構破壊的なクエリ書いてたりと、よく確認しないと事故るようなコードもちょいちょいあるので、精神的なエネルギーは個人で実装した時と同じかそれ以上に消耗しました。AIでは無理そうな場合は、自分の方で修正してました。

正直、これは個人的な感想にはなりますが、まだAIに完全にハンドルを渡すのは難しいなと思いました。
作業指示も細かく、リストアップして指示を出していましたが、やはり全てのアウトプットにエンジニアが目を通す必要がありそうです。

後は、コード品質はおざなりになってしまいがちになるので、設計面やコード品質など、エンジニアである程度フォローする必要はあるなと思いました。

リリース(デプロイ環境について)

デプロイですが、今回は本番環境だけでなく Staging 環境も用意して、業務さながらの流れにしました。
上記でも説明した通り、Vercel + Cloudflare Workers を使って、ブランチ監視で自動デプロイするようにしました。

デプロイの挙動について

  1. main(Staging 環境の場合は staging) にマージする
  2. マージ後、vercel + Cloudflare Workers のデプロイが自動でトリガーされる

(デプロイ作業は、かなり楽でしたが、現状の課題として、DBマイグレーションの実行が手元でコマンド実行してる状態なので、CD等で自動化できないか、現在調査中です。。)

あと、デプロイ後に staging 環境や本番環境だけで起こるバグもあり、デプロイ後のQAがかなり大変でした。(追々、E2Eで自動化したい。。)

今後の開発について

まだまだ不足してる機能とか多いので、機能拡充をしていきたいと思います。
今回は、スピード最優先でしたが、設計面での修正が必要な部分が多いので、AIパワー使って、改修作業を進めていければと思います。

最後に

久々にガッツリ個人開発しましたが、やっぱり、個人開発は楽しいですね!
今後も色々作っていきたいです!

Discussion