本日の記事では、Reactを使って、Firebase の Realtime Databaseからデータを取得する方法を解説します。

ちなみに、ReactはNext.jsを使ってますので、適切にあなたの環境に読み替えてください。

根幹となる部分は全部同じです。

Firebase Realtime Databaseを作成する

Firebase Realtime Databaseの管理画面からデータベースを作成しましょう。

データベースの設定をします、ここは米国のままで良いでしょう。

ロックモードを選択して、後でログインユーザーのみデータにアクセスできるようにルールを書き換えます。

もし、最初はテストモードで誰でもアクセスできるようにしたければ、テストモードで開始してください。

こうすると、データベースが作成されました。

まだ中身が何も入ってないので、適当にデータを入れます。

test.jsというファイルを作っておいて、これをインポートします。

こういうjsonをインポートしてください。

すると、こういう感じでデータが作成されます。

次に、データベースのルールを変更します。

先ほどは、ロックモードでデータベースを作ったので、全てのアクセスは拒否されます。

これを、下記のように、authが通ってるユーザーだけ認証するようにします。

（詳しくは下記のブログは少し参考になります。Firebaseでauthを通すやり方です。）

OFF.TOKYO：プログラミング課題を抱えてる人を助けるWebブログ

2021.05.05

Reactでfirebaseを使ってGitHubログインをする方法

https://off.tokyo/blog/react-firebase-github

前提条件 nextjsのプロジェクトでTypeScriptを導入下記の記事を参考にfirebaseでメアドログインができる状態   GitHubアカウントを作る まず、firebaseでGitHubアカウントでログインさせるために、下記の情報が必要です。  認証コールバックURLは自動で吐き出されるので、GitHubアプリを作るときは、テキトーな名前でコールバックURLを最初入れておけば後で変更できるので、 上記の画像のところに、自動でコールバックURL指定があるので、ここの値をGitHUubアプリに後で更新してもいいです。&...

ここまで来たら、次はfirebaseの設定ファイルを作ります、これを作らないとデータベースにアクセスできません。

ここの書き方なども今回は割愛します。

import "firebase/auth";
import "firebase/firestore";
import "firebase/database";

import firebase from "firebase/app";

const config = {
apiKey: process.env.API_KEY,
authDomain: process.env.AUTH_DOMAIN,
projectId: process.env.PROJECT_ID,
storageBucket: process.env.STORAGE_BUCKET,
messagingSenderId: process.env.MESSAGINGSENDER_ID,
appId: process.env.APP_ID,
measurementId: process.env.MEASUREMENT_ID,
};
// initializeを複数回走らせない
if (firebase.apps.length === 0) {
firebase.initializeApp(config);
}

const database = firebase.database();
const auth = firebase.auth();
export { auth, database };

それで、最後に pages/posts/[id].tsx などに、下記のように書いていきます。

import { useMemo } from "react";
import { useRouter } from "next/router";
import { useState } from "react";
import { database } from "../../utils/firebase";

const Post = () => {
const router = useRouter();
const { id } = router.query;
const [value, setValue] = useState("データ読み込み中");

const dbRef = database.ref("posts/" + id);
dbRef
.get()
.then((snapshot) => {
if (snapshot.exists()) {
console.log(snapshot.val());
setValue(snapshot.val());
} else {
console.log("データ読み込み中");
}
})
.catch((error) => {
console.error(error);
});

return <p>Post: {value}</p>;
};

export default Post;

こんな感じですね！

こうすると、ブラウザで確認(https://localhost:3000/posts/1)すると、下記のようにデータが取得できます。