Comment on page

Firestoreを利用する

事前準備
Firebaseの初期化をinitializeApp で行います。
下記のfirebaseConfigの値は、Firebase 上のWeb アプリのfirebaseConfigにあります。
getFirestoreでFirestoreの初期化と参照を取得します。
const firebaseConfig = {
    apiKey: "******************************",
    authDomain: "test.firebaseapp.com",
    databaseURL: "https://test.firebaseio.com",
    projectId: "test",
    storageBucket: "test.appspot.com",
    messagingSenderId: "**********",
    appId: "1:**********:web:********************"
};
​
const firebase = initializeApp(firebaseConfig);
const db = getFirestore(firebase)
ライブラリのインポート
Firebaseの JavaScript SDKのライブラリをCDN（コンテンツ配信ネットワーク）からプロジェクトに追加します。他のインポートについては、こちらをご確認ください。
import {
  getFirestore, collection, getDocs, addDoc, updateDoc, doc, deleteDoc, serverTimestamp,
} from 'https://www.gstatic.com/firebasejs/9.14.0/firebase-firestore.js';
​
import {
  initializeApp
} from "https://www.gstatic.com/firebasejs/9.14.0/firebase-app.js";
新規作成
ドキュメントの新規作成は、addDoc()メソッドを使用します。
Cloud Firestore はデータをドキュメントに保存。ドキュメントはコレクションに保存されます。 
次のコードでは、users コレクションに新しいドキュメントを作成します。
users コレクションが存在しない場合は、下記処理で新規にコレクションが作成されます。
const docRef = await addDoc(collection(db, "users"), {
    name: "monaca"
});
読み取り
コレクションからのドキュメント読み取りは、getDocs()メソッドを使用します。
users コレクションの全てのドキュメントを読み取っています。
const querySnapshot = await getDocs(collection(db, "users"));
querySnapshot.forEach((doc) => {
    console.log(`${doc.id} => ${doc.data()}`);
});
更新
ドキュメントの更新は、updateDoc()メソッドを使用します。
const docRef = doc(db, "users", docRef.id);
await updateDoc(docRef, {
    born: 2020
});
削除
ドキュメントを削除するには、 deleteDoc()メソッドを使用します。
const docRef = doc(getFirestore(), "users", docRef.id);
await deleteDoc(docRef);

前

サンプル & Tips

次

サンプルアプリ

最終更新 1yr ago