Firebase Cloud Firestoreの管理ツールをNextJSで実装する（3）
記事IT・テクノロジー
Firebase Cloud Firestoreの管理ツールをNextJSで実装する（3）
前回の投稿では、作成した NEXT のプロジェクトのテンプレートの API を呼び出すやり方を具体的な例を使って紹介しました。この記事では実際に Firebase のデータベースにアクセスする API を呼び出すやり方について紹介します。
データベースの管理は基本的に以下の４つの機能があれば実現できます
＊ 既存のデータの取得
＊ 既存のデータの更新
＊ 既存のデータの削除
＊ 新規データの追加
Cloud Firestore の既存のデータの取得
Firebase の Cloud Firestore のデータの更新や削除を行う場合、最初に保存されているデータを取得して、そのデータをもとに処理するのが自然です。
データベースのデータは、追加、更新、削除が発生するのが普通なので常に変わる可能性があります。したがって、あらかじめ表示するデータを準備しておくことはできません。基本は毎回データを Firebase Cloud Firestore から取得して表示する必要があります。
NEXT の場合、サーバー側でレンダリングを行うので、ページをロードする前にデータを取得しておく必要があります。つまり、サーバー側で動的にページの表示データをレンダリングすることになります。
これには「getServerSideProps()」という名前の関数を利用して取得します。
export async function getServerSideProps(): Promise<any> {
const pendinglist = await Admin.getData();
return {
props: {
datalist,
},
};
}
上の例では、別のファイルに「getData()」という関数を用意しておいて、この関数を利用して Firebase Cloud Firestore からデータを取得します。 この関数の返す値、この例の場合、props.datalistが、ページにプロパティとして渡されます。この値を受け取って、表示すれば良いことになります。
テーブルにデータを入れて表示する例です。
render(): JSX.Element {
return (
<React.Fragment>
<Layout>
<Head>
<title>データの表示</title>
</Head>
<div>
<table className="table table-hover">
<thead>
<tr className="table-primary">
<th>ID</th>
<th>名前</th>
<th></th>
</tr>
</thead>
<tbody>
{this.state.datalist.map((data: TYPE.Data) => (
<tr key={data.id}>
<td>{data.id}</td>
<td>{data.name}</td>
<td>
<button
className="btn btn-primary"
onClick={(e:React.MouseEvent<HTMLButtonElement>) => event(e)}
>
</button>
</td>
</tr>
))}
</tbody>
</table>
</div>
</Layout>
</React.Fragment>
);
}
データの処理
各行にボタンがありますが、これがクリックされたら更新、削除などの処理を行うようにします。例えば削除を行う場合は
event(e:React.MouseEvent<HTMLButtonElement>) {
const id:string = e.currentTarget.id;
axios({
method: CONSTANT.HTTP_POST,
url: CONSTANT.API_FIREBASE,
data: {
id: id,
api: CONSTANT.API_DELETE,
},
})
.then((res: AxiosResponse) => {
if (res.data.success) {
// Normal completion
} else {
// Error completion
}
})
.catch((error: any) => {
/* Error */
});
}
のように記述します。 ちょっとわかりづらいかもしれませんが、ページは Web ブラウザで表示されていて、基本的なユーザーインターフェースの処理は Web ブラウザで動いています。 一方で、実際の Firebase のリソースにアクセスして行う処理は「仮想バックエンド」つまり、管理ようの PC で動かしているサーバー側で行うために、ネットワークアクセスをする必要があります。
実際に処理を行う部分
あとは、処理をする部分を作ります。実際に処理を行う部分は、「仮想ネットワーク」アクセスを受け付けるバックエンドの処理を作ります。先日から紹介した物と同じ要領で、「pages」の下に「api」というフォルダを作成してそこにバックエンドのエンドポイントに相当する処理を記述します。
あとは、バックエンドで実際に Firebase の処理を行う関数（メソッド）を呼び出せば処理を行うことができます。
export default async (req: NextApiRequest, res: NextApiResponse) => {
res.statusCode = 200;
const id: string = req.body.id;
const api: string = req.body.api;
let result: boolean;
try {
switch (api) {
case CONSTANT.API_DELETE_TASK:
result = await Admin.deleteTask(id);
result = true;
break;
case CONSTANT.API_XXXXX:
//.....................
break;
default:
result = false;
break;
}
} catch (error) {
result = false;
}
res.json({ success: result });
};`
まとめ
NEXT を使って Firebase のデータベースの管理アプリをつくる場合は、まずは、データ処理とユーザーインターフェースを分けて考えます。
基本的に、ユーザーインターフェースは Web ブラウザで動作します。 一方で、Firebase のデータ処理は、管理用の PC で起動している「サーバー側」でおこないます。まずは、この境界をはっきりさせるのが重要です。
ユーザーインターフェースのデータの選択、入力と行った処理は通常の Web アプリやサービス同様に Web ブラウザで行うので要領は通常のフロントエンドの実装と同じです。
しかし、実際の Firebase のデータ処理はバックエンドで行われるので、フロントエンドからは「ネットワーク」を利用してやりとりをする必要があります。
以上のことに注意すればあとは、実際の処理を記述するだけです！
「処理を行う場所」と「やりとりの方法」がポイントです。
NEXT を学習する場合、こうしたローカルで動作する管理アプリなどから始めるとわかりやすいかと思います。
