Codex アプリで作成したローカルLLM対応のAI Overview診断ツールに、SQLite + Prismaを使った診断履歴のDB保存機能を追加しました。
これにより、診断日時、入力本文の一部、総合スコア、評価サマリーなどを、ローカルのデータベースに保存できるようになりました。
この記事では、SQLiteとPrismaの基本、MVP(Minimum Viable Product)のDB保存に向いている理由、Next.jsアプリに組み込むときの考え方を初心者向けに分かりやすく解説します。
ローカルLLM対応AI Overview診断ツールに追加した機能
今回追加したのは、AI Overview診断ツールの「診断履歴」をDBに保存する機能です。
保存対象は、たとえば次のような情報です。
| 保存項目 | 内容 |
|---|---|
| 診断日時 | 診断を行った日時 |
| 入力プレビュー | どの記事を診断したか分かるようにする |
| 診断url | 診断ページのurl |
| スコア | 100点満点の診断結果 |
| サマリー | AIまたはルールベース診断による概要 |
もともとのMVPでは、診断結果は画面に表示されるだけで、履歴は残らない構成でした。
今回の改修では、この「DBなし」の状態から一歩進めて、診断結果をあとから見返せるようにしました。

SQLiteとは?
SQLiteは、軽量なデータベースです。
一般的なデータベースというと、MySQLやPostgreSQLのように、専用のデータベースサーバーを起動して使うイメージがあります。
しかし、SQLiteは基本的に1つのファイルとしてデータを保存できます。
たとえば、次のようなファイルが作られます。
prisma/dev.dbこの dev.db の中に、診断履歴のデータが保存されます。
SQLiteの大きな特徴は、次の3つです。
| 特徴 | 内容 |
|---|---|
| サーバー不要 | MySQLのようなDBサーバーを別途立てなくてよい |
| ファイルで管理できる | .db ファイルとして保存される |
| ローカル開発に向いている | MVPや個人開発で扱いやすい |
SQLiteはローカルの .db ファイルとして利用でき、開発や小規模アプリに向いている選択肢です。
参考:SQLite database connector | Prisma Documentation
Prismaとは?
Prismaは、Node.jsやTypeScriptでデータベースを扱いやすくするためのORMです。
ORM(Object-Relational Mapping:オブジェクト関係マッピング)とは、簡単にいうと「SQLを直接たくさん書かなくても、TypeScriptのコードからDBを操作しやすくする仕組み」です。
たとえば、通常のSQLでは次のように書きます。
INSERT INTO DiagnosisHistory (score, summary)
VALUES (82, 'FAQと根拠情報を追加すると改善できます');Prismaを使うと、TypeScript側では次のような形で書けます。
await prisma.diagnosisHistory.create({
data: {
score: 82,
summary: "FAQと根拠情報を追加すると改善できます",
},
});SQLを直接書かなくても、アプリのコードから直感的にデータを保存できます。
Prismaでは、schema.prisma というファイルにデータ構造を定義します。
参考:Prisma schema | Prisma Documentation
SQLite + Prismaを使うメリット

今回のAI Overview診断ツールのようなローカルMVPでは、SQLite + Prismaの組み合わせがとても使いやすいです。
理由は、次のとおりです。
| メリット | 説明 |
|---|---|
| ローカルだけで完結できる | 外部DBサービスを契約しなくてよい |
| セットアップが軽い | SQLiteはファイルベースで扱える |
| TypeScriptと相性がよい | Prisma Clientで型安全にDB操作できる |
| 将来の拡張に備えられる | 履歴検索、絞り込み、分析機能を追加しやすい |
| Supabaseなどへの移行も考えやすい | 最初はSQLite、後から本格DBに移す設計も可能 |
特に今回のツールは、Ollamaを使ってローカルLLMで動かす構成です。
そのため、DBもまずはローカルで完結するSQLiteにすることで、ツール全体の思想と合いやすくなります。
localStorage保存との違い
今回の改修前に、ブラウザの localStorage に診断履歴を保存する方法を行ってみました。
しかし、localStorage は手軽でしたが、本格的な履歴管理には限界がるので、SQLite + Prismaでの保存に切り替えました。
| 比較項目 | localStorage | SQLite + Prisma |
|---|---|---|
| 保存場所 | ブラウザ内 | DBファイル |
| 実装の手軽さ | とても簡単 | 少し準備が必要 |
| データ検索 | 弱い | 強い |
| 並び替え | 自前実装が必要 | DBで扱いやすい |
| データ件数が増えた場合 | 管理しにくい | 管理しやすい |
| 将来の拡張 | 限界がある | 拡張しやすい |
localStorage は「直近5件を画面に表示する」程度なら便利です。
一方で、次のような機能を追加したくなると、DB保存のほうが向いています。
- 過去の診断を一覧表示したい
- スコア順に並び替えたい
- URLごとの改善推移を見たい
- 診断結果を検索したい
- CSV出力したい
- 将来的にログイン機能を付けたい
つまり、localStorageは「一時的な履歴」、SQLite + Prismaは「アプリのデータ」として扱うイメージです。
今回のDB設計例
診断履歴を保存する場合、Prismaのモデルは次のような形にできます。
model DiagnosisHistory {
id Int @id @default(autoincrement())
createdAt DateTime @default(now())
inputPreview String
sourceUrl String?
totalScore Int
summary String
}それぞれの意味は次のとおりです。
| カラム | 意味 |
|---|---|
| id | 履歴ごとのID |
| createdAt | 診断日時 |
| inputPreview | 入力本文の先頭100文字 |
| sourceUrl | 診断対象URL |
| totalScore | 総合スコア |
| summary | 評価サマリー |
このように、保存したい内容を先にモデルとして定義します。
その後、Prisma Migrateを使って、実際のSQLiteデータベースにテーブルを作成します。
Prisma Migrateは、Prisma Schemaの変更に合わせてDBスキーマを同期し、マイグレーションファイルを管理する仕組みです。
参考:Prisma Migrate: Database, Schema, SQL Migration Tool | Prisma Documentation
基本的な導入手順
Next.jsアプリにSQLite + Prismaを追加する場合、基本的な流れは次のようになります。
1. Prismaをインストールする
npm install prisma @prisma/client2.Prismaを初期化する
npx prisma init --datasource-provider sqliteこれにより、主に次のファイルが作られます。
prisma/schema.prisma
.env3.DB接続先を設定する
.env にSQLiteの保存先を指定します。
DATABASE_URL="file:./dev.db"SQLiteでは、file:./dev.db のような形式でローカルDBファイルを指定します。
参考:SQLite database connector | Prisma Documentation
4.schema.prismaにモデルを書く
model DiagnosisHistory {
id Int @id @default(autoincrement())
createdAt DateTime @default(now())
inputPreview String
sourceUrl String?
totalScore Int
summary String
// SaaS化する場合は、ここに userId と User リレーションを追加する。
}5.マイグレーションを実行する
npx prisma migrate dev --name initこれでSQLiteにテーブルが作成されます。
6.Prisma Clientを使ってデータを保存する
Next.jsのAPI RouteやServer Actionなどから、次のように保存できます。
await prisma.diagnosisHistory.create({
data: {
inputPreview: inputText.slice(0, 100),
score: result.score,
summary: result.summary,
mode: diagnosisMode,
url: targetUrl,
},
});これで、診断が実行されるたびに履歴をDBに保存できます。
AI Overview診断ツールとの相性
今回のAI Overview診断ツールでは、すでに次のような診断情報を生成しています。
- 総合スコア
- 評価サマリー
- 項目別スコア
- 改善すべき点
- 具体的な改善提案
- FAQ案
- メタディスクリプション案
このうち、最初はすべてを保存する必要はなく、MVPとしては、まず次の4つだけ保存すれば十分です。
- 診断日時
- 診断ページURL
- 入力本文の先頭100文字
- 総合スコア
- 評価サマリー
この4つがあれば、「いつ、どの記事を診断し、何点で、どんな評価だったか」をあとから確認できます。
今後は、必要に応じて次の情報を追加する予定です。
- 改善提案
- FAQ案
- メタディスクリプション案
- 項目別スコア
- 診断対象URL
- 記事ジャンル
- 使用したOllamaモデル名
SQLite + Prismaで注意すること
SQLite + Prismaは便利ですが、注意点もあります。
本番公開用の大規模DBではない
SQLiteはローカル開発や小規模アプリには向いていますが、多人数が同時に使う本格的なWebサービスでは、PostgreSQLやMySQLなどを検討したほうがよい場合があります。
今回のように「自分のローカル環境で診断履歴を保存する」用途なら、SQLiteは十分に使いやすい選択肢です。
DBファイルをGit管理しない
dev.db のようなDBファイルは、基本的にGitに含めないほうが安全です。
.gitignore に次のように追加しておくとよいでしょう。
prisma/dev.db
prisma/dev.db-journal診断本文やURLなど、場合によっては個人情報や未公開記事の内容が含まれる可能性があるためです。
後からSupabaseへ移行する場合は設計に注意する
最初はSQLiteで作り、後からSupabaseに移行することも可能です。
ただし、SupabaseはPostgreSQLをベースにしているため、完全にそのまま移せるとは限りません。Prismaのモデル設計をシンプルにしておけば、後からPostgreSQL向けに調整しやすくなります。
たとえば、最初から次のような点を意識しておくと移行しやすくなります。
- モデル名・カラム名を分かりやすくする
- JSON保存に頼りすぎない
- 日付、URL、スコア、本文プレビューを分けて保存する
- 診断結果の全文保存が必要かどうかを整理する
今回の改修でできるようになったこと
SQLite + Prismaを追加したことで、AI Overview診断ツールは単なる「その場限りの診断ツール」から、「診断結果を蓄積できるツール」に変わりました。
これにより、次のような使い方ができます。
- 過去の診断結果を見返す
- 記事改善前後のスコアを比較する
- よく低評価になる項目を把握する
- 記事ジャンルごとの傾向を調べる
- AIO対策・SEO改善の記録として活用する
特にAI Overview対策では、1回診断して終わりではなく、記事を改善しながら何度も見直すことが重要です。
DB保存機能があると、改善前と改善後の違いを記録できるため、記事改善の作業がかなり進めやすくなります。
GitHubのファイルで実際に試せます
この記事で紹介したAI Overview診断ツールは、GitHubに公開したリポジトリから実際に試すことができます。
SQLite + Prismaによる診断履歴の保存機能も含めたサンプルとして公開しています。
リポジトリはこちらです。
git clone https://github.com/omo-y/AI-Overview.git
cd AI-Overview
セットアップ方法と起動手順は、リポジトリ内のREADMEに記載しています。
READMEの手順に沿って進めることで、ローカル環境でAI Overview診断ツールを起動し、診断結果がSQLiteに保存される流れを確認できます。
まとめ
SQLite + Prismaは、ローカル環境で動くNext.jsアプリにDB保存機能を追加したいときに、とても扱いやすい組み合わせです。
SQLiteはサーバー不要で、1つのDBファイルとしてデータを保存できます。Prismaを使えば、TypeScriptから型安全にDB操作ができ、SQLを直接書かなくても診断履歴を保存・取得できます。
今回のAI Overview診断ツールでは、もともと「DBなし」のMVPとして作成していましたが、SQLite + Prismaを追加することで、診断履歴を蓄積できる実用的なツールに近づきました。
最初は、診断日時、URL、入力本文の先頭100文字、総合スコア、評価サマリーだけを保存するシンプルな設計で十分です。
そこから、URL別の履歴、スコア推移、改善提案の保存、CSV出力、Supabase移行などへ拡張していけば、AI Overview対策やSEO記事改善に使える本格的な診断管理ツールへ育てていけます。
関連記事

