Firebase Cloud Firestoreの管理ツールをNextJSで実装する（2）

2020年12月15日

Firebase Cloud Firestore の管理ツールを NextJS で実装する（2）

前回の投稿では、NEXT のプロジェクト作成と Firebase admin SDK を使うための設定の紹介をしました。今回は、NEXT のページから Firebase admin SDK を利用する方法について紹介します。

Firebaase admin SDK はサーバー側で使う！

もちろん、Firebase の通常の SDK を使えば、NEXT のページから Firebase のリソースにアクセスする事ができます。これは、React や Vue で Firebase の通常の SDK を使う場合と基本的に同じです。
あるいは、Firebase の CDN のを読み込んで使うことも可能です。
しかし、この場合はあくまで Web ブラウザ（フロントエンド）からのアクセスで、Firebase admin SDK を使う恩恵を余り受けることができません。
今回、NEXT を使って Firebase Clud Firestore の管理ツールを作る例を紹介する大きな理由はサーバー側から Firebase のリソースにアクセスするのが大きな理由です。

NEXT のテンプレートにある API の機能を利用する

NEXT のフレームワークはサーバー側のレンダリングに対応するため、バックエンドのプログラムも利用できるのが最大の魅力です。「create-next-app」で作成する NEXT のプロジェクトのテンプレートの中にもその機能がすでに組み込まれています。

まずはテンプレートの API の機能を理解する

「create-next-app」で NEXT のプロジェクトを作成すると。「pages」ホルダの下に、「api」というフォルダが作られます。

「pages」は、Web サイトの各ページに相当する記述を置くようになっていて、ファイルの名前から拡張子（「.js」や「.tsx」）を取ったパスを指定すると、そのファイルに記述したページが表示されるようになっています。その下にある「api」のフォルダの下のファイルは、サーバー側のエンドポイント（end point）を指定するような用途に使えるようになっています。

NEXT のプロジェクトを作成すると、この「api」のフォルダの下にhello.jsというファイルが作られますが、このファイルでエンドポイントの処理を記述すると、各ページからサーバー側（バックエンド）の処理を呼び出すことができます。

標準で作成されるhello.jsの例です。

// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
export default (req, res) => {
  res.statusCode = 200;
  res.json({ name: "John Doe" });
};

(「create-next-app」で作成される、「hello.js」より引用)

これは、シンプルな処理で、このエンドポイント「/api/hello」が指定されると、

{ "name": "John Doe" }

が呼び出し元に返されます。

この処理を呼び出すには？

API の処理は基本的にはサーバー側の処理です。従って、管理用の PC で実行する場合でも、「ネットワーク」を介したアクセスになります。簡単に言うと開発用のローカルで動いているサーバーに Web ブラウザからネットワーク経由でアクセスするという形になります。

ネットワークのアクセスは HTTP を使うので、npmのモジュールのaxiosを使って呼び出すことにします。

シンプルな例です。

import * as React from "react";
import axios, { AxiosResponse } from "axios";
interface IProps {}
interface IState {
  message: string;
  error: string;
}
export default class Test extends React.Component<IProps, IState> {
  constructor(props: IProps) {
    super(props);
    this.state = {
      message: "",
      error: "",
    };
  }
  /** "/api/hello"の呼び出し */
  callHello(): void {
    axios({
      url: "/api/hello",
      method: "GET",
    })
      .then((res: AxiosResponse): void => {
        console.log(res.data);
        this.setState({
          message: res.data.name,
          error: "",
        });
      })
      .catch((error: any): void => {
        console.log(error.message);
        this.setState({
          message: "",
          error: error.meesage,
        });
      });
  }
  /** 表示をクリア */
  clear(): void {
    this.setState({
      message: "",
    });
  }
  render(): JSX.Element {
    return (
      <React.Fragment>
        <button className="btn btn-primary" onClick={() => this.callHello()}>
          Call Hello
        </button>
        <button className="btn btn-secondary" onClick={() => this.clear()}>
          Clear
        </button>
        <div>
          <h1>{this.state.message}</h1>
          <h1>{this.state.error}</h1>
        </div>
      </React.Fragment>
    );
  }
}

「Call Hello」ボタンを押すと、先ほどの API のエンドポイントからの応答の「John Doe」が表示されます。また、「Clear」ボタンを押すと、表示がクリアされるというシンプルなものです。

この記述を例えば、「test.tsx」という名前で保存すれば、「/test」でこのページが表示されて、ボタンを押すとバックエンドの処理を呼び出すという仕組みが作れます。

管理ツールにするには？

これを管理ツールにするには、ページの部分に管理ツールのユーザーインターフェースを作って、呼び出される API の方に、Firebase の処理を記述しておけば良いことになります。
見た目には、余り React のアプリと変わりません。
この方法は当然、Web アプリではなく、PC 上で動作するデスクトップアプリのような使い方もできます。こうした方法を理解して実装できるようになると、Web アプリ、Web サービスだけではなく、従来のデスクトップアプリのようなプログラムも、Javascript（Typescript）とフレームワーク（React や Next）で実現できることになります。

まとめ

今回は、NextJS を使って、Web ではなくローカルの環境でアプリを動作させるための簡単な仕組みを紹介しました。「create-next-app」で作成した、NEXT のプロジェクトのテンプレート（ひな形）を利用して、ユーザーインターフェースから実際の処理を呼び出すための方法について具体的な例を挙げて解説しています。
React/Next などのフレームワークは、Web に特化したものではなく、上手く利用すれば従来のデスクトップアプリのような機能も実現可能です。この連載では Firebase Cloud Firestore の例を紹介していますが、応用範囲はとても広くなっています。
次回は、実際に Firebase のリソースにアクセスする例を紹介する予定です。

このブログを検索

シリコンバレースーパーウエア