- ■はじめに
- ■Firestoreとは？
- ■Firestoreのデータ構造
- ■Firebaseプロジェクトを作成する
- ■Firebase SDKの追加
- ■FirebaseSDKのセットアップ
- ■Firestoreデータベースを作成する
- ■TODOアプリでFirestoreに触れてみる
- ■まとめ
■はじめに
こんにちは。
株式会社iimonでフロントエンドを担当している白水です。
普段、フロントをメインで開発しているのですが、データベースにデータを持たせたいなと思い、Firestoreを触りました。
今回は、Firestoreを使った「CRUD」を体験する記事になります。
■Firestoreとは？
Firestoreデータベースは、Firebaseが提供する2つのデータベースのうちの1つです。
１つが「Realtime Database」で、もう１つが「Cloud Firestore」です。
Firestoreは、NoSQLデータベース（SQLを用いないでデータの作成・取得・更新・削除ができる）です。
Firestoreデータベースを使用する利点の１つは、データの同期です。 チャットアプリなどのデータが変更されると、リアルタイムで更新が反映されるなどです。
Firestoreデータベースを使用するもう一つの利点は、サーバーサイドのコードを使用せずに、クライアントサイドのアプリから直接データベース内のデータを簡単に「作成・取得・更新・削除」できることです。
■Firestoreのデータ構造
Firestoreのデータ構造
コレクション（Collection）
- コレクションは「データのグループ（フォルダのようなもの）」
- Firestoreデータベース内に、複数のコレクションを追加できる。
ドキュメント（Document）：
- データを持つ単位で、キーと値のペア（JSONのような形式）で情報を保存される。
- ドキュメントの中に、さらにコレクションを持つことも可能（サブコレクション）
サブコレクション（Subcollection）
- ドキュメント内に含まれる別のコレクション
フィールド（Fields）
- 各ドキュメントが持つ具体的なデータ。
という４つの構造になっています。
Firestoreでは、データはコレクションの中にドキュメントとしてデータが保存されます。
Cloud Firestore データモデル | Firebase
■Firebaseプロジェクトを作成する
FirebaseのURLにアクセスして、ユーザー登録します。
そうすると、Firebaseコンソールが表示されます。
Firebase | Google's Mobile and Web App Development Platform
「プロジェクトを作成する」→「プロジェクト名」決めて、プロジェクトを作ります。
上記のような画面になれば、Firebaseプロジェクトの作成完了です。
■Firebase SDKの追加
Firebase SDK（Firebase Software Development Kit）は、Firebaseプラットフォームを利用するためのツールの集まりです。
Firebaseは、アプリケーション開発をサポートするさまざまな機能をクラウドで提供しており、認証、データベース、アナリティクス、ファイルストレージなどが含まれます。
Firebase SDKを使用することで、これらの機能をアプリケーションに簡単に統合でき、労力を大幅に削減できます。
Webアプリを作るので、「Web」を選択します。
「アプリ名」を入力して登録します。
■FirebaseSDKのセットアップ
「プロジェクトの設定」→「SDK の設定と構成」を確認します。
❯ npm install firebase
npm install firebaseを実行します。
node_modulesを確認すると、Firebase SDK（ツールキット）がインストールされていることがわかります。
firebase-sdkの初期化ファイルを作成して、Firebaseコンソールのコードを貼り付けます。
■Firestoreデータベースを作成する
「構築」→「firestore Database」→「データベースを作成」をクリックします。
データを保存する場所を尋ねられるので、「asia-northeast1 (Tokyo)」を選択します。
今回は「テストモードで開始する」にします。
■TODOアプリでFirestoreに触れてみる
◆環境構築
// SSH ❯ git@github.com:shiramizu-junya/company-tech-blog.git // HTTPS ❯ https://github.com/shiramizu-junya/company-tech-blog.git
まずは、リポジトリをcloneします。
❯ cd 2025-02-04-firestore-sample
❯ npm install
❯ npm run dev
2025-02-04-firestore-sampleディレクトリを使いますので、cdで移動します。
npm installして、npm run devで実行します。
firebaseConfigとCOLLECTION_NAMEにfirebaseの設定情報と、firestoreのコレクション名を貼り付けます。
◆Firestoreへのデータ追加
Firestoreにデータを追加する場合は、addDoc()というFirestoreが用意しているメソッドを使います。
- 第１引数：FirestoreDBとコレクションへの参照オブジェクト
- 第２引数：コレクションに保存する情報
これらを渡すことで、Firestoreにデータを追加する事ができます。
const app = initializeApp(firebaseConfig); const db = getFirestore(app); const dbRef = collection(db, COLLECTION_NAME);
dbRefは、FirestoreDBのコレクションへの参照オブジェクトになります。
保存すると、コレクションの中でドキュメントができます。
このドキュメントには、Firestoreが一意なIDを付与してくれます。
そのIDに紐づく形で、データが保存されます。
データの追加は、addDocとsetDocが有るようです。
違いは、以下になります。
| メソッド | 自動ID生成 | 既存データの更新 | 指定IDの使用 |
|---|---|---|---|
| addDoc | ⭕️ | ❌️ | ❌️ |
| setDoc | ❌️ | ⭕️ | ⭕️ |
Cloud Firestore にデータを追加する | Firebase
◆Firestoreのデータ更新
Firestoreのデータを更新するには、Firestoreが用意しているupdateDoc()メソッドを使います。
const dbRef = doc(db, COLLECTION_NAME, id);
更新するには、どのDBの、どのコレクションの、どのドキュメントを更新するのか決める必要があるため、
doc()の引数に「DB」と「コレクション名」と「ドキュメントID」を渡しています。
doc()の戻り値が、ドキュメントへの参照オブジェクトになります。
データの更新をするにはupdateDoc()の引数に更新するコレクションやドキュメントのIDと、更新したい情報を渡すことで更新できます。
Cloud Firestore にデータを追加する | Firebase
◆Firestoreのデータ削除
フィールドを削除するには、deleteDoc()メソッドに、削除するドキュメントIDを渡すことで、ドキュメントIDのデータを削除することができます。
Cloud Firestore からデータを削除する | Firebase
◆Firestoreのデータ一覧取得とリアルタイムアップデート
Firestoreへのデータ追加・更新・削除を、画面にリアルタイムに反映させるには、onSnapshot()メソッドを使います。
- 第１引数：FirestoreDBのコレクションへの参照
- 第２引数：コールバック関数
onSnapshot()メソッドを使うと、Firestoreのデータに変化があると、第２引数で指定したコールバック関数が発火します。
その際、コールバック関数の引数に最新のデータが全て入ってくるので、そのデータを使って再レンダリングしています。
Cloud Firestore でリアルタイム アップデートを入手する | Firebase
■Firestore無料枠
20,000/日〜50,000/日まで、データ読み書き・削除ができるので、気軽に試せるかなと思います。
https://cloud.google.com/firestore/pricing?hl=ja
■まとめ
フロントもバックエンドも両方となると、大変だなと感じる方は、Firestoreにデータもたせるのもいいのかなと思いました。
しかし、柔軟な構造でデータを持てる（ex. ある人は住所を持っていて、別の人は持っていないや、結合は苦手）なので、データのもたせ方は難しそうだなと感じました。
リレーションを使用して、外部キーで関連付けしたり、JOINを使って複雑なデータの結合をしたい場合は「supabase」の方がいいのかなと感じました。
最後まで読んでくださりありがとうございます。
また、現在弊社ではエンジニアを募集しています！
この記事を読んで少しでも興味を持ってくださった方は、ぜひカジュアル面談でお話ししましょう！
iimon採用サイト / Wantedly / Green
