TypeScript×Firebase(Step2:CRUD処理)

はじめに

前回記事の続きです。
FirestoreのCRUD処理を記載します。

▪️シリーズ
TypeScript×Firebase(Step1:プロジェクト作成~データ取得まで)
TypeScript×Firebase(Step2:CRUD処理)←いまここ
TypeScript×Firebase(Step3:ディレクトリ修正、リファクタリング)

ソースコード

ディレクトリ構成

~/develop/firebase_typescript$ tree src   
src
├── firestore.ts
└── users
    ├── create.ts
    ├── delete.ts
    ├── read.ts
    └── update.ts

2 directories, 5 files

src/users/create.ts

import { addDoc, collection, doc, writeBatch } from 'firebase/firestore';
import { app, db } from '../firestore';
import { deleteApp } from 'firebase/app';

// 新しいユーザーを作成する
async function createNewUser() {
  try {
    // `users` コレクションに新しいドキュメントを追加
    const docRef = await addDoc(collection(db, 'users'), {
      name: 'New User',
      email: '[e-mail]',
    });

    console.log('ドキュメント作成成功！ドキュメントID: ', docRef.id);
  } catch (e) {
    console.error('ドキュメント作成エラー: ', e);
  } finally {
    // 処理が完了したらFirebaseの接続を閉じる
    await deleteApp(app);
  }
}

src/users/read.ts

import { deleteApp } from 'firebase/app';
import { collection, doc, getDoc, getDocs } from 'firebase/firestore';
import { db, app } from '../firestore';

// コレクションの全ドキュメントを取得する
async function getUsers() {
  const querySnapshot = await getDocs(collection(db, 'users'));
  querySnapshot.forEach((doc) => {
    console.log(`${doc.id} => ${JSON.stringify(doc.data())}`);
  });

  // 処理が完了したらFirebaseの接続を閉じる
  await deleteApp(app);
}

// コレクション内の対象ドキュメントを取得する
async function getUser(docId: string) {
  const docRef = doc(db, 'users', docId);
  const docSnap = await getDoc(docRef);

  if (docSnap.exists()) {
    console.log('Document data:', docSnap.data());
  } else {
    console.log('No such document!');
  }
  // 処理が完了したらFirebaseの接続を閉じる
  await deleteApp(app);
}

src/users/update.ts

import { doc, updateDoc } from 'firebase/firestore';
import { app, db } from '../firestore';
import { deleteApp } from 'firebase/app';

async function updateUser(docId: string) {
  const docRef = doc(db, 'users', docId);

  try {
    await updateDoc(docRef, {
      name: '更新されたユーザー名',
    });

    console.log('ドキュメント更新成功！');
  } catch (e) {
    console.error('ドキュメント更新エラー: ', e);
  } finally {
    // 処理が完了したらFirebaseの接続を閉じる
    await deleteApp(app);
  }
}

const docId = 'KZc9Ko0wSGVUHOqOO3Dx'; // 更新したいドキュメントのID
updateUser(docId);

src/users/delete.ts

import { doc, deleteDoc } from 'firebase/firestore';
import { app, db } from '../firestore';
import { deleteApp } from 'firebase/app';

async function deleteUser(docId: string) {
  const docRef = doc(db, 'users', docId);

  try {
    await deleteDoc(docRef);
    console.log('ドキュメント削除成功！');
  } catch (e) {
    console.error('ドキュメント削除エラー: ', e);
  } finally {
    // 処理が完了したらFirebaseの接続を閉じる
    await deleteApp(app);
  }
}