FireStoreの初期設定

Firebase バージョン9での初期設定について、躓いたので手順を残しました。

ここでは、Firestoreでプロジェクトの作成が終わった後の、react/nextjsプロジェクト側での初期設定の手順について記載します。

初学者の方たちのお助けになれば幸いです！！

参考にした動画
Getting Started with Firebase 9 #4 - Firestore Setup & Fetching Data

前提環境

前提として私が初期設定した時のFirebase、Nextjs、Reacのバージョンについて以下に記載します。
以下のバージョンで一緒に構築したい方は、それぞれのケースに合わせてインストールしてください。

まだインストールしていない場合：

npm install <<パッケージ名（firabase/react/next）>>@<<バージョン>>

バージョンを変更したい場合：

以下コマンドで一旦アンインストールして上記コマンドで再インストール

npm uninstall <<パッケージ名（firabase/react/next）>>@<<バージョン>>

"firebase": "^9.4.1"
"next": "12.1.0"
"react": "17.0.2"

.envファイルの作成

Firestoreのプロジェクト毎に割り当てられるSDK情報群を.envファイルに設定していきます。
プログラムファイルからFirestoreプロジェクトにつなぎに行く時に必要な情報です。

SDKの参照

Firebaseのプロジェクト概要＞プロジェクトの設定下にあるマイアプリという画面に、SDKの設定と構成があるので、構成を選択してください。
すると、自分のプロジェクトのSDK情報が見れます。

SDK情報は、別の人に参照されないようにしましょう！
※gitへpushする際は、.envは.gitignoreに追加しておきましょう。

.envの作成

以下のように、ローカルのプロジェクトフォルダ直下に.envファイルを作成し、それぞれの編集毎に、SDKの情報を代入していきます。画像は、Reactの場合の書き方ですが、Nextjsの場合は、REACT_APP_ hogehoge→NEXT_PUBLIC_ hogehogeに書き換えましょう。

注意点１
必ず、ローカルのプロジェクトフォルダ直下に.envファイルを作成しましょう！

注意点２
Nextjsを使っているか、Reactを使っているかで書き方が違うので以下注意しましょう。
（私は個々で読み込めず、つまずきました汗）

Reactの場合：　REACT_APP_ hogehoge
Nextjsの場合：　NEXT_PUBLIC_ hogehoge

React（or Nextjs）とFirebaseの連携

.envで設定したSDK情報を使って、firebaseへ繋ぎにいくプログラムファイルを用意します。
ファイル名は何でもいいのですが、私はわかりやすくfirebase.tsにしました。

import { initializeApp, getApps } from "firebase/app";
import { getFirestore } from "firebase/firestore";

!getApps().length &&
  initializeApp({
    apiKey: process.env.NEXT_PUBLIC_FIREBASE_APIKEY,
    authDomain: process.env.NEXT_PUBLIC_FIREBASE_DOMAIN,
    databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE,
    projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
    storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BACKET,
    messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_SENDER_ID,
    appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
  });

export const db = getFirestore();

ここで私が躓いたポイント

最初、!getApps().length &&を記載しておらず以下エラーを取得していました。
エラー内容：
Firebase App named '[DEFAULT]' already exists

参考にした記事：
Firebase App named '[DEFAULT]' already existsというエラーの解決方法

これで初期設定が完了です！

Firebaseからデータ取得してみる

初期設定は終わりましたが、本当にこれでFirebaseからデータ取得できるのかしら。。と不安ですよね。

では、テストデータをFirebaseのデータベースで作成し、そのデータから取得できるか確認してみましょう！

Firestoreでのデータベース作成方法やテストデータ作成方法については、割愛させていただきます。一番頭に紹介させていただいた動画にて作成方法が出ているのでそれを参考に、テストデータを作成してみてください！

データベーステストデータ

私は以下のようなテストデータを用意しました。

ローカルからデータ取得

以下と同じプログラムファイルを用意して、ローカルからデータの取得をしてみましょう。
(以下は拡張子tsのtypescriptファイルを作成して記載しています。）

import { db } from "../src/firabase";
import { collection, getDocs } from "firebase/firestore";

const Test: React.FC = () => {
  // コレクション（test)の取得
  const colRef = collection(db, "test");

  // コレクションから全てのドキュメントを取得してconsoleに出力
  getDocs(colRef).then((snapshot) => {
    console.log(snapshot.docs);
  });

  return <div></div>;
};

export default Test;

記載が終わったら、一旦control + Cでプロジェクトを終了し、
npm run dev / yarn devで立ち上げ直し、
ローカルで該当のページ＞検証＞consoleタグを開くと。。。

ちゃんと取得できてそうです！