micomia株式会社の井上です。今回はQuery Collectionについて解説していきます。
初心者にも分かりやすく解説していくのでぜひご一読ください。
1. Query Collectionとは?
そもそも、Query CollectionとはBackend Queryの一種で、FireStoreのコレクションからデータを取得するための仕組みです。
これだけでは少し難しいかもしれないのでそんな人向けに、Query Collectionという言葉がそもそもどういう意味なのかが分かるとかなり分かりやすくなると思います。
まず、それぞれの単語の本来の意味は、
Query=質問・要求
Collection=(そのままの)コレクション
です。
これを実装環境向けに少し言い方を変えてみると、Queryとは「データベースに対する質問・要求」と言えます。具体的にどんな質問、要求かというと、
「○○のデータを取得して」
「最新10件だけ取ってきて」
などです。
つまり、 Query Collection = コレクションに対して質問してデータを取り出す行為となります。
2. Query Collectionの実装
今回はこのような自分が作成した投稿を投稿履歴画面に一覧表示していきます。

一覧表示なので、まずはListViewを追加して先ほどのPostコンポーネントをListViewの中に追加します。

このままでは、投稿が1つしか表示されていません。今回は投稿履歴=複数の投稿を表示させたいのでここでQuery Collectionを使用します。
Add QueryからQuery Collectionを選択します。

すると、どのコレクションを一覧表示させるのかの選択肢が表示されます。

今回は投稿履歴を表示させる、つまりpostコレクションを表示させたいのでpostを選択します。
※データベースにコレクションを作成していない方はこの時点で何も表示されないので先にコレクションを作成してから実装を進めてください。
次に、Query Typeを選択できます。

この3つのそれぞれの目的は以下です。
List of Documents=複数ドキュメントを取得
Single Document=1つのドキュメントを取得
Count=件数だけを取得
今回は複数のドキュメントを取得したいのでList of Documentを使用します。
その下に、Limitを入力する欄があります。30と入力すると最大30個まで投稿が表示されるイメージです。

その下にあるのが、FiltersとOrderingです。

Filtersは表示させる投稿に制限をかけるものです。なので、以下のようなFilterをかけます。

これは、その投稿の作成者(created_by)がログインしているユーザー(Authenticated User)と一致するときにその投稿を表示させると言うフィルターです。
次に、Orderingです。

OrderはIncreasingとDecreasingがありますが、Increasingは古いもの順、Decreasingは新しいもの順と覚えておくと便利です。

これで、投稿履歴が一覧表示できるようになりました。

3. 最後に
今回はQuery Collectionについて解説しました。Query Collectionは投稿履歴だけではなく、投稿一覧やユーザー一覧など多くのアプリで使用する機能で必要になってくるのでぜひ今回の内容を活用してください。
本記事の内容を動画で見たい方は以下をご覧ください。


.webp%3Falt%3Dmedia%26token%3D44d272c7-1e7a-46d7-86de-dc2bec67a3e4&w=3840&q=75)
.webp%3Falt%3Dmedia%26token%3Dbc168691-5281-4eab-8c08-ed7fe5624582&w=3840&q=75)
.webp%3Falt%3Dmedia%26token%3D8f9453ad-d017-4640-8b7b-4c5d55391f46&w=3840&q=75)
.webp%3Falt%3Dmedia%26token%3D904686c4-e792-4c6a-b5ce-e7648fd53404&w=3840&q=75)
.webp%3Falt%3Dmedia%26token%3D8db330f1-3fab-48b7-8dcf-dd8c6f47836a&w=3840&q=75)
.webp%3Falt%3Dmedia%26token%3Ddef3da75-721c-4e42-8cd8-f06795bb771f&w=3840&q=75)
.webp%3Falt%3Dmedia%26token%3D8fec979d-a6dc-4d03-960f-330f997108a7&w=3840&q=75)
.webp%3Falt%3Dmedia%26token%3D6bddee16-071d-41fd-8a4b-f2026bcff617&w=3840&q=75)
.webp%3Falt%3Dmedia%26token%3D9ba70870-6b39-4eab-b9c2-e126ef08cb09&w=3840&q=75)
.webp%3Falt%3Dmedia%26token%3D8a795f56-e8a9-4be1-937b-65c1a89922b3&w=3840&q=75)
.webp%3Falt%3Dmedia%26token%3Dbe65d589-2f4c-4ad8-82a1-7ddb73af2620&w=3840&q=75)
.webp%3Falt%3Dmedia%26token%3D0aa104f5-928b-4ddf-a535-d8574b7667a8&w=3840&q=75)

.webp%3Falt%3Dmedia%26token%3D45131e3d-4777-421a-a556-bcc8d462dfe1&w=3840&q=75)
.webp%3Falt%3Dmedia%26token%3D09daf923-4a62-4c31-af6f-f3d99a9f635b&w=3840&q=75)
.webp%3Falt%3Dmedia%26token%3D0e63e93b-1558-48a5-8b24-d1ae7cfa487f&w=3840&q=75)
.webp%3Falt%3Dmedia%26token%3D240fcc34-b7e7-4c86-b294-fdfc2a66db21&w=3840&q=75)
.webp%3Falt%3Dmedia%26token%3Db288c602-2902-4f93-8eca-903ec8f86440&w=3840&q=75)
.webp%3Falt%3Dmedia%26token%3D6040f2d9-1a54-476c-9999-5e0aeb8e8a74&w=3840&q=75)
.webp%3Falt%3Dmedia%26token%3D3c4b1b17-9fec-405e-9e02-8d34961b6f16&w=3840&q=75)