参考資料
- API Reference | Firebase JavaScript API reference
- Firebase ドキュメント（サンプル）
- Firebase を JavaScript プロジェクトに追加する
SDKインストール
# npm install firebase@10.11.0
Firestoreの基本的な操作
前提
Firestoreはウェブアプリ用として設定した。
下記コードはデフォルトのFirestoreルールで実行した。
データ構造
データはドキュメントに保存し、ドキュメントはコレクションにまとめられる。
データ追加
import React from "react";
import ReactDOM from 'react-dom/client';
import { initializeApp } from 'firebase/app';
import {
getFirestore,
doc,
setDoc
} from 'firebase/firestore';
const firebaseConfig = {
// apiKey等を設定するFirebaseプロジェクト固有の情報。
};
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
// usersコレクションのdocument_nameドキュメントへの参照。
const fb_document = doc(db, 'users', 'document_name');
// 追加するデータ。
const data = {
first: 'ファースト',
last: 'ラスト',
born: 2024
};
// データ追加。
await setDoc(fb_document, data);
// usersというコレクションの、
// document_nameというドキュメントに、
// dataの内容が保存されていることを確認すれば良い。
// 追加できなかった場合の例外もcatchした方が良い。
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
</React.StrictMode>
);
データ参照
import React from "react";
import ReactDOM from 'react-dom/client';
import { initializeApp } from 'firebase/app';
import {
getFirestore,
collection,
getDocs,
doc,
getDoc,
query,
where
} from 'firebase/firestore';
const firebaseConfig = {
// apiKey等を設定するFirebaseプロジェクト固有の情報。
};
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
//===== usersコレクションのドキュメント全て読み込み =====
// usersコレクションへの参照。
const fb_collection = collection(db, 'users');
// usersコレクションの全ドキュメントへの参照。
const querySnapShot = await getDocs(fb_collection);
querySnapShot.forEach((doc) => {
console.log("ドキュメント識別子 = ", doc.id);
console.log("データ = ", doc.data());
console.log("first = ", doc.data().first);
});
//===== usersコレクションの指定したドキュメントを読み込み =====
// usersコレクションのdocument_nameドキュメントへの参照。
const fb_document = doc(db, 'users', 'document_name');
// usersコレクションのdocument_nameドキュメントのデータ取得。
const fb_doc = await getDoc(fb_document);
console.log("ドキュメント識別子 = ", fb_doc.id);
console.log("データ = ", fb_doc.data());
console.log("first = ", fb_doc.data().first);
//===== 単純なクエリで条件を指定して読み込み =====
// usersコレクションへの参照。
const fb_collection = collection(db, 'users');
// クエリ制約を設定。
const fb_where = where('born', '==', 2024);
// クエリ設定。
const fb_query = query(fb_collection, fb_where);
// データ取得。
const fb_docs = await getDocs(fb_query);
fb_docs.forEach((fb_doc) => {
console.log("ドキュメント識別子 = ", fb_doc.id);
console.log("データ = ", fb_doc.data());
console.log("first = ", fb_doc.data().first);
});
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
</React.StrictMode>
);
データ更新
import React from "react";
import ReactDOM from 'react-dom/client';
import { initializeApp } from 'firebase/app';
import {
getFirestore,
doc,
updateDoc
} from 'firebase/firestore';
const firebaseConfig = {
// apiKey等を設定するFirebaseプロジェクト固有の情報。
};
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
// ドキュメントの参照。
const fb_doc = doc(db, 'users', 'document_name');
// 更新後のデータを準備。
const data = {
born: 3024
};
// 更新。
await updateDoc(fb_doc, data);
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
</React.StrictMode>
);
データ削除
import React from "react";
import ReactDOM from 'react-dom/client';
import { initializeApp } from 'firebase/app';
import {
getFirestore,
doc,
updateDoc
} from 'firebase/firestore';
const firebaseConfig = {
// apiKey等を設定するFirebaseプロジェクト固有の情報。
};
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
// ドキュメントの参照。
const fb_doc = doc(db, 'users', 'document_name');
// 削除。
await deleteDoc(fb_doc);
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
</React.StrictMode>
);
コメント