Firebaseのススメ

こんにちは、なかにしです。

最近はNoSQL型のDBを選択される方が増えているように思います。
小規模アプリを早く、沢山出そうぜ！みたいな流れが来てるんですかね。

僕の今やってる案件でも、モノリスなものをマイクロサービス化しているチームがいて、
大変そうだなーと思ってます。（他人事）

さて、今回はNoSQLです！
いくつかありますが、最近ハマってるFirebaseにしようと思います。

とにかく楽で早いので好きです！

今回は新規でDBを立ち上げ、
ボタンを押したらデータ取得できるようなミニアプリを10分で作成しちゃいます！

いってみよう！

プロジェクト作成
初期設定
データを用意する
さいごに

プロジェクト作成

Firebaseの公式ページに移動し、右上の「コンソールへ移動」を押下。

上の方にある「+プロジェクトを追加」ボタンを押し、プロジェクトを作ります。
アプリ名は「Practice-app」にします。

アナリティクスはどっちでもいいので、
今回はスルーし、「プロジェクト作成」ボタンを押下。

プロジェクトが作成されるので、待ちます。

初期設定

プロジェクトの作成ができたので、初期設定をします。

真ん中の方のコードのアイコンをクリックし、プロジェクトのニックネームを決めます。
今回は「練習アプリ」にしました。

そうすると、これで設定しろよみたいなのが出てくるので、それ通りにやります。

vscodeで以下のコマンドを使用してReactのひな形を作り、
そこに上記の設定を突っ込みます。

npm create vite

ひな形ができました。

firebaseをインストールします。

npm i firebase

インストール後、package.jsonとかと同じ階層に、
firebaseConfig.js（もしくはts）というファイルを作成し、先ほどの設定を入れます。

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "aaaaaaaaaaaaaaaaa",
  authDomain: "aaaaaaaaaaaaaaaaa",
  projectId: "aaaaaaaaaaaaaaaaa",
  storageBucket: "aaaaaaaaaaaaaaaaa",
  messagingSenderId: "aaaaaaaaaaaaaaaaa",
  appId: "aaaaaaaaaaaaaaaaa"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

上記はFirebaseの初期化コードのみが書かれています。
今回はNoSQL型のFirestoreを使用したいので、Firestoreの設定コードを追記する必要があります。

結果として以下になります。

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getFireStore } from "firebase/firestore";   // 追記
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "aaaaaaaaaaaaaaaaaaaaaaaaaa",
  authDomain: "aaaaaaaaaaaaaaaaaaaaaaaaaa",
  projectId: "aaaaaaaaaaaaaaaaaaaaaaaaaa",
  storageBucket: "aaaaaaaaaaaaaaaaaaaaaaaaaa",
  messagingSenderId: "aaaaaaaaaaaaaaaaaaaaaaaaaa",
  appId: "aaaaaaaaaaaaaaaaaaaaaaaaaa",
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const db = getFireStore(app);     // 追記

export default db;   // 追記

データを用意する

上記で初期設定が完了したので、データを用意していきます。

Firebaseの画面に戻り、構築 > Firestoreを選択。
画面上部の「データベースを作成」を押下します。

今回はテストなので「テストモードで開始する」を選択し、
リージョンもそのままで「有効にする」を押下します。

すると、Firestoreが使えるようになるので、手動でデータをつっこんでいきます。

適当にデータを入れて…

あとはこれをReactのアプリ側から呼び出してあげるだけです！
以下のコードで呼び出しました。

import { collection, getDocs } from "firebase/firestore";
import { useState } from "react";
import "./App.css";
import db from "./firebaseConfig";

function App() {
  // taskを管理
  const [tasks, setTasks] = useState([]);

  /**
   * FireStoreからデータ取得して、useStateに突っ込む
   */
  const getData = async () => {
    const taskCollection = collection(db, "tasks");
    const snapShot = await getDocs(taskCollection);
    const tasks = snapShot.docs.map((doc) => doc.data());

    setTasks(tasks);
  };

  return (
    <div className="App">
      {tasks.map((task, index) => (
        <ul key={index}>
          <li>{task.task}</li>
          <li>{task.user}</li>
        </ul>
      ))}
      <button onClick={getData}>ボタン</button>
    </div>
  );
}

export default App;

これでボタンを押すと…