はじめに
皆様、こんにちは。『ねむりのガチャ』アプリ開発記の第6回です。
前回は、Reactを使って直感的に操作できる「寝る・起きる」ボタン（フロントエンド）を完成させました。しかし、アプリ上で獲得した睡眠ポイントは、まだユーザーのスマートフォン（ブラウザ）の中に一時的に存在しているだけです。
これをCloudflare D1（データベース）に永久保存するためには、フロントエンドからのデータを受け取り、安全にデータベースへ書き込むための「API（バックエンド）」が必要です。今回は、Cloudflare Pages Functionsを活用したAPIの構築と、強固なセキュリティを担保するデータ通信の仕組みについてお届けします。
Pages Functions：サーバーレスの究極形
通常、APIを作成するためには、Node.js等で動く専用のWebサーバーをフロントエンドとは別に立ち上げる必要があります。しかし今回は「Cloudflare Pages Functions」という機能を採用しました。
これは、フロントエンドのプロジェクトフォルダ内に functions/api/user.ts のようなファイルを作成するだけで、それが自動的にAPIのエンドポイント（通信の窓口）として機能するという魔法のような仕組みです。
例えば、ユーザーが画面で「起きる」ボタンを押し、ポイントを獲得したとします。React側からは、この /api/user というURLに向けて「〇〇ポイント追加して」というデータをPOSTリクエストとして送信します。
Functions側はそれを受け取り、同じCloudflareのネットワーク内にあるD1データベースへ即座にアクセスし、該当ユーザーのポイント残高を更新します。サーバーの管理を意識することなく、フロントエンドとバックエンドを一つのプロジェクト（リポジトリ）でシームレスに開発できるのは、控えめに言っても最高の体験です。
セキュリティの要：「本当にそのユーザーか？」の検証
APIを開放する上で最も気をつけなければならないのがセキュリティです。もし悪意のある人が、外部から /api/user に向けて「自分のポイントを100万ポイント追加して」という偽のリクエストを送信してきたらどうなるでしょうか。
これを防ぐため、通信には「FirebaseのIDトークン」を利用しました。
ユーザーがGoogleログインを行った際、Firebaseはフロントエンドに対して「この人は確実に本人です」という証明書（IDトークン）を発行します。フロントエンドはAPIにリクエストを送る際、必ずこの証明書をヘッダー（Authorization）に添付して送信します。
バックエンド（Functions）側では、受け取ったリクエストの証明書をFirebaseの公開鍵を使って厳密に検証します。証明書が本物であり、かつ有効期限内であることが確認できて初めて、データベース（D1）への書き込みを許可する仕組みを構築しました。これにより、不正なポイント操作を完全にシャットアウトすることができます。
シームレスなデータの流れが完成
フロントエンドからの fetch リクエスト、バックエンドでのトークン検証、そしてD1データベースへのSQL実行。これら一連の流れがすべてCloudflareのエッジネットワーク（世界中の高速なサーバー群）上で処理されるため、ユーザーがボタンを押してから保存が完了するまでのタイムラグはほとんど感じられません。
これでついに、「ユーザーが画面を操作し、その結果が安全にデータベースに保存され、次回ログイン時にも正確に読み込まれる」というWebアプリケーションの完全な骨格が出来上がりました。
まとめ
今回は、Cloudflare Pages Functionsを用いたAPIの構築と、Firebase IDトークンによるセキュアな通信の仕組みについてお話ししました。
フロントエンド（React）とバックエンド（D1）が強固なセキュリティのもとで繋がり、アプリとしての基礎がすべて完成しました。苦労して組み上げたインフラ基盤の上で、次はいよいよこのアプリの「お楽しみ要素」を実装するフェーズです。
次回【第7回】は、貯まった睡眠ポイントを消費してアイテムをゲットする「ガチャシステム」の実装について、そのロジックと演出の裏側をお届けします。
【編集後記】
APIの構築と通信テストは、目に見えない裏側の処理を追うため、エラーが出たときの原因究明（フロントが悪いのか、バックエンドが悪いのか、DBが悪いのか）が難しく、開発中盤の山場となります。
特にFirebaseのトークン検証ロジックをCloudflareのEdge環境（Node.jsのフル機能が使えない環境）で動かす部分では、ライブラリの選定などで少し試行錯誤しました。しかし、ターミナル上で無事に「200 OK（成功）」のレスポンスが返ってきて、D1のポイントが「チャリン」と増えたのを確認した瞬間は、苦労が報われる最高に気持ちのいい瞬間でした！