個人開発のWebアプリケーション

マンガPick

漫画を探し、読書状況を記録し、作品を評価した履歴をもとに、次に読む一冊を提案するレコメンデーションサービス。AIバイブコーディングを取り入れ、企画から本番運用までを個人で担っています。

プロジェクト概要

推薦機能だけを試すデモではなく、作品探しから読書記録まで継続して使えるサービスを目指しました。

漫画を推薦するには、ユーザーの好みを捉える仕組みに加えて、検索対象となる作品データ、正確な書誌情報、評価や読書記録を残せる導線、推薦理由の表示が必要です。

フロントエンドだけでなく、データベース、推薦ロジック、認証、監視、デプロイまでを含むWebサービスとして設計しました。

個人開発でこの範囲を継続するため、コードを直接書く作業にはAIエージェントを活用し、私は要件整理と判断を担う開発方法を採用しました。

漫画を探し、作品を知り、読書体験を記録し、次の一冊を見つける機能を一つにまとめました。

漫画一覧では、キーワード、作者、ジャンル、タグ、年代、読書ステータスを組み合わせて検索できます。

作品詳細では、書誌情報、あらすじ、評価、レビュー、読書ステータス、購入先を確認できます。

マイページでは、いいねした作品、投稿したレビュー、読書状況に加え、それらを反映したおすすめ作品をまとめて表示します。

コードを直接書く作業の大部分をAIエージェントに任せ、私は要件整理、優先順位付け、採否判断に集中しました。

実装に入る前に、解決したい課題、受け入れ条件、非対象範囲、本番反映前に停止する条件をGitHub Issueへ整理します。

AIエージェントは、既存コードの調査、実装方法の比較、コーディング、テスト、データ監査を担当します。

実装担当とは別のAIエージェントに批判レビューを依頼し、指摘を反映してからStagingで検証します。

AIエージェントの出力を無条件で採用する方法ではありません。AIエージェントに差分、テスト結果、Preview、本番ログを確認させ、その結果をもとに採否と本番反映を判断します。

生成AIの応答を検索結果や推薦結果としてそのまま表示せず、登録済みの作品データに結び付け、結果と理由を確認できる仕組みを実装しました。

AIテーマ検索では、ユーザーが入力した文章を埋め込みベクトルへ変換し、pgvectorによる類似度検索を行います。

利用上限または外部APIの障害が発生した場合は、切り替えの理由を表示し、通常検索へ切り替えます。

パーソナライズ推薦では、いいね、評価、読書ステータスと、作品のジャンル、タグ、埋め込みベクトル、人気度を組み合わせます。

推薦理由は大規模言語モデルに生成させるのではなく、スコアの内訳から規則に沿って生成するため、同じ入力から結果と理由を再現できます。

公開後に見つかった使いにくさや性能上の問題を課題ごとにIssueへ整理し、実画面とログを確認しながら改善しました。

漫画一覧は、検索、絞り込み、並び替えを一画面で扱える構成へ刷新し、作者名検索にも対応しました。狭い画面でも操作しやすいUIへ調整しました。

データベースの応答を待つ間に長く表示されていたスケルトンは、Server Componentを分割し、データ取得が完了した領域から順に表示する構成へ変更しました。

マイページの推薦は、複数回に分かれていたデータベースへの問い合わせを集約し、結果を待つ間も処理中であることが分かる表示へ改めました。

認証機能は、ユーザー名とパスワードによる登録に加え、メール確認、パスワード再設定、既存セッションの失効まで扱える構成へ拡張しました。

作品データを検証し、確認済みの変更だけを本番データベースへ反映する仕組みを整えました。

書誌情報は、楽天、openBD、国立国会図書館、Wikipediaなど複数の情報源を突き合わせ、出典、取得結果、判断根拠を成果物として保存します。

本番データは、スキーマ検証、dry-run、差分確認を経て単一のトランザクションで反映しています。

AIバイブコーディングでは、コードを書く量よりも、何を作るか、どの結果を採用するかという判断の質が問われました。

AIエージェントは短時間で多くの実装案を出せますが、解くべき課題、受け入れ条件、運用上の制約までは自動的に決まりません。

人間が要件と停止条件を定め、AIエージェントが実装と検証を進め、その結果を人間が確認して判断する流れで開発しました。

この方法により、コードを直接書く作業をほぼAIエージェントに任せながら、検索、推薦、認証、データ運用を備えたサービスを継続して改善しています。