【Flutter】SQLiteのデータをGUIで確認する方法|DriftとDevToolsを使ってみた

FlutterでSQLiteをGUI確認する方法

こんにちは、てぃさんです。

最近、個人開発でFlutterを使ったスマートフォンアプリの開発を進めています。

Flutterでの開発はまだまだ勉強中ですが、実際にアプリを作りながら新しい技術に触れるのは楽しいですね。さて、今回取り上げるのは Flutterアプリで利用しているSQLiteのデータを確認する方法 についてです。

アプリを開発していると、データベースに保存したデータが正しく登録されているのか、実際に中身を確認したくなることがあります。

Webアプリケーションの開発であれば、DBクライアントなどを使ってデータを確認することが多いと思います。

では、Flutterで開発しているスマートフォンアプリの場合はどうすればよいのでしょうか?調べてみると、Flutter DevToolsを使って比較的簡単に確認できることがわかりました。今回はその方法を紹介していきます。

目次

今回やりたいこと

今回の目的は、FlutterアプリでSQLiteに保存しているデータをGUIから確認することです。具体的には以下のようなことを確認したいと思います。

  • SQLiteに作成されているテーブルの確認
  • テーブルに登録されているレコードの確認
  • アプリから登録・更新したデータの確認
  • デバッグ時のデータ状態の確認

できれば、SQLiteのDBファイルを毎回取り出すような面倒な作業は避けたいところです。

FlutterのSQLiteについて

FlutterではローカルデータベースとしてSQLiteを利用することができます。

SQLiteは、MySQLやPostgreSQLのように別途データベースサーバーを起動する必要がなく、アプリ内でデータを管理できる軽量なリレーショナルデータベースです。

スマートフォンアプリでは、オフラインでも利用したいデータや端末内に保持しておきたい情報などの保存先として利用できます。

FlutterからSQLiteを操作する方法はいくつかありますが、今回開発しているアプリでは Drift というパッケージを利用しています。

Driftとは?

Driftは、DartやFlutterからリレーショナルデータベースを操作するためのライブラリです。

SQLiteを扱う際に、型安全なクエリの記述やデータの変更監視などをサポートしてくれます。

公式サイトはこちらです。

https://drift.simonbinder.eu

今回調べていて便利だと感じたのが、DriftにはFlutter DevTools向けの拡張機能が用意されていることです。

この拡張機能を使うことで、実行中のアプリが利用しているデータベースの内容をGUIで確認できます。

Flutter DevToolsを使ってSQLiteを確認する

それでは実際に確認してみます。

今回は以下の環境を前提とします。

  • macOS
  • Flutter
  • VS Code
  • iOS Simulator
  • SQLite
  • Drift

なお、今回の方法はDriftを利用しているアプリが対象です。

SQLiteを利用していても、sqflite や sqlite3 のみで実装している場合には、そのままDrift拡張機能を利用できるわけではありません。

1. Flutterアプリを起動する

まずはFlutterアプリをデバッグモードで起動します。

ターミナルから起動する場合は以下のコマンドです。

flutter run

複数のデバイスが接続されている場合は、対象デバイスを選択します。

アプリが起動したら、SQLiteを利用する画面まで操作しておきます。

2. Flutter DevToolsを開く

Flutterアプリを起動すると、ターミナルにFlutter DevToolsのURLが表示されます。

例えば以下のような出力です。

The Flutter DevTools debugger and profiler
is available at:
http://127.0.0.1:9100/...

表示されたURLをブラウザで開きます。

VS Codeを利用している場合は、コマンドパレットなどからDevToolsを起動することもできます。

Flutter DevToolsは、アプリのパフォーマンスやメモリ、ネットワーク、Widgetの状態などを確認できるデバッグツールです。

今回は、このDevToolsを使ってデータベースを確認します。

3. Drift拡張機能を有効にする

Flutter DevToolsを開いたら、拡張機能の設定を確認します。

Driftを利用しているプロジェクトでは、DevToolsにDriftの拡張機能が表示されます。

初回利用時は拡張機能が無効になっている場合があるため、有効化します。

手順は以下の通りです。

1. Flutter DevToolsを開く

2. 画面上部のdrift を探す

3. 拡張機能を有効(Enableをクリック)にする

4. 有効化すると、DevToolsにDriftのタブが表示されます。

Driftをすでに利用しているプロジェクトであれば、基本的にDB確認用の追加パッケージを導入する必要はありません。

4. SQLiteのテーブルを確認する

Driftタブを開くと、現在実行中のアプリで開かれているDriftのデータベースが表示されます。

対象のデータベースを選択すると、テーブルの一覧を確認できます。

今回の個人開発では、例えば以下のようなテーブルを利用しています。

テーブルを選択すると、保存されているレコードをGUIで確認できます。

アプリでデータを登録した後に、この画面でデータが正しく保存されているかを確認できるのは便利ですね。

特に、ローカルDBとサーバー間でデータを同期するようなアプリでは、端末側にどのようなデータが残っているのかを確認できるため、デバッグがしやすくなります。

なお、対象のデータベースが表示されない場合は、アプリ側でデータベースがまだ開かれていない可能性があります。

その場合は、データベースにアクセスする画面を操作してから再度確認してみてください。

DB Browser for SQLiteを使う方法もある

ここまではFlutter DevToolsを使った方法を紹介しましたが、SQLiteのデータを確認する方法はほかにもあります。

例えば、DB Browser for SQLite というGUIツールです。

公式サイトはこちらです。

https://sqlitebrowser.org

DB Browser for SQLiteは、SQLiteのデータベースファイルを開いて、テーブルやレコードを確認できるツールです。

SQLを実行することもできるため、普段からデータベースを操作しているエンジニアには使いやすいと思います。

ただし、iOS Simulator上のSQLiteを確認する場合には、アプリの保存領域にあるDBファイルを取得する必要があります。

そのため、開発中にデータを手軽に確認したいのであれば、今回紹介したDriftのDevTools拡張機能が便利だと感じました。

Drift DevToolsとDB Browserの比較

今回紹介した2つの方法を簡単に比較してみます。

開発中にデータを確認することが目的であれば、Drift DevToolsで十分なケースが多いと思います。

一方で、DBファイルを直接調査したい場合や、複雑なSQLを実行したい場合にはDB Browserも選択肢になります。

まとめ

今回は、Flutterアプリで利用しているSQLiteのデータをGUIで確認する方法について紹介しました。

FlutterでSQLiteを使った開発をしていると、データの登録や更新が想定通りに行われているのか確認したい場面があります。

そんなときに、わざわざSimulatorからDBファイルを取り出さなくても、Flutter DevToolsからデータを確認できるのは便利ですね。

特にDriftを利用している場合は、既存の開発環境から簡単に利用できるため、覚えておいて損はないと思います。

今回のポイントをまとめると、

  • FlutterではSQLiteをローカルDBとして利用できる
  • DriftにはDevTools向けの拡張機能が用意されている
  • 実行中のアプリのデータベースをGUIで確認できる
  • DBファイルを直接確認したい場合はDB Browserも利用できる

というところです。

まだまだFlutterについては勉強中ですが、今後も個人開発を進めながら、便利だと感じた技術や開発方法を紹介していきたいと思います。

それでは、また!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次