React + Firebase (Cloud Firestore) の連携 - 技術ブログ的な（React中心）

はじめに

今回は、データベースにFirebase(Cloud Firestore)を使用して、フロントエンドと連携し、データベースを直接操作できるようにしていきたいと思います。
これを利用する利点は、バックエンドを記述する必要がなく、フロントエンド側でfirebaseライブラリーを使ってDBへの書き込み・読み込みが簡単にできることにあります。

Cloud Firestoreとは

Cloud Firestoreとは、firebase内で利用できるのNoSQLのデータベースのことです。
NoSQLデータベースというのは、非リレーショナルなデータベースを表す言葉で、「データベースの分類」を表す言葉です。
従来のデータベースはリレーショナルデータベース（RDB）と呼ばれるものであり、データを表形式で管理するデータベースです。イメージとしては、Excelの表のような形式でデータを管理するような感じです。

実際にやってみる

1. Firebaseで新規プロジェクトを立ち上げ、アプリを登録

まず最初に、Firebaseプロジェクトを作成し、そのプロジェクトにアプリを登録する必要があります。
アプリを Firebase に登録すると、Firebase プロジェクトのリソースとアプリを接続するためのコードが提供されます。ここの詳しい方法は別記事にて書こうと思います。

2. React Appとの連携

$ npx create-react-app --template typescriptescript

で新規アプリを立ち上げたら、Firebaseをインストールするために以下のコマンドを叩きます。

$ npm install firebase

インストール出来たら、次はsrcディレクトリにfirebace.tsxというファイルを作成します。
ここにはアプリケーションの初期化処理を記述します。
Firebaseのプロジェクト概要の横にある歯車マークをクリックし、プロジェクトの設定に飛びます。
マイアプリ内の SDKの設定と構成で、npmにチェックを入れ、「次に Firebase を初期化し、使用するプロダクトの SDK の利用を開始します。」以下のコードをコピーします。

// 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: "XXXXXXXXXXXXXXXXXXXX",
  authDomain: "XXXXXXXXXXXXXXXX",
  projectId: "XXXX",
  storageBucket: "XXXXXXX",
  messagingSenderId: "XXXXXXXXXXXX",
  appId: "XXXXXXXXXXXXXXXXXXXXXXXXX"
};

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

これで連携作業は終わりです。次回からはデータベースにテストデータを入力し、ブラウザに内容を表示させるところまでをやりたいと思います。