Firebaseで作るWebアプリケーション - APIを作成する

9613 ワード
チュートリアル Firebase JavaScript JavaScript テキストリンク

今回やること

今回から、前回構築した環境に、機能を徐々に入れていきます。まずはサーバーサイドにAPIを一つ作成し、それをクライアント(Webブラウザ)から呼び出して結果を画面に表示するところまで行います。

Cloud FunctionsにAPIを用意する

Cloud Functionsを利用すると、簡単にサーバーサイドにAPIを作成することができます。

JavaScriptで作成した一つの関数が一つのAPIに対応し、関数の引数と戻り値を通してクライアントとやり取りを行うことができます。

クライアントから送られてきたデータは関数の引数に設定され、関数の戻り値でクライアントへデータを送り返す、という形になります。

APIを書く

ファイルfunctions/index.tsがCloudFunctions用のAPIを記述するファイルになっています。こちらにAPIを記述していきます。

import * as functions from 'firebase-functions';

export const helloWorld = functions.https.onCall(async (data, context) => {
  return {
    message: 'firebase!!!',
  };
});

APIをfunctions.https.onCallで定義します。exportすることで、外部からの呼び出しができるようになります。

return文で、JSON形式でクライアントへ応答することができます。ここでは適当に

{
  message: 'firebase!!!'
}

という固定のJSONを応答するように設定しています。

Hostingにクライアント側アプリを用意する

Hostingは、要はただのWebサーバーです。プロジェクトのディレクトリpublicの下にファイルを置くことで、Hostingに配置することができます。

public/index.htmlがデフォルトで設置されていますが、ここではこれをとりあえず改変します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>cmnty2020</title>

    <!-- update the version number as needed -->
    <script defer src="/__/firebase/7.15.0/firebase-app.js"></script>
    <!-- include only the Firebase features as you need -->
    <script defer src="/__/firebase/7.15.0/firebase-auth.js"></script>
    <script defer src="/__/firebase/7.15.0/firebase-database.js"></script>
    <script defer src="/__/firebase/7.15.0/firebase-messaging.js"></script>
    <script defer src="/__/firebase/7.15.0/firebase-storage.js"></script>
    <script defer src="/__/firebase/7.15.0/firebase-functions.js"></script>
    <!-- initialize the SDK after all desired features are loaded -->
    <script defer src="/__/firebase/init.js"></script>
  </head>

  <body>
    <div id="app">
      {{message}}
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      document.addEventListener('DOMContentLoaded', function() {
        new Vue({
          el: "#app",
          data: {
            message: ""
          },
          async mounted(){
            let res = await firebase.functions().httpsCallable('helloWorld')();
            this.message = res.data.message;
          }
        });
      });
    </script>
  </body>
</html>

bodyにdivを一つだけ設置して、それをVueのコンポーネントにしています。Vue.jsを知らないと読み辛いかと思いますが、肝心のAPI呼び出し部分は

let res = await firebase.functions().httpsCallable('helloWorld')();
this.message = res.data.message;

の箇所になります。firebase.functions().httpsCallableでAPIを呼び出すことができます。引数にAPI名を指定します。

httpsCallableの戻り値は指定のAPIを呼び出すための関数になるので、後ろの()でその関数を実行しています。

APIから帰ってきたデータはdataの中に設定されます。

次の行では、得られたAPIからのデータを画面に表示しています。

作ったものをfirebaseへ配置する

$ firebase deploy

とコマンドを叩くと、編集したプロジェクトのファイルがFirebaseへとアップロードされます。

成功すれば最後にHostingのURLが表示されるので、これを開けば動作を確認できます。

ここでは、サーバーから返却している firebase!!! が表示されます。

続く…