みんなで使える共有型WebアプリをCloudflareで作るための基礎知識

Pages + Pages Functions + D1 構成ガイド

チャット機能やランキング機能など、「データを保存・共有する」Webアプリを個人で作りたい場合、ネット上にデータベースが必要になる（参考）。 友達や同僚みんなが使えるWebアプリには、誰かが入力したデータをサーバー側で保存し、ほかの人からも見られるような仕組みが欠かせない。

この文書では、そのようなWebアプリを個人・小規模で作るためにおすすめの構成を紹介する。構成の全体像と、それぞれの役割を理解することが目的。実際の設定手順や導入方法は、別途ハンズオン資料で説明する。

本資料の Cloudflare Pages / Pages Functions という表現は、今後 Workers 側の表現に変わる可能性があります。

この文書を読む前に、GitHub初心者ガイドとCloudflare Pagesハンズオンを読んでおくことをおすすめする。

1. 共有型Webアプリを構成する3つの要素

Webアプリは「フロントエンド」「バックエンド」「データベース」の3つの役割に分けて作るのが基本。レストランに例えるとわかりやすい。

cf-arc-restaurant.jpg

レストランの例 Webアプリの役割
客席・メニュー・フロアスタッフ（お客さんが見て触り、注文を仲介する） フロントエンド（画面・UI）
キッチン・料理人（注文を受けて料理を作る） バックエンド（API）
冷蔵庫・食材庫（材料を保管する場所） データベース（データ保存）

お客さん（ユーザー）はフロアスタッフ（フロントエンド）を通じて注文する。注文は料理人（バックエンド）が受け取り、冷蔵庫（データベース）から必要な食材（データ）を取り出して料理を作る。できあがった料理はフロアスタッフによってお客さんに届けられる。お客さんが冷蔵庫を直接触ることはない——これがセキュリティと役割分担を実現している設計。

処理の流れ

ブラウザからのアクセスは以下の順番で処理される：

  1. ユーザーがブラウザでURLにアクセス
  2. フロントエンドがHTML/CSS/JSを返す（画面表示）
  3. 画面からAPIリクエストがバックエンドへ送られる
  4. バックエンドがデータベースを参照・更新して結果を返す

2. Cloudflareでの推奨構成：Pages + Pages Functions + D1

Pages・Pages Functions・D1はいずれもCloudflareのサービス。この3つの組み合わせが、個人・小規模でDBを使うWebアプリを作るのにシンプルで扱いやすい構成だ。

Webアプリの役割 Cloudflareのサービス
フロントエンド（画面・UI） Cloudflare Pages
バックエンド（API） Cloudflare Pages Functions
データベース（データ保存） Cloudflare D1

Pages Functionsは「バックエンド的な役割」を担うが、独立したサーバーが別に存在するわけではない。Pages（フロントエンド）の中に処理が同居しているイメージ。フロントとAPIが一体化しているのがこの構成の特徴。ワンオペ営業の小規模飲食店のようなもの。

3. 自動デプロイの仕組み：GitHub Actions

GitHub ActionsはGitHubが提供する自動化ツール。GitHubへpushするだけで、データベースの更新（D1マイグレーション）からフロントエンド・Pages Functionsのデプロイ（本番環境への公開・反映）までが自動で実行される。3つの役割をまとめて一度に本番反映できるのが、この構成の大きな利点。

4. セットアップと開発に使うツール：Wrangler

WranglerはCloudflareが公式に提供するCLIツール（コマンドラインツール）。Pages Functions・D1・Pagesすべてに対応しており、ターミナルからコマンドを打って操作する。Cloudflare専用のツールで、AWS CLI（Amazon）やFirebase CLI（Google）と同じ位置づけ。

Wranglerはプロジェクトの最初から使う。セットアップ時にはCloudflareへのログインと、D1データベースの作成に使う。開発中は、ローカルでWebアプリの動作を確認したり、データベースを直接操作するときなどに利用する。

5. 開発の流れ

GitHub + Cloudflareの構成が整うと、以下のサイクルで開発が進む：

  1. Claude Codeにコードを書いてもらう
  2. ローカルで動作確認する（任意）
  3. GitHubにpush
  4. GitHub Actionsが自動でデプロイ
  5. 本番環境（https://アプリ名.pages.dev）で動作確認
  6. 修正があればまたClaude Codeに依頼 → push

この流れを理解したら、次はハンズオン資料で実際に手を動かしてみよう。

2026-05-02 (last updated: 2026-05-05)　タツヲ (yto)