【Firebase】Firesoreに対するデータ保存と取得方法

2023年6月10日

Vue.js3 + TypeScriptのプロジェクトでFirestoreに対してデータの保存と取得をする方法について紹介します。

準備

Firebaseを操作するためのライブラリのインストール

$ npm install firebase --save

設定ファイルの作成

設定ファイルとしてfirebase.tsを作成します。firestoreオブジェクトなどFirebaseの各機能を利用する際に必要になるオブジェクトを定数化しておきます。

API Keyなどの値はFirabaseコンソールの「プロジェクトの設定」ページ内の「マイアプリ」から該当のアプリを選択することで確認できます。

import { getAuth, onAuthStateChanged } from "firebase/auth";
import firebase from "firebase/compat";
import { getStorage } from "firebase/storage";
import { getFirestore } from "firebase/firestore";

import initializeApp = firebase.initializeApp;
import { User } from "@firebase/auth";

const firebaseConfig = {
  apiKey: {API Key},
  authDomain: {Auth Domain},
  databaseURL: {Database URL},
  projectId: {Project ID},
  storageBucket: {Storage Bucket},
  messagingSenderId: {Messaging Sender ID}
  appId: {App ID} 
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

// Firebaseの機能を利用する際に必要なオブジェクトをexport
export const firebaseAuth = getAuth(app);
export const firebaseStorage = getStorage(app);
export const firestore = getFirestore(app);
export const getCurrentUser = async (): Promise<User> => {
  return new Promise<User>((resolve, reject) => {
    onAuthStateChanged(firebaseAuth, (user) => {
      if (user !== null) {
        resolve(user);
      }
    });
  });
}

Firestore

データ保存

FirestoreにはデータをドキュメントというJSON形式の単位で保存します。ドキュメントの保存にはsetDocまたはaddDocメソッドを使用します。

addDocメソッドはドキュメントを識別するドキュメントIDを自動生成し、常に新規追加となります。setDocはドキュメントIDを呼び出し時に指定します。指定されたドキュメントIDが存在する場合はドキュメントを更新します。

addDocによるドキュメント追加のコードは以下のようになります。ここでは、Firebase AuthenticationによってログインしたユーザのユーザIDごとにドキュメントを保存しています。getCurrentUser()は上記のfirebase.ts内で定義しています。

import { addDoc, collection, serverTimestamp } from "firebase/firestore";

async function addItem() {
    
    const user = await getCurrentUser();

    await addDoc(collection(firestore, `users/${user.uid}/items`), {
      title: "test",
      name: name,
      comment: comment,
      updatedAt: serverTimestamp()
    });
}

データ取得

ドキュメントを取得するにはgetDocまたはgetDocsメソッドを使用します。

getDocsメソッドを使用することでコレクション内の複数のドキュメントを取得できます。whereを指定することで条件を満たすドキュメントのみ取得可能です。whereを省力した場合はコレクション内の全てのドキュメントを取得します。

import { collection, getDocs, query, where } from "firebase/firestore";

  // 全件検索
  async findAll(): Promise<Item[]> {

    const user = await getCurrentUser();
    const downloadTask = await getDocs(collection(firestore, `users/${user.uid}/posts`));

    return downloadTask.docs
      .map((document) => this.mapDocumentToItem(document))
  }

  // IN検索
　　　　async findAllBy(namse: string[]): Promise<Item[]> {

    const user = await getCurrentUser();
    const downloadTask = await getDocs(query(collection(firestore, `users/${user.uid}/posts`), where("names", "in", names)));

    return downloadTask.docs
      .map((document) => this.mapDocumentToItem(document))
      .sort((a, b) => {
        return b.date.unix() - a.date.unix();
      })
  

  private mapDocumentToItem(document: any): Item {
    return {
      id: document.id,
      name: document.data().name,
      comment: document.data().comment
    };
  }

参考情報

• Cloud Firestore にデータを追加する
• Cloud Firestore でデータを取得する