【Vue × Firestore】フィールド値が一致したものを削除する


#実際のコード

```js:list.vue
saveBookmark() {
      const id = firebase
        .firestore()
        .collection("users")
        .doc(this.$route.params.uid)
        .collection("bookmarks")
        .doc().id;
      firebase
        .firestore()
        .collection("users") //「users」コレクションを参照
        .doc(this.$route.params.uid) //対象ページのユーザーを参照
        .collection("bookmarks") //「bookmarks」サブコレクションを参照
        .doc(id) //自動生成されたドキュメントIDを参照
        .set({
          postId: this.list.id, //「postId」に投稿データである「this.list.id」を代入。
          time: firebase.firestore.FieldValue.serverTimestamp()
        })
        .then(() => {
          this.$swal("ブックマークに追加しました。", {
            icon: "success"
          });
          this.isBookmarked = true;
        })
        .catch(() => {
          this.$swal("ブックマークを追加出来ません。", {
            icon: "error"
          });
        });
    },
```

ブックマークする際にサブコレクション「bookmarks」内に【postId】を作成し、
this.list.id投稿データのみを持たせる。

```js:board.vue
created() {
    //各ユーザーがブックマークしたリスト
    firebase
      .firestore()
      .collection("users") //「users」コレクションを参照
      .doc(this.$route.params.uid) //現在表示中ユーザーを参照
      .collection("bookmarks") //「bookmarks」サブコレクションを参照
      .get()
      .then(snapshot => {
        snapshot.forEach(doc => {
          //forEachで全てのドキュメントに対して
          this.currentUserBookmarkIds.push(doc.data().postId);
          //「postId」を追加し、this.currentUserBookmarkIdsへ格納
        });
      });
    firebase
      .firestore()
      .collection("posts") //「posts」コレクションを参照
      .orderBy("time", "desc")
      .get()
      .then(snapshot => {
        snapshot.forEach(doc => {
          //forEachで全てのドキュメントに対して
          if (this.currentUserBookmarkIds.includes(doc.data().id)) {
            //this.currentUserBookmarkIdsに「id」が含まれていたら、
            this.postData.push({
              ...doc.data(),
              isBookmarked: true
            });
            //isBookmarkedを追加。
          } else {
            this.postData.push(doc.data());
          }
        });
      });
    firebase
      .firestore()
      .collection("users")
      .get()
      .then(snapshot => {
        snapshot.forEach(doc => {
          this.userDatas.push(JSON.parse(JSON.stringify(doc.data())));
        });
      });
  }
};
```

リストを表示させる際は、サブコレクション「bookmarks」を参照し、forEachで全てのドキュメントに対してブックマークされた対象を
this.currentUserBookmarkIdsという変数をdata内に作成し、【postId】を一度追加。

その後、コレクション「posts」を参照して、 forEachで全てのドキュメントを参照して先ほど作成したthis.currentUserBookmarkIds内に
「id」が含まれていたら(postIdと同じidが含まれていたら)、投稿の一覧を表示しているthis.postDataにisBookmarked: trueと一緒に代入。

含まれていなければ、そのまま投稿データを代入。

```js:list.vue

    deleteBookmark() {
      firebase
        .firestore()
        .collection("users")
        .doc(this.$route.params.uid)
        .collection("bookmarks")
        .where("postId", "==", this.list.id)
        //postIdをフィルタリングして投稿idであるthis.list.idと合致するもののみを参照
        .get()
        .then(snapshot => {
          snapshot.forEach(doc => {
            //forEachで全てのドキュメントに対して
            doc.ref //ドキュメントの数だけrefを参照して
              .delete() //削除を実行
              .then(() => {
                this.$swal("ブックマークを取り消ししました。", {
                  icon: "success"
                });
                this.isBookmarked = false;
              })
              .catch(() => {
                this.$swal("ブックマークを取り消し出来ません。", {
                  icon: "error"
                });
              });
          });
        });
    },
```

削除する際には、削除したい【postId】を持っているbookmarkを探してきて削除すれば良いです。

しかし、以下のように【postId】と合致している【id】を参照したいので、.doc(this.list.id)としても削除は出来ません。

```js
deleteBookmark() {
      firebase
        .firestore()
        .collection("users")
        .doc(this.$route.params.uid)
        .collection("bookmarks")
        .doc(this.list.id)
        .get()
```

そこで使用するのが[where()](https://firebase.google.com/docs/firestore/query-data/get-data?hl=ja#get_multiple_documents_from_a_collection)です。
【postId】をフィルタリングして投稿idである【this.list.id】と合致するもののみを参照すれば削除可能です。

```js
    deleteBookmark() {
      firebase
        .firestore()
        .collection("users")
        .doc(this.$route.params.uid)
        .collection("bookmarks")
        .where("postId", "==", this.list.id)
        //postIdをフィルタリングして投稿idであるthis.list.idと合致するもののみを参照
        .get()
```