TypeScript×Firebase(Step1:プロジェクト作成~データ取得まで)

はじめに

表題通り、TypeScript×Firebaseの組み合わせます。
プロジェクト作成~データ取得までを実施します。

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

1. Firebaseのプロジェクト作成

1. コンソール画面よりプロジェクトを作成します。

2. プロジェクト作成

3. アプリ作成
Webアプリのプロジェクトを作成

2. Firestoreの準備

2.2 Firestoreでコレクション作成

3. TypeScriptの準備

1. ディレクトリ作成
firebase_typescriptというディレクトリを作成。

2. yarn init実行

yarn init

~/develop/firebase_typescript$ yarn init -y
yarn init v1.22.19
warning The yes flag has been set. This will automatically answer yes to all questions, which may have security implications.
success Saved package.json
✨  Done in 0.01s.

3. ライブラリのinstall

ライブラリのinstall

~/develop/firebase_typescript$ yarn add firebase dotenv
~/develop/firebase_typescript$ yarn add typescript --dev

4. ソースコード

ディレクトリ構成

~/develop/firebase_typescript$ tree -I 'node_modules|.git' -a
.
├── .env
├── .env.sample
├── .gitignore
├── firestore.ts
├── package.json
├── users.ts
└── yarn.lock

1 directory, 7 files

package.json

{
  "name": "firebase_typescript",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "dotenv": "^16.3.1",
    "firebase": "^10.7.1"
  },
  "devDependencies": {
    "typescript": "^5.3.3"
  }
}

firestore.ts

import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
import dotenv from 'dotenv';
dotenv.config();

const firebaseConfig = {
    apiKey: process.env.FIREBASE_API_KEY,
    authDomain: process.env.FIREBASE_AUTH_DOMAIN,
    projectId: process.env.FIREBASE_PROJECT_ID,
    storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.FIREBASE_APP_ID
  };

export const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);

users.ts

import { deleteApp } from "firebase/app"
import { db,app } from "./firestore";
import { collection, getDocs } from "firebase/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);
}

getUsers().catch(console.error);

実行結果

実行結果

~/develop/firebase_typescript$ ts-node users.ts              
sxsUyqyyuVIK4sfVktne => {"name":"koji","email":"[e-mail]"}