ReactでFirestoreの基本的な操作

# npm install firebase@10.11.0

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>
);