フロントエンドの地獄

みせてやりますよ。本当の地獄ってやつをね。

FirebaseのFirestoreに便利なクエリ「array-contains-any」「where-in」ってのができたからサンプルサイトとともに解説するぞ!

前から噂されていた便利クエリarray-contains-anyおよびwhere-inがついにJSのSDK等に入ったので早速使ってみます!

SDK入りたてでできたてホヤホヤのため、まだ公式ドキュメントには影も形もありません笑(2019/10/30現在)

※ 11/3追記 : 更に同じくwhereでのInクエリも発行できるようになっていたので、それについても追記しました!

array-contains-any ってどんなの

今までwhereにarray-containsを指定すると、arrayに特定の値が入っているdocumentを検索できました。

実際のコードはこんな感じで、blogsコレクションの中で「tagsフィールドの中に"tech"が入っているドキュメント」を検索できます。

firebase
      .firestore()
      .collection("blogs")
      .where("tags", "array-contains", "tech")
      .get()

array-contains-anyはそれの進化版で、arrayに特定の値のいずれかの値が入っているdocumentを検索できます。

実際のコードはこんな感じで、blogsコレクションの中で「tagsフィールドの中に"tech"か"game"のいずれかが入っているドキュメント」を検索できます。 基本的にはarray-containsと同じですが、whereの第3引数に配列を渡せます。

firebase
      .firestore()
      .collection("blogs")
      .where("tags", "array-contains-any", ["tech", "game"] )
      .get()

そしてこの配列ののどれかが入っていれば検索にヒットします。

利用例)ブログの記事管理で↑のようなタグをarrayで格納していたら、複数検索ができるような感じです

これでOR条件を記述できるクエリが打てるので、Firestore単体での検索の幅がグーンと広がると思います。配列内の値それぞれでarray-containsをして結果をまとめるようなクエリです。

where-in ってどんなの

実際には in クエリなのですがちょっと in だけだとなんだ?ってなるので where-inと呼びます(公式ドキュメントきたらそっちに呼び方合わせましょう笑)

使い方は次のような感じです!

firebase
      .firestore()
      .collection("blogs")
      .where("type", "in", ["tweet", "podcast"] )
      .get()

typeフィールドにおいて tweet か podcast どちらかと完全一致したらヒットするクエリです。

array-contains-anyのように、特定のフィールドに対してOR検索がかけれるようになりました!(完全一致なので自由文字列検索はまだできません)

利用例)↑のような決まったタイプをいれておくフォールドにおいて、ツイートかPodcastに一致する場合、のような検索ができます。

whereで"=="に当たるデータを配列すべてで実行して、結果をまとめるようなクエリです。

また、anyとwhere-in、双方10件までの制限があります。

実際に試せるサンプルサイトも作りました

firestore-sandbox.netlify.com

こちらで、サンプルデータにArray ContainsとArray Contains Anyの両方が実行できます。

リポジトリはこちら。

github.com

↓実際のコードはここでfirebaseを叩いています。

https://github.com/nabettu/firestore-sandbox/blob/master/src/App.js

まとめ

今の所使える条件はarray-containsと同じ感じなのですが、Algoliaなどを使わずとも検索が作れる範囲が広がったので、重宝しそうです!

以上!はてぶをよろしく!笑