React NativeでFirebase Realtime Databaseを使ってみた

はじめに

この記事は、Udemy の React Native, Firebase, Expo でアプリ開発をゼロから始めよう！
を終えた後にFirebase Firestore からFirebase Realtime Database に変えてみたことに関する記事になります。

初めてReact Native を触ってみた方におすすめの講座になっていますので、講座終了にちょっと変えてみたいという方に見てもらえればなと思います

Firebaseプロジェクトの作成

まず、Firebaseコンソールで新しいプロジェクトを作成しました。プロジェクトの作成は非常に簡単で、数クリックで完了します。その後、Realtime Databaseを有効にしました。

Firebase SDKのインストール

React NativeプロジェクトにFirebaseを追加するために、以下のコマンドでfirebase をインストールします。

npm install firebase

このコマンドで、FirebaseのJavaScript SDKをインストールします。

Firebaseの初期化

Firebaseを初期化するために、Firebaseコンソールから取得した設定情報を使用しました。
設定はsrc/config.tsに記載しました。

import { initializeApp } from 'firebase/app'
import { getDatabase } from "firebase/database"

const firebaseConfig = {
  apiKey: process.env.EXPO_PUBLIC_FB_API_KEY,
  authDomain: process.env.EXPO_PUBLIC_FB_AUTH_DOMAIN,
  projectId: process.env.EXPO_PUBLIC_FB_PROJECT_ID,
  storageBucket: process.env.EXPO_PUBLIC_FB_STORAGE_BUCKET,
  messagingSenderId: process.env.EXPO_PUBLIC_FB_MESSAGING_SENDER_ID,
  appId: process.env.EXPO_PUBLIC_FB_APP_ID,
  databaseURL: process.env.EXPO_PUBLIC_FB_DATABASE_URL,
}

const app = initializeApp(firebaseConfig)
const database = getDatabase(app)

export { app, database }

データの書き込み

データベースにデータを書き込むのは非常に簡単で、以下のコードでユーザー情報をデータベースに保存できます。

import { ref, set } from "firebase/database"
import { auth, database } from "../../config"

const dbRef = ref(database, `users/${auth.currentUser.uid}`)
set(dbRef, {
    name: 'John Doe',
    age: 30
})
.then(() => {
    router.back()
})
.catch(() => {
    Alert.alert('更新に失敗しました')
});

データの読み取り

データの読み取りも簡単に行え、以下のコードでデータを取得できます。

import { get, ref } from "firebase/database"
import { auth, database } from "../../config"

const dbRef = ref(database, `users/${auth.currentUser.uid}`)
get(dbRef)
.then((snapshot) => {
    if (snapshot.exists()) {
        const RemoteBodyText = snapshot.val().bodyText
        setBodyText(RemoteBodyText)
    } else {
        Alert.alert("ユーザが存在しません")
    }
})
.catch(() => {
    Alert.alert("ユーザデータの取得に失敗しました")
})

セキュリティルールの設定

開発中はテストモードを使用しましたが、公開前には適切なセキュリティルールを設定することが重要です。Firebaseコンソールで簡単に設定できます。

{
  "rules": {
    "users": {
      "$uid": {
        ".read": "$uid === auth.uid",
        ".write": "$uid === auth.uid",
      }
    }
  }
}

この設定では、readとwriteは作成者本人のみが可能です。

使ってみた感想

Firebase Realtime Databaseは、リアルタイムでデータを同期する必要があるアプリに非常に適しています。設定も簡単で、すぐに使い始めることができました。ただし、セキュリティルールの設定には注意が必要です。デフォルトのままでは誰でもデータにアクセスできるため、公開前に必ず設定を見直すことをお勧めします。また、Firebase Realtime Databaseをサービスとして使っていく場合の料金が気になりますね...orz

まとめ

Firebase Realtime DatabaseをReact Nativeで使用する方法を紹介しました。リアルタイムなデータ同期が必要なアプリを開発する際には、ぜひ試してみてください。