この記事は先日初めてWEBアプリを作った時の備忘録です。
アプリの内容はさして重要じゃないので割愛します。
1.はじめに
今回作ったWEBアプリは以下技術スタックで構成されています。
開発言語：TypeScript
フレームワーク：Node.js
UIライブラリ：React
スタイリング：Tailwind CSS / lucide-react
グラフ描画：Chart.js
※上記内容は前記事「-環境構築編①-」を参照下さい。
https://qiita.com/tera_code/items/b59ad4a88b5b8e5810fa
データベース：Firebase Firestore
デプロイ：Firebase hosting
外部API連携：OpenAI API
本記事ではFirebase Firestoreを使う為の環境構築について記述します。
2.前提環境(2025年7月時点)
OS：Windows10 Home
ブラウザ：Google Chrome
エディタ：VScode
3.Firebaseのアカウント作成
まず、以下URLへ移動します。
簡単に登録する為に、ページ右上のログインを押します。
普段お使いのグーグルアカウントでログインを実施して下さい。
ログインに成功すると自身のグーグルアカウントのアイコンが表示されます。
4.Firebaseコンソールでプロジェクト作成
「Go to console」を押して、Firebaseコンソールに移動します。
「Firebase プロジェクトを作成する」を押して、プロジェクトの作成を開始します。
次にプロジェクト名を入力します。
分かりやすいように自身が作成するアプリ名と同じプロジェクトを作成します。
Geminiを有効にするか、Googleアナリティクスを有効にするか聞かれますが、
ここはお好みでいいと思います。
私はどちらも有効にしませんでした。
最後に「default account for Firebase」を選択して、
プロジェクトを作成を押します。
これでプロジェクトの作成は完了です。
最後に出てくる画面は続行を押しましょう。
5.FirebaseプロジェクトにFIreStore(DB)を追加
開かれたページの左側にある構築を押し、「FireStore Database」を選択します。
すると、「FireStore Database」が追加されます。
「FireStore Database」を押すと、ページ中央に以下画面が表示されるので、
データベースの作成を押しましょう。
データベースIDはdefaultのまま、ロケーションはasia-northeast1(Tokyo)を選択しましょう。
テストモードで開始するを選択してください。(誰でも読み書きできる状態)
本番環境に移行する時は、モードを切り替えて下さい。
これでデータベースの設定は完了です。
6.FireStoreにコレクションを追加
次にコレクションを追加します。
まず「コレクションを開始」を押して、コレクションIDを入力します。
入力したら次へを押します。
コレクションIDの入力が終わったら、次にドキュメントIDの入力を行います。
作成するWEBアプリの内容によって、手動で入力するか、自動で生成するか変わりますが、
私が作成したWEBアプリは匿名で意見を投稿するようなアプリなので、自動生成にしています。
入力が終わったら、保存を押します。
入力した値が保存されているのが確認できます。
これでコレクションの設定は完了です。
補足:FireStoreについて
FireStoreはNoSQLです。
私自身NoSQLを触ったのは初めてだったので、RDB(SQL)との
対比を表でまとめました。
| Firestore | SQLデータベース |
|---|---|
| コレクション（Collection） | テーブル（Table） |
| ドキュメント（Document） | レコード（Row） |
| フィールド（Field） | カラム（Column） |
| コレクションID | テーブル名 |
| ドキュメントID（自動/手動） | 主キー（Primary Key）など |
7.Firebaseプロジェクトにアプリを追加
次にWEBアプリとFirebaseを連携する為の設定をしていきます。
まず、Firebaseのホーム画面にある＜/＞を押します。
アプリ名を入力し、アプリを登録を押します。
この時Firebase Hostingにチェックは入れなくても大丈夫です。
『npm install firebase』と表示されている下側に
configが表示されるので、そちらをコピーして控えておきます。
ここで控えたconfigを後述の章で使用します。
8.Firebaseのインストール
まずターミナルを起動して、
プロジェクトのルートパスに移動し、以下コマンドを実行します。
cd project-dir
npm install firebase
※ project-dirはプロジェクトのルートパス
実行したら、project-dir/srcにfirebase.tsというファイルを作成し、
先程控えておいた内容を張り付けます。
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_PROJECT_ID.appspot.com",
messagingSenderId: "YOUR_SENDER_ID",
appId: "YOUR_APP_ID",
};
const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);
これでFireStoreをWEBアプリと連携するための準備は完了です。
9.おわりに
この記事はWEBアプリを作成した後に書いているのですが、
振り返ると細かい設定項目が多くて…。
やはり備忘録として記事化する必要性を強く感じました。
次回はFirebase Hostingについてまとめたいと思います。