はじめに

前回まででブログのUI構成（見た目）を整理しました。

今回は、その見た目に実際のデータを流しこむ為のバックエンド構成を考えます。

ゴール：サイト全体を支える「裏側の仕組み」の全体像を理解する。

バックエンドの全体像（役割整理）

全体像を整理する上で、まずはどのような技術スタックを利用するかについてまとめます。

ブログサイトのバックエンド処理を以下の技術スタックを用いて実装してきます。

• microCMS
  • 記事データの管理(タイトル／本文／カテゴリ／タグなど)
  • APIを通じてフロントサイドから情報を取得できる
• Cloudflare Pages Functions
  • お問い合わせフォームからの送信や入力バリデーションなど、フロントだけでは完結しない処理を行う
• Cloudflare KV
  • 軽量なキー・バリューストアをデータ保存に利用
  • お問い合わせ内容の保存に使用
• Cloudflare Turnstile
  • お問い合わせフォームのBot対策で利用（reCAPTCHA代替で利用）

上記の技術スタックを以下のイメージで実装します。

【記事データの流れ】
ユーザー ──(アクセス)──▶ Remix (Cloudflare Pages)
                 │
                 │ HTTP Request
                 ▼
         ┌───────────────────────┐
         │      microCMS         │
         │（記事データなどを保管）  │
         └───────────────────────┘
                 │
                 │ HTTP Response（記事データ JSON）
                 ▼
Remix がデータを受け取り SSR/CSR で画面に描画

【問い合わせフォームの流れ】
ユーザー ──(フォーム送信)──▶ Remix (フォーム submit)
                 │
                 │ Turnstile チェック（Bot 判定リクエスト）
                 ▼
         ┌────────────────────────┐
         │   Cloudflare Turnstile │
         │   （Bot検証サービス）    │
         └────────────────────────┘
                 │
                 │ 検証結果（OK/NG）
                 ▼
        Remix 経由で Functions へ API Request
                 │
                 ▼
         ┌────────────────────────┐
         │ Cloudflare Functions   │
         │   （サーバー処理担当）   │
         └────────────────────────┘
                 │
                 │ KV 保存リクエスト
                 ▼
         ┌────────────────────────┐
         │   Cloudflare KV        │
         │ （問い合わせ保存先）     │
         └────────────────────────┘
                 │
                 │ 保存成功レスポンス
                 ▼
Functions がレスポンスを返却 → Remix → ユーザーへ結果表示

まとめると

• 記事データ系のフロー
  • ユーザーがページにアクセス
  • Remix（loader）が microCMS API にリクエスト
  • microCMS が 記事データをレスポンス
  • Remix が描画
• フォーム系のフロー
  • ユーザーが送信
  • TurnstileでBot判定
  • OKなら Functions が処理
  • KV に保存（＋将来的にメール通知）

上記のイメージでバックエンド処理を実装していきます。

各サービスの設定方法や詳細は次回以降に解説していきます。ここではまず、全体の役割を整理します。

ページごとのデータ利用フロー

次に、各ページごとにどのようなバックエンド処理が行われるのかを整理します。

記事一覧ページ

このページでは、microCMSに保存された記事情報を一覧として、全て表示するページにします。

以下のようなイメージでデータ処理を行います。

ユーザー
   │
   ▼
Remixのloader ──→ microCMS API
   │                 │
   ▼                 ▼
 記事一覧データ ←─── 取得
   │
   ▼
  画面表示

• RemixのloaderがmicroCMS APIを呼び出す
• 記事の一覧データ（アイキャッチ画像・タイトル・カテゴリ・タグなど）を取得
• コンポーネントに渡して記事一覧を描画

記事の一覧表示に必要なデータのみをAPIで取得します。

記事詳細ページ

このページでは、記事の内容を表示します。

以下のようなイメージでデータ処理を行います。

ユーザー
   │  （記事ID付きURLアクセス）
   ▼
Remix loader ─────→ microCMS API
   │                      │
   ▼                      ▼
記事タイトル、本文など ←── 取得
   │
   ▼
画面表示

• URLパラメータ（記事ID）をもとにmicroCMSから記事タイトル、本文、アイキャッチ画像、タグなどブログ詳細ページに表示するデータを取得
• 取得したデータを画面に表示

カテゴリ／タグについて

microCMSでカテゴリ、タグのリストを管理し、その情報を記事に紐づけます。

microCMS APIで記事に紐づくそれらの情報を取得し、以下の画面に反映します。

• ヘッダー
  • ナビゲーションボタン及びナビゲーションメニューからのURL推移に利用
• サイドバー
  • タグ一覧を表示する為に、タグリスト生成の為に利用

カテゴリやタグ別に記事一覧を表示させる為に、カテゴリ／タグをAPIを用いて取得します。

お問い合わせページ

お問い合わせページの処理の流れは、上図の【問い合わせフォームの流れ】を基に処理を行います。

将来的には、お問い合わせページからのお問い合わせ内容をメール送信する機能を連携したいと思っています。

まとめ

今回は、ブログサイトを支えるバックエンドの役割と、ページごとのデータ利用フローを整理しました。

全体像を理解しておくことで、今後の実装記事で登場するコードや設定の意図が分かりやすくなります。

次回からは microCMS の初期設定を行い、実際に記事データを管理・取得できる環境を構築していきます🔥