TypeScript & React & Firebase で何かつくってみる4 Functions

正式名称は Cloud Functions for Firebase か. なぜ Firestore だけが固有名詞なのか.

カードゲームを作ってみる

そろそろ実際に自分でアプリをつくってみる. なんとなくのイメージはあるが, そこまで具体的には考えていない. どうせ初心者だしそんなにすぐにはできそうもない. 作りながら考える.

ただ,プロジェクト名を card-game-field にしているように, カードゲーム的なものを考えている. とりあえずトランプでも操作しながらイメージを膨らませてみる.

CardGame.tsx

import React, { useEffect, useState } from 'react';
import { firestore } from '../firebaseApp';

type Card = {
 name: string,
 color: string,
}
type Deck = {
 cards: Card[],
}

function CardGame() {
 const [deck, setDeck] = useState<Deck>({ cards: [] });

 useEffect(() => {
   // 52枚のトランプを生成してデータベースに登録する.
   const deckRef = firestore.collection('fields').doc('deck');
   const cards: Card[] = [
     { name: '♠', color: '#000000' },
     { name: '♥', color: '#ff0000' },
     { name: '♦', color: '#ff0000' },
     { name: '♣', color: '#000000' },
   ]
     .map((suit) => [...Array.from(Array(13).keys()).map((i) => { return { name: suit.name + (i + 1), color: suit.color }; })])
     .flat();

   deckRef.update({ cards: cards });

   // デックを監視してカードに変化があれば受信する.
   deckRef.onSnapshot((doc) => {
     const deck = doc.data() as Deck | undefined;
     if (deck) {
       setDeck(deck);
     }
   });
 }, []);

 return (
   <div className="CardGame">
     <h2>Deck</h2>
     <div className="Deck">
       {
         // すべてのカードの内容を表示する
         deck.cards.map((card) => {
           return (
             <span style={{ color: card.color }}>
               {card.name}
             </span>
           );
         })
       }
     </div>
   </div>
 );
}

export default CardGame;

App.tsx

import React from 'react';
import './App.css';
import CardGame from './components/CardGame';

function App() {
 return (
   <div className="App">
     <div className="App-header">
       <h2>Cards</h2>
     </div>
     <CardGame />
   </div>
 );
}

export default App;

別に大したことはしていない. 前回のサンプルを多少変えて,コメントリストの代わりにトランプ52枚を登録して表示している.
・ トランプは 配列 で登録したので orderBy() は必要ない.
・ App.tsx に直接書くのをやめた.

実行すると以下のようになる.

Functions を試す

やはりゲームである以上, サーバ上で処理を行わなければ不正のし放題だ. 
 Cloud Functions for Firebase を使えばサーバ上で機能を実現できるらしい.

前回の失敗を踏まえて先にサイトを確認するが, 特に Firestore のような事前に必要な作業はなさそうだ.

先日の firebase init で Functions を選ばなかったことが気がかりだったが, Functions だけを初期化することもできた.

$ npx firebase init functions

設定が多少更新され, ./functions/ 以下に なにやら node.js のプロジェクトがまるごとひとつ増えた.

./functions/src/index.ts

import * as functions from 'firebase-functions';

// // Start writing Firebase Functions
// // https://firebase.google.com/docs/functions/typescript
//
// export const helloWorld = functions.https.onRequest((request, response) => {
//  response.send("Hello from Firebase!");
// });

なるほど, これがサーバ側に置かれるアプリというわけか.

とりあえず 上の index.ts のコメントアウトを外してデプロイしてみる.
functions 関連だけデプロイするときは以下のようにするらしい.

$ npx firebase deploy --only functions

Function URL というURLがでたのでアクセスしてみる.

ひとまず機能することはわかった.

サイト上で Functions を確認する

Firebase Console 上で登録内容を確認する.

登録されている. ただリージョンが 自動?で `us-central1` になっているのが気になる. この場では変えられそうにない. 手元にあるファイルのいずれかから設定できるのだろうか.

Firestore も同じように勝手に作ってくれればつまづかずに済んだのにという気もしなくもないが, あのつまづきがなければ リージョン について知る機会が遅れていただろう, とポジティブに捉えることにする.