【Firestore × JavaScript】配列フィールドに変数で指定した複数要素を追加・削除したい

こんにちは！

今回は「Firestoreで配列に要素を複数追加・削除」する方法について、JavaScriptを使った書き方を共有したいと思います。

公式ドキュメントの例だと一つの要素を追加（削除）する例しか見当たらなかったので、記事にしました。

はじめに

以降の例では、以下の構成でusersフィールドにデータを追加する場合で考えていきます。
roomコレクション＞room1ドキュメント＞usersフィールド（配列）

（おさらい）配列フィールドに要素を追加する

配列に要素を追加したい場合、arrayUnion、arrayRemoveを使います。

追加

const db = firebase.firestore();
db.collection('users').doc('room1')
  .update({
    users: firebase.firestore.FieldValue.arrayUnion('user1'), // あusersフィールド（配列）に要素'user1'を追加
  });

削除

const db = firebase.firestore();
db.collection('users').doc('room1')
  .update({
    users: firebase.firestore.FieldValue. arrayRemove('user1'), // usersフィールド（配列）から要素'user1'を削除
  });

複数要素を追加したい場合（基本形）

,（カンマ）を使うことで、複数の要素を追加することができます。

追加

const db = firebase.firestore();
db.collection('users').doc('room1')
  .update({
    users: firebase.firestore.FieldValue.arrayUnion('user1', 'user2'), // usersフィールド（配列）に要素'user1','user2'を追加
  });

削除

const db = firebase.firestore();
db.collection('users').doc('room1')
  .update({
    users: firebase.firestore.FieldValue. arrayRemove('user1', 'user2'), // usersフィールド（配列）から要素'user1','user2'を削除
  });

複数要素を追加したい場合（変数を使いたい）

スプレッド構文...arrayを使うことで、複数の要素を追加することができます。

追加

const db = firebase.firestore();

const usersArr = ['user1', 'user2'];

db.collection('users').doc('room1')
  .update({
    users: firebase.firestore.FieldValue.arrayUnion(...usersArr), // スプレッド構文を使って、usersフィールド（配列）に`usersArr`の要素を追加
  });

削除

const db = firebase.firestore();

const usersArr = ['user1', 'user2'];

db.collection('users').doc('room1')
  .update({
    users: firebase.firestore.FieldValue. arrayRemove(...usersArr), // スプレッド構文を使って、usersフィールド（配列）から`usersArr`の要素を削除
  });

さいごに

配列の要素追加・削除はarrayUnionarrayRemoveが便利です！

配列取得(get)→配列加工→更新(update)のように、排他制御的のためのトランザクションが必要なくなるので、積極的に使ってみてください。

参考