SQLite + Prismaとは?ローカルLLM対応AI Overview診断ツールにDB保存機能を追加して分かったこと

スポンサーリンク
この記事は約10分で読めます。

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 + Prismaでの診断履歴の追加

SQLiteとは?

SQLiteは、軽量なデータベースです。

一般的なデータベースというと、MySQLやPostgreSQLのように、専用のデータベースサーバーを起動して使うイメージがあります。
しかし、SQLiteは基本的に1つのファイルとしてデータを保存できます。

たとえば、次のようなファイルが作られます。

この 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では次のように書きます。

Prismaを使うと、TypeScript側では次のような形で書けます。

SQLを直接書かなくても、アプリのコードから直感的にデータを保存できます。

Prismaでは、schema.prisma というファイルにデータ構造を定義します。

参考:Prisma schema | Prisma Documentation

SQLite + Prismaを使うメリット

SQLite + Prismaを使って、AI Overview診断ツールの診断結果を保存し、履歴として表示する流れを示した図解。API Route、Prisma Client、SQLiteの関係を説明している。

今回のAI Overview診断ツールのようなローカルMVPでは、SQLite + Prismaの組み合わせがとても使いやすいです。

理由は、次のとおりです。

メリット説明
ローカルだけで完結できる外部DBサービスを契約しなくてよい
セットアップが軽いSQLiteはファイルベースで扱える
TypeScriptと相性がよいPrisma Clientで型安全にDB操作できる
将来の拡張に備えられる履歴検索、絞り込み、分析機能を追加しやすい
Supabaseなどへの移行も考えやすい最初はSQLite、後から本格DBに移す設計も可能

特に今回のツールは、Ollamaを使ってローカルLLMで動かす構成です。
そのため、DBもまずはローカルで完結するSQLiteにすることで、ツール全体の思想と合いやすくなります。

localStorage保存との違い

今回の改修前に、ブラウザの localStorage に診断履歴を保存する方法を行ってみました。

しかし、localStorage は手軽でしたが、本格的な履歴管理には限界がるので、SQLite + Prismaでの保存に切り替えました。

比較項目localStorageSQLite + Prisma
保存場所ブラウザ内DBファイル
実装の手軽さとても簡単少し準備が必要
データ検索弱い強い
並び替え自前実装が必要DBで扱いやすい
データ件数が増えた場合管理しにくい管理しやすい
将来の拡張限界がある拡張しやすい

localStorage は「直近5件を画面に表示する」程度なら便利です。

一方で、次のような機能を追加したくなると、DB保存のほうが向いています。

  • 過去の診断を一覧表示したい
  • スコア順に並び替えたい
  • URLごとの改善推移を見たい
  • 診断結果を検索したい
  • CSV出力したい
  • 将来的にログイン機能を付けたい

つまり、localStorageは「一時的な履歴」、SQLite + Prismaは「アプリのデータ」として扱うイメージです。

今回のDB設計例

診断履歴を保存する場合、Prismaのモデルは次のような形にできます。

それぞれの意味は次のとおりです。

カラム意味
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をインストールする

2.Prismaを初期化する

これにより、主に次のファイルが作られます。

3.DB接続先を設定する

.env にSQLiteの保存先を指定します。

SQLiteでは、file:./dev.db のような形式でローカルDBファイルを指定します。

参考:SQLite database connector | Prisma Documentation

4.schema.prismaにモデルを書く

5.マイグレーションを実行する

これでSQLiteにテーブルが作成されます。

6.Prisma Clientを使ってデータを保存する

Next.jsのAPI RouteやServer Actionなどから、次のように保存できます。

これで、診断が実行されるたびに履歴を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 に次のように追加しておくとよいでしょう。

診断本文や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記事改善に使える本格的な診断管理ツールへ育てていけます。

関連記事

Codex アプリで作る、ローカルLLM対応のAI Overview診断ツールMVP
Codex アプリを使って、ローカルLLMとルールベース診断で作るAI Overview診断ツールMVPの開発手順を解説。Next.js、TypeScript、Ollamaを使い、本文入力とURL診断に対応した実装内容を紹介します。