早押しボタンweb

Firebase Realtime Databaseの使い方

はじめに

Firebase Realtime Database は、リアルタイムでデータの同期が可能なNoSQLクラウドデータベースです。このガイドでは、Firebaseの登録からデータ操作、セキュリティルール、クライアントサイドでのリッスンまでを解説します。

1. Firebaseの登録とプロジェクト作成

2. Firebase SDK の導入

プロジェクトに Firebase を導入するには、以下のパッケージをインストールします。

1npm install firebase

次に、Firebaseを初期化するファイル（例：lib/firebase.ts）を作成します。

1import { initializeApp } from 'firebase/app';
2import { getDatabase } from 'firebase/database';
3
4const firebaseConfig = {
5  apiKey: 'YOUR_API_KEY',
6  authDomain: 'YOUR_PROJECT_ID.firebaseapp.com',
7  databaseURL: 'https://YOUR_PROJECT_ID.firebaseio.com',
8  projectId: 'YOUR_PROJECT_ID',
9};
10
11const app = initializeApp(firebaseConfig);
12export const database = getDatabase(app);
13

3. Realtime Databaseの有効化とセキュリティルール

例：全ユーザーが読み書きできるが、データ検証を行うルール

1{
2  "rules": {
3    ".read": true,
4    ".write": true,
5    "messages": {
6      "$messageId": {
7        ".validate": "newData.hasChildren(['text', 'user'])"
8      }
9    }
10  }
11}
12

4. データの追加・更新・削除

データの追加（push）

1import { ref, push } from 'firebase/database';
2import { database } from './lib/firebase';
3
4const messagesRef = ref(database, 'messages');
5push(messagesRef, {
6  text: 'こんにちは',
7  user: 'user1',
8  createdAt: Date.now()
9});
10

データの更新

1import { ref, update } from 'firebase/database';
2
3const messageRef = ref(database, 'messages/messageId123');
4update(messageRef, {
5  text: '更新されたメッセージ'
6});
7

データの削除

1import { ref, remove } from 'firebase/database';
2
3const messageRef = ref(database, 'messages/messageId123');
4remove(messageRef);
5

5. クライアントでのデータ更新のリッスン

リアルタイムにデータを監視するには、onValue を使用します。

1import { ref, onValue } from 'firebase/database';
2
3const messagesRef = ref(database, 'messages');
4onValue(messagesRef, (snapshot) => {
5  const data = snapshot.val();
6  console.log(data);
7});
8

6. 注意点

まとめ

記事一覧へ戻る