Prompt

SSGされたHTMLに、“カウンター”や”高評価ボタン”などの、単純なCRUDが必要な機能を実装したいなら、最適なのはFaaS?

やっほー!SSG(静的サイト生成)で作った「静かなサイト」に、カウンターやボタンという「動的な命」を吹き込みたいんだね!その発想、まさにJAMstack(JavaScript, APIs, Markup)の王道だよ。

結論から言うと、**「FaaS(AWS LambdaやVercel Functionsなど)は非常に有力な候補だけど、もっと手軽で『最適』な選択肢が他にもある」**というのが現代の答えだよ。

君のエンジニアとしての武器を増やすために、いくつかのパターンを比較してみよう!


1. パターンA:FaaS (Function as a Service) + DB

君が考えた「FaaSでAPIを作る」方法だね。

  • 構成: SSG (Next.js/Astroなど) → FaaS (API) → データベース (Supabase, Firebase, PlanetScale等)。

  • メリット: 自由度が最強!「100回以上押されたら色を変える」といった複雑なロジックをサーバーサイド(C#やGo、Node.js)で書ける。

  • 落とし穴: * コールドスタート: 久しぶりにボタンを押した時、関数の起動に数秒かかって「あれ、反応しない?」と思われることがある。

    • コスト: 非常にアクセスが多いと、実行回数ベースで課金が嵩む可能性があるよ。

2. パターンB:BaaS (Backend as a Service) ── これが今の「最適」?

FaaSすら書かずに、ブラウザから直接DBを叩くスタイルだよ。

  • 構成: SSG → SupabaseFirebase

  • なぜ最適?: * 「カウンター」なら1行: データベースの「インクリメント(+1)」機能を直接呼ぶだけ。サーバーコードを書く必要がないんだ。

    • リアルタイム性: 誰かがボタンを押した瞬間、他の人の画面でもカウンターが増える「リアルタイム同期」が標準装備されていることが多いよ。
  • 君へのオススメ: TypeScriptが得意なら、Supabaseのクライアントライブラリを使うと、型安全にサクッと実装できちゃうよ!


3. パターンC:MicroCMS / Headless CMS の API

もしサイトのコンテンツ管理にCMSを使っているなら、その「更新API」を使う手もある。

  • 構成: ボタンを押す → CMSのAPIを叩く → コンテンツの「いいね数」を更新。

  • メリット: 管理画面で「今いくついいねがあるか」を非エンジニアでも確認できる。


💡 情報工学的な「見落とされがちな落とし穴」:競合状態(Race Condition)

カウンター機能を自作するとき、一番怖いのがこれだよ!

  • 問題: 同時に2人がボタンを押したとき、現在の数(10)を取得1足す11を保存 という処理が重なると、本来なら12になるはずが11になってしまう。

  • 対策: * FaaSなら、DBの Atomic Increment(アトミックな増分操作) を使う必要がある。

    • SQLなら UPDATE counters SET count = count + 1 と書くべきで、一度プログラム側に数値を読み込んじゃダメなんだ。

豆知識:Edge Functions

最近はFaaSの進化系として、ユーザーの物理的な近く(エッジサーバー)で動く Edge Functions が人気だよ。VercelやCloudflareが提供していて、コールドスタートがほぼゼロで、ボタンの反応が爆速になるんだ!