Flutterで始めるアプリ開発

Cloud Firestore概要

このページのゴール

  • Cloud Firestoreの概要を知る
  • Cloud Firestoreの設定を行う
  • Cloud Firestoreの仕組みを知る

Cloud Firestore

Cloud Firestoreとは

Cloud Firestore は
アプリのデータを保存・同期する仕組みを提供するデータベースです ✨

アプリのデータを簡単に保存・取得したり、
複数の端末でデータを同期する機能が簡単に作れます。

Firebaseプロジェクト作成・設定

Firebase プロジェクト作成

Cloud FirestoreはFirebaseの機能の1つです。
まずは、Firebaseのプロジェクトを作成しCloud Firestoreが使える状態にしましょう。

Firebaseコンソールからプロジェクト作成 firebase project create 1
プロジェクト名を入力し続行 firebase project create 2
続行 firebase project create 3
地域と利用規約を確認しプロジェクト作成 firebase project create 4
準備ができたら続行 firebase project create 6
プロジェクトが作成できました 🎉🎉🎉 firebase project create 7

Cloud Firestoreの機能を有効化

プロジェクトが作成できたら、次はCloud Firestoreの機能を有効化してみましょう。
ここでは、アクセス制限の無いテストモードで設定してみます。

サイドナビの「開発 → Database」を選択 cloud firestore setup 1
「データベースの作成」を選択 cloud firestore setup 2
「テストモードで開始」を選択し次へ

❗️注意事項❗️
今回は試すことが目的なので、
アクセス制限の無いテストモードを選択しています。
cloud firestore setup 3
ロケーション「asia-northeast1」を選択し完了
cloud firestore setup 4
Cloud Firestoreが使えるようになりました 🎉🎉🎉 cloud firestore setup 5

Cloud Firestoreの仕組み

Cloud Firestoreはデータベースです。

他のデータベースでも同じことですが、
専用の形式(データモデル)に従ってデータを保存する必要があります。

実装を始める前に
Cloud Firestoreのデータモデルに関して紹介していきます 💪

データモデル

Cloud Firestoreでデータを保存する時は、大きく3つの要素を指定することになります。

  1. データ
    • フィールドと値のペアを複数持っている(オブジェクト)
  2. ドキュメント
    • 1つのデータを持っている
    • ドキュメントのIDを指定する必要がある
  3. コレクション
    • 複数のドキュメントを持っている
    • コレクションのIDを指定する必要がある

文章で書くと少し難しく感じますが、図で表すとこんな感じになります。
ツリー構造状にデータを保存できるんですね 👀

管理画面からデータを作成してみる

実際に試したほうが理解が深まると思うので、
次のような構造のデータをFirestoreの管理画面から作成してみましょう 💪

コレクション:users
|
├- ドキュメント:id_abc
| |
| ├- データ:{name: "山田", age: 20}
| |
| └- サブコレクション:orders
| |
| ├- ドキュメント:id_123
| | |
| | └- データ:{price: 500, date: "2/15"}
| |
| └- ドキュメント:id_456
| |
| └- データ:{price: 300, date: "5/10"}
|
└- ドキュメント:id_def
|
└- データ:{name: "佐藤", age: 30}
Firestoreの管理画面を開き
「コレクションを開始」を選択
cloud firestore test data 01
コレクションIDに「users」を入力し次へ

ドキュメントIDに「id_abc」を入力
フィールド「name」と「age」を追加し保存
cloud firestore test data 02
cloud firestore test data 03
コレクション「users」と
ドキュメント「id_abc」が作成できました 🎉

もう一つドキュメントを追加してみます。
「ドキュメントを追加」を選択
cloud firestore test data 04
ドキュメントIDとフィールドを入力し保存

コレクション「users」の中に
2つのドキュメントが作成できました 🎉
cloud firestore test data 05
cloud firestore test data 06
次は、ドキュメント「id_abc」の
サブコレクションを作ります。

「コレクションを開始」を選択
cloud firestore test data 07
先ほどと同じ様に
コレクションID・ドキュメントID・フィールドを
入力し保存
cloud firestore test data 08
cloud firestore test data 09
サブコレクション「orders」の中に
もう1つドキュメントを追加
cloud firestore test data 10
cloud firestore test data 11
完成です 🎉🎉🎉 cloud firestore test data 12

まとめ

  • Cloud Firestoreはアプリのデータを保存・同期する仕組みを提供するデータベース
  • Cloud Firestoreを使う際は事前に設定を行う必要がある
  • Cloud Firestoreのデータモデルはデータ・ドキュメント・コレクションで成り立っている

次回は、Cloud Firestoreを実際に使って
保存・取得・更新・削除の処理を実装していきます 💪💪💪

参考情報