Firebaseの技術情報サイト

Firebaseの技術情報サイト

Firebase活用の為の技術情報サイトです

FirebaseバックエンドのAPIを決める？

FirebaseバックエンドのAPIを決める？

Firebaseでバックエンドの処理を実装する場合、フロントエンドとどのようにやり取りをするかを決めるのが「バックエンドとのAPI（インターフェース）」です。

インターフェースは、URLのような形で場所を指定する形で決めるのが一般的です。フロントエンド側ではURLで指定して、バックエンド側では、指定されたURLに応じた処理をする仕組みです。

実装する方法は沢山ありますが、この記事ではバックエンド側は「express」のフレームワークを利用した方法を解説します。このフレームワークを使うと、HTTPのサーバーを準備して、URLをチェックするまでの設定をシンプルなコードで実現することができるので、初心者でも簡単にバックエンド（サーバー）側の実装ができます。

フロントエンドではURLを指定するだけです。

バックエンド側の実装

バックエンド側の実装の手順は、バックエンドのFirebaseのプロジェクトフォルダで実装します。「firebase init」でFirebaseのプロジェクトフォルダの初期設定で、バックエンドのファンクション（functions）を選択すると、実行後に「functions」というフォルダができているので、そのフォルダの下に実装します。

(*)「firebase init」を実行する前に「firebase-tools」と「firebase-admin」をインストールする必要があります。

$ npm install -g firebase-tools
$ npm install --save firebase-admin

この記事では、Typescriptを選択した場合を前提に解説します。Javascriptでも手順は基本的に同じですが、ソースコードの場所が異なります。

  • Typescriptの場合：functions/srcがTypescriptのソースコードを置くフォルダ
  • Javascriptの場合：functionsがJavascriptのソースコードを置くフォルダ

になります。

Typescriptの場合は、実行前にコンパイルを行う必要があります。「npm run build」をfuncitionsのフォルダで実行します。実行後は、functions/libにコンパイルで作られたJavascriptのコードが作られます。

Javascriptの場合はこの操作は必要ありません。

expressのインストール

最初に、npmを使ってexpressのインストールをします。

$ npm install express

Typescriptを使う場合は

$ npm install --save-dev @types/express

もインストールします。

バックエンドの基本的な実装

バックエンドの基本的な処理は、expressの初期化とルーティング処理です。 下のコードの例では「/api」が指定された場合の処理です。他のURL（場所）が指定された場合は同様に記述を追加して処理を記述します。

import * as express from "express"

const app:express.Express = express();

app.get("/api", (req:express.Request, res:express.Response)  => {
    // バックエンドの処理 (HTTP GETの場合)
}) 
app.post("/api", (req:express.Request, res:express.Response)  => {
    // バックエンドの処理 (HTTP POSTの場合)
})

この処理をFirebaseのファンクション（functions）として使うには以下の記述を加えます。

import * as from "firebase-functions";
......


export.app = functions.https.onRequest(app);

バックエンドの実装は以上です。あとは実際にバックエンドで行う処理を記述すれば完了です。

HTTPのメソッド

すでにお気づきだと思いますが、上のバックエンドのサンプルには「GET」と「POST」の記述があります。

ここで疑問の思うのはどのメソッドを使えばよいか迷いますよね？

機能的にはどのメソッドを使っても殆ど同じです。現在のHTTPでサポートされているメソッドは「GET」、「POST」以外にも、「PUT」、「PATCH」、「DELETE」なども使用可能です。外部のサービスのAPIでは、機能ごとに別のメソッドが割り当てられています。 機能上は「GET」と「POST」で殆どの処理は可能です。

このようにいろいろなメッソドが割り当てられている理由は「同じURL」で異なる処理をできるようにして、APIをわかりやすく整理するためです。

例えば、上の例で利用しているURLは「GET」と「POST」ですが、それぞれに別々の処理が可能です。

「/api」でサーバーから住所録を処理するという感じで決めたとします。

  • 「GET」はサーバーのデータベースにあるデータを取得する。
  • 「POST」はサーバーのデータベースにデータを追加する。

のように決めることができます。

  • 「DELETE」はサーバーのデータベースのデータを削除する。

のように機能ごとにメソッドを分けることができます。

メソッドを分けない場合は、APIの方を、「api_get」、「api_add」、「api_delete」の様にAPIを別々に決める必要が出てきます。

メッソドを利用した場合の方がわかりやすい形でAPIをまとめることができます。

データのやり取りの違い

もう一つの大きな違いはデータのやり取りに違いがあります。

GETはURLにデータを入れて渡す

GETメソッドの場合は、URLにデータを埋め込む感じでデータを渡します。

https://sv-sw.com/?id=123&name=sv-sw

のようにURLの一部として渡すデータを指定します。

一方でPOSTメソッドの場合はURLにはデータは入れません。

GETの場合はやり取りしているデータがURL上にあるので場合によってはセキュリティ上の問題になる場合があります。例えばパスワードなどはGETでやり取りするとパスワードがURL上で見えることになってしまうので問題です。

Webブラウザで簡単に送れるGET

GETメソッドの場合、Webブラウザで直接送れるというメリットもあります。 テストなどを行う場合、WebブラウザのURLの入力欄にURLを入れてバックエンドにリクエストを送ることができるので、テストを行う場合も簡単です。 Webブラウザは基本的にGETメソッドを使ってWebサーバーにデータの要求をしています。

POSTメソッドのバックエンドテストを行う場合、Postmanなど別のアプリでリクエストをバックエンドに送る必要があります。プログラムやフォームを作らない限り、Webブラウザから「POST」でバックエンド側にリクエストを送ることができないからです。

フロントエンドの実装

フロントエンドの実装は、どのようにバックエンド側にリクエストを送るかで変わってきます。すでに幾つか説明していますが、フロントエンドからバックエンドにリクエストを送るには主に以下の３つの方法があります。

  • WebブラウザのURL入力欄にURLを入れて送る
  • HTMLの入力フォームから送信
  • Javascriptのプログラムから送信

Webブラウザの入力欄にURLを入れて送る方法

結果的にWebブラウザの入力欄にURLを入れて送る場合は結構ありますが、直接送るデータも含めて利用者が入力する場合は余りありません。開発中のテストなどで利用する場合がほとんどです。 実際の実装では、HTMLに埋め込んだリンクに必要なデータを含めたURLを記述しておいてサーバーに送る場合がほとんどです。

<a href="https://sv-sw.com/?id=123&name=sv-sw">データの取得</a>

のような感じです。実際の実装例では一つのHTMLページから別のページに移動する際に、移動先のページにデータを渡したい場合などに利用します。 例えば、最初のページにデータのリストを表示しておいて、選択されたデータを移動先のページで表示する場合に、表示するデータを指定するのに使ったりします。

データの指定がない場合は全部のリストを表示して、指定がある場合は特定のデータを表示するなどのように処理を分けることも可能です。

HTMLのフォームから送信する方法

Javascriptなどを使わずにデータをサーバーに送る方法としてよく利用されます。

HTMLのフォームの記述の部分に贈り先と利用するHTTPのメソッドを指定します。

<form action="/api" method="post">
    <div>
        <label>ID</label>
        <input type="text" name="id"/>
    </div>
    <button type="submit">Submit</button>
</form>

のように指定します。

  • asctionで送り先のURLを指定します。指定しない場合は現在表示しているページのURLに送ります。
  • methodで送信に使うHTTPのメソッドを指定します
  • button のタイプをsubmitにするとボタンが押されるとデータをサーバ側に送ります

送るデータは、nameでタグの名前を指定します。上の例の場合は

{ id: "入力されたデータ"}

が送られます。この方法を使うと、フロントエンドでJavascriptを書かなくてもデータを送ることが可能です。また、ブラウザのJavascriptが無効になっている場合でもフォームからのデータをサーバー側に送ることができます。

Javascriptのプログラムで送る

これは、Javascriptのプログラムでデータを送る方法です。 Javascriptの実装方法はいろいろありますが、axiosなどの外部モジュールを利用して送るとコードの記述をシンプルにできます。

axiosを以下のコマンドで予め、インストールしておきます。

$ npm install "axios"

コードの例は以下の様になります。

import axios from "axios";

function submit(id) {
    axios(
        url: "/api",
        method: "POST",
        data:{
            id: id
        }
    ).then((res:AxiosResponse) => {
        // 成功した場合の処理
    }).catch((error:any) => {
        // 失敗した場合の処理
    })
}

のようなシンプルなコードで送信が可能です。

まとめ

Firebaseのバックエンドを利用する場合のAPIの実装はシンプルです。 コードそのものはシンプルな実装で実現可能です。

APIも操作するデータごとに名前（場所）を分けて指定すれだけです。

しかし、HTTPのメソッドをどう割り当てるかや、フロントエンドからどのようにバックエンドに送るかでフロントエンドからのデータの送り方は変わってきます。

表示のための処理（レンダリング）をフロントエンドで行うのかバックエンドで行うかでも変わってきます。その組み合わせはいろいろあって、実装のスタイルに分けて選択する必要があります。バックエンドで処理を行う場合、Javascriptのプログラムよりはフォームから直接送れるようにした方がフロントエンドの実装はシンプルになります。

ただ、Javascriptを使うとデータをフロントエンドに送る前にチェックできるなど便利な面もありますので、選択は実際の利用環境によるものが大きくなります。

色々なやり方はありますが、実装そのものはシンプルです。

← トップページに戻る

Silicon Valley Super Ware
4682 Chabot Dr. #10942 Pleasanton CA 94588 USA
プライバシーポリシー
お問合せ