【Flutter】FirebaseのSnapshotとは?具体的な使い方を解説

Flutter状態管理

FlutterFirebaseを使った開発では、よく出てくる「Snapshot」について、普段なんとなく使っているけれど、詳しく理解しておくと、今後の開発やトラブルシューティングで非常に役立つものです。

この記事では、FirebaseのSnapshotについて簡単に解説しつつ、実際に使う場面やそのメリット・デメリットについても触れていきます。

ぜひ参考にしてください。

質問や指摘等ございましたらお気軽にコメントください!

Firebaseからデータを取得する方法:get()とsnapshots()

まず、Firebaseからデータを取得する方法は主に2つあります。

get()

  • 概要: データベースに一度だけアクセスして、現在のデータを取得するためのメソッドです。
  • 特徴: 一度データを取得するだけで、以降データの変化は追跡しません。リアルタイムでの更新が不要な場合に使用します。
// 1つのドキュメントを取得

DocumentSnapshot snapshot = await FirebaseFirestore.instance

    .collection('users')

    .doc('userId')

    .get();

print(snapshot.data());

snapshots()

  • 概要: データの初回取得に加えて、その後のデータ更新もリアルタイムで追跡します。これにより、データが変更されるたびにアプリに反映されます。
  • 特徴: リアルタイムでのデータ更新が必要な場面で非常に有用です。
// コレクションのリアルタイム更新を取得

FirebaseFirestore.instance.collection('users').snapshots().listen((snapshot) {

    snapshot.docs.forEach((doc) {

        print(doc.data());

    });

});

Firebaseのデータ参照方法:3つの基本

Firebaseでは、データへのアクセス方法として、以下の3つの参照が用意されています。

CollectionReference

  • コレクション(複数ドキュメント)やサブコレクションへの参照を表します。コレクション全体や、特定のサブコレクションを扱うときに使います。
// citiesコレクションへの参照

const citiesRef = FirebaseFirestore.instance.collection('cities');

// 新しいドキュメントの追加

citiesRef.add({

  'name': 'Berlin',

  'country': 'Germany',

});

Query

  • 条件付きのデータ取得を行いたい場合に使います。特定の条件を指定して、必要なドキュメントだけをフィルタリングできます。
// capitalフィールドがtrueのドキュメントだけを取得

const capitalsRef = citiesRef.where('capital', '==', true);

DocumentReference

  • 単一のドキュメントへの参照を表します。特定のIDを持つドキュメントにアクセスしたいときに使います。
// TOKというIDを持つドキュメントを取得

const docRef = citiesRef.doc('TOK');

Snapshotとは?

これまでの参照は、あくまで「データの場所」を指定するものです。しかし、実際にデータを取得して利用するためには、その時点のデータを表すSnapshotが必要です。

3つのSnapshotの種類

FirebaseのSnapshotには以下の3つの種類があります。

DocumentSnapshot

  • 単一のドキュメントデータを取得します。例えば、DocumentReferenceから取得したドキュメントがこれにあたります。
DocumentSnapshot snapshot = await docRef.get();

print(snapshot.data());

QuerySnapshot

  • 複数のドキュメントを含むデータを取得します。CollectionReferenceやQueryを使って、複数のドキュメントを一度に取得する場合に使います。
QuerySnapshot querySnapshot = await citiesRef.get();

querySnapshot.docs.forEach((doc) {

    print(doc.data());

});

QueryDocumentSnapshot

  • QuerySnapshotの中の1つ1つのドキュメントを参照するためのSnapshotです。これを使って、Queryで取得した複数ドキュメントの個々のデータを操作します。
querySnapshot.docs.forEach((QueryDocumentSnapshot doc) {

    print(doc.data());

});

StreamBuilderでのリアルタイムデータの表示例

Flutterでは、リアルタイムデータを使ってUIを更新するのに便利なStreamBuilderを使うことが多いです。以下は、Firebaseのデータをリアルタイムで表示する例です。

StreamBuilder(

  stream: FirebaseFirestore.instance.collection('cities').snapshots(),

  builder: (context, AsyncSnapshot<QuerySnapshot> snapshot) {

    if (!snapshot.hasData) {

      return CircularProgressIndicator();

    }

    return ListView(

      children: snapshot.data!.docs.map((doc) {

        return ListTile(

          title: Text(doc['name']),

          subtitle: Text(doc['country']),

        );

      }).toList(),

    );

  },

);

このように、StreamBuilderはリアルタイムにFirebaseからデータを取得し、データが更新されるたびにUIも自動的に更新されます。

Firebase Snapshotのメリット・デメリット

メリット

  • リアルタイム更新: FirebaseのSnapshotを使うことで、リアルタイムにデータが更新され、アプリに反映されるのは大きなメリットです。
  • シンプルなAPI: get()やsnapshots()といったメソッドで簡単にデータを操作でき、開発者にとっては扱いやすいツールです。

デメリット

  • リアルタイム更新のコスト: アプリの規模が大きくなると、リアルタイム更新によるコストがかかる場合があります。特にデータの更新頻度が高いアプリでは注意が必要です。

まとめ

この記事では、FirebaseのSnapshotについて詳しく解説しました。get()やsnapshots()の違い、データ参照の種類、そしてSnapshotの種類について理解を深めることで、Firebaseを使ったFlutterアプリ開発がより効率的になるでしょう。

ぜひ参考にして、あなたのプロジェクトに活用してみてください!質問やコメントがあれば、ぜひお知らせください。

参考サイト

コメント

タイトルとURLをコピーしました