FlutterアプリテンプレートへのCloud Firestoreの導入方法(hukusuke1007/flutter_app_template)

はじめに

Flutter アプリテンプレート hukusuke1007 / flutter_app_template に Firebase の Cloud Firestore（NoSQL クラウド データベース）を導入する方法を確認してまとめます。

私は Cloud Firestore を利用するのが初めてで、NoSQL も理解していない状態であるため、これを機に入門したいと思います。

hukusuke1007 / flutter_app_template について

flutter_app_template は初めて使ってみているのですが、Flutter + Firebase アプリのスターターキットになっており、サンプル機能がとても充実しています。序盤はコードリーディングしつつ Flutter の開発手法を学び、個人開発に移っていこうと思っています。

ゴール

README にある以下のインデックス設定をして、タイムライン機能を確認することです。

注意

タイムライン機能を確認するためには、Firestoreのpostsコレクションのindexを設定してください。

ゴールまでの一連の手順を記事にまとめます。

前提

hukusuke1007 / flutter_app_template の導入（git clone から flutter run まで）が完了していることが前提です。

1. Cloud Firestore のセットアップ

Firebase コンソールで Cloud Firestore のセットアップをします。

Cloud Firestore とは

Google Cloud インフラストラクチャ上に構築された柔軟でスケーラブルな NoSQL クラウド データベースを使用して、クライアントサイドおよびサーバーサイド開発用のデータを保存および同期します。

Firestore  |  Firebase

1-1. Firebase プロジェクトを開く

Firebase コンソールにアクセスし、プロジェクトを開きます。

1-2. Cloud Firestore の有効化

「Cloud Firestore」を選択します。

「データベースの作成」をクリックします。

「①名前とロケーションを設定する」では、

データベース ID は (default) 、

ロケーションは asia-northeast1 (Tokyo) に設定しておきます。

「②セキュリティルール」では、

開発環境用のプロジェクトには「テストモードで開始する」

本番環境用のプロジェクトには「本番環境モードで開始する」

を選択し、「作成」ボタンを押します。

プロビジョニングが終わったら、以下のページが表示されました。

2. インデックスの設定

一旦ゴールの再確認です。

注意

タイムライン機能を確認するためには、Firestoreのpostsコレクションのindexを設定してください。

現状は私にとって謎解きゲームみたいな状態なので、不明点を紐解きながら進みます。

インデックスとは

インデックスは、データベースのパフォーマンスにおける重要な要素です。書籍内のトピックをページ番号に対応付ける書籍の索引（インデックス）と同様に、データベースのインデックスはデータベース内のアイテムをデータベース内の場所にマッピングします。データベースにクエリが送信される際、データベースはインデックスを使用して、リクエストされたアイテムの場所をすばやく検索します。

Cloud Firestore のインデックスの種類  |  Firebase

該当のデータを探す際に、インデックスを参照することで効率的にデータの場所を探せる、ということですね。

Cloud Firestore のデータモデル

「コレクション」という用語もわからないため、Cloud Firestore のデータモデルを確認します。

Cloud Firestore データモデル  |  Firebase

Cloud Firestore のデータモデルは、「コレクション」の中に「ドキュメント」があり、ドキュメントにデータ（フィールド、サブコレクション）があります。

📁 コレクション
  └── 📄 ドキュメント
        ├── フィールド
        └── フィールド

例

📁 コレクション (例: posts)
  ├── 📄 ドキュメント (例: 4ao4L1TL4uk6Fqfwns3f)
  |     ├── postId: "4ao4L1TL4uk6Fqfwns3f"
  |     ├── userId: "fat4RsZAG1MBYDMymzuMPpIRdWg1"
  |     ├── text: "dekita!"
  |     ├── likeCount: 0
  |     ├── createdAt: 2024年6月23日 15:44:02 UTC+9
  |     └── updatedAt: 2024年6月23日 16:21:16 UTC+9
  └── 📄 ドキュメント (例: ltDcB3DFwQJJ4R1AtB6E)
        ├── postId: "ltDcB3DFwQJJ4R1AtB6E"
        ├── userId: "fat4RsZAG1MBYDMymzuMPpIRdWg1"
        ├── text: "dekiru?"
        ├── likeCount: 0
        ├── createdAt: 2024年6月23日 15:44:02 UTC+9
        └── updatedAt: 2024年6月23日 16:21:16 UTC+9
        

2-1. インデックスの作成

Cloud Firestore でのインデックス管理 |  Firebase

「インデックス」タブを選択し、「インデックスを作成」をクリックします。「複合」と「単一フィールド」がありますが、README のスクリーンショットには「複合」とありますので、「複合」にしておきます。

単一フィールド インデックスと複合インデックスとは

「単一フィールド インデックス」と「複合インデックス」について用語の確認をします。

Cloud Firestore のインデックスの種類  |  Firebase

Cloud Firestore では、単一フィールド インデックスと複合インデックスという 2 つのタイプがあります。

単一フィールド インデックス

• 特定の 1 つのフィールドを含む、コレクション内のすべてのドキュメントの並べ替え済みマッピングを保持する
• 単一フィールド インデックスの各エントリには、ドキュメント内の特定のフィールドの値と、そのドキュメントのデータベース内での位置が記録される

複合インデックス

• インデックスを作成するフィールドの順序付きリストに基づいて並べ替えられた、コレクション内のすべてのドキュメントのマッピングが格納される

2-2. インデックスの構成

コレクション ID に posts を入力します。

インデックスを作成するフィールドには以下を指定します。

• フィールド：userId、モード：Ascending 昇順
• フィールド：createdAt、モード：Descending 降順
• フィールド：__name__、モード：Descending 降順

クエリのスコープは コレクション グループ を選択します。

しばらく待つと、ステータスが「ビルド中…」から「有効」に変わりました。

複合インデックスの設定は完了しました。

動作確認します。

flutter run --debug --dart-define=FLAVOR=dev

タイムライン機能を確認します。

タイムラインのサンプルをタップしたところ、タイムラインページではエラーが発生しました…

I/flutter (18127): 😡 SHOUT 2024-06-23 15:35:14.953840 [package:yomikey/features/timeline/pages/timeline_page.dart 210:18 in TimelinePage.build.<fn>] [cloud_firestore/failed-precondition] The query requires a COLLECTION_GROUP_DESC index for collection posts and field createdAt. You can create it here: https://console.firebase.google.com/v1/r/project/picture-book-log-develop/firestore/indexes?create_exemption=Cl1wcm9qZWN0cy9waWN0dXJlLWJvb2stbG9nLWRldmVsb3AvZGF0YWJhc2VzLyhkZWZhdWx0KS9jb2xsZWN0aW9uR3JvdXBzL3Bvc3RzL2ZpZWxkcy9jcmVhdGVkQXQQAhoNCgljcmVhdGVkQXQQAg

「クエリにはコレクション posts とフィールド createdAt のための COLLECTION_GROUP_DESC インデックスが必要です。こちらで作成できます: https://~~」とあり、失敗しているようです。

Firebase 公式ドキュメントの「 不足しているインデックスをエラー メッセージから作成する 」のとおり、こちらのURLをブラウザで開くと、インデックスの作成のページであるため、流れに従って保存を押します。

「 単一フィールド インデックス除外 」が必要だったということのようです。

再度、タイムライン機能を確認します。

今度はうまくいき、タイムラインに作成した内容が表示されました。

データが保存されています。

ひとまず今回のゴールには行きつきました！

ですが、頭の中にはてなマークが増えてきました… 公式ドキュメントの通読が必要であるととても感じます。

Firebase の公式ドキュメントは読みやすく充実している印象なので、一度目を通して、あとは使いながら把握していきたいと思います。

おわりに

Flutter アプリテンプレート hukusuke1007 / flutter_app_template に Firebase の Cloud Firestore（NoSQL クラウド データベース）を導入する方法を確認してまとめました。

Cloud Firestore を利用するのは初めてでしたが、ほんの少し理解が進みました。

やり残し

Flutter アプリテンプレートに関連して、以下を今後やっていこうと思います。

• Cloud Firestore 利用部分のコードリーディング
• Cloud Firestore の 公式ドキュメント 通読
• Mason を使った Feature ディレクトリの作成など、README に書いてある開発方法の確認
• プラグインの確認。プラグインやコードがあるかもしれませんが、不要と分かった段階で削除しながら、開発を進めていこうと思います
• 参考文献 の通読

ありがとうございました。