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

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

▪️シリーズ
[TypeScript×Firebase(Step1:プロジェクト作成~データ取得まで)](https://qiita.com/koji0705/items/7321004ed6542e5df5be)←いまここ
[TypeScript×Firebase(Step2:CRUD処理)](https://qiita.com/koji0705/items/3d6ec00cad126effc930)
[TypeScript×Firebase(Step3:ディレクトリ修正、リファクタリング)](https://qiita.com/koji0705/items/d330911cbcc9fa44b63b)

https://github.com/kouji0705/firebase_typescript

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

https://firebase.google.com/?hl=ja

![スクリーンショット 2024-01-06 13.47.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/6e93c407-6bea-0275-83aa-3391f93997ad.png)

2\. プロジェクト作成
![スクリーンショット 2024-01-06 13.50.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/6aa5f122-5a8d-9505-205f-e81ee333c309.png)
![スクリーンショット 2024-01-06 13.50.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/8f1e2921-4f83-e502-3660-12190caaea10.png)
![スクリーンショット 2024-01-06 13.50.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/92e6ca61-4284-d15d-da1b-ad130060e40d.png)


3\. アプリ作成
Webアプリのプロジェクトを作成
![スクリーンショット 2024-01-06 13.55.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/af42f941-d8ab-4a5d-7b48-544ddd312148.png)
![スクリーンショット 2024-01-06 13.56.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/60d4ad14-9fc4-86f8-3ed9-0b652606f00d.png)

## 2. Firestoreの準備
![スクリーンショット 2024-01-06 14.06.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/11679c5a-4ccd-4b4c-a629-9d4d7606d07d.png)
![スクリーンショット 2024-01-06 14.07.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/8cf8444e-802d-3084-c0c1-2cd0cef7e656.png)
![スクリーンショット 2024-01-06 14.08.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/caf8beaf-8765-0257-96a6-59cc070e3646.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/abb94879-a284-01e4-eb44-24018a4d13ce.png)

## 2.2 Firestoreでコレクション作成
![スクリーンショット 2024-01-06 14.12.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/572e720e-cf19-8b24-80be-d56b7518b73a.png)
![スクリーンショット 2024-01-06 14.15.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/151f2b17-7fe2-6e36-180c-785fa67fc7d1.png)
![スクリーンショット 2024-01-06 14.15.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/ebba470c-c6b2-862c-b85b-2c4a43510a42.png)

## 3. TypeScriptの準備
1\. ディレクトリ作成
 `firebase_typescript`というディレクトリを作成。

2\. yarn init実行
```shell: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
```shell:ライブラリのinstall
~/develop/firebase_typescript$ yarn add firebase dotenv
~/develop/firebase_typescript$ yarn add typescript --dev
```

4\. ソースコード

```shell:ディレクトリ構成
~/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
```

```json: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"
  }
}
```

```ts: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);
```

```ts: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);
```

### 実行結果
```shell:実行結果
~/develop/firebase_typescript$ ts-node users.ts              
sxsUyqyyuVIK4sfVktne => {"name":"koji","email":"koji@gmail.com"}
```