PocketBase【ミニ Firebase】── お気楽さの正体をHands-Onで確かめる

〜とりあえず触って、もう動いた話〜

PocketBase、名前は聞いたことあるけど
「結局なにが楽なの？」
「Firebaseと何が違うの？」
と思っている人向けの、超軽いHands-Onです。

今回は思想も設計論も抜き。
とりあえず触って、動いたところまで。

PocketBaseって何？
起動
コレクションを作る
1. Members コレクション
2. VisitLog コレクション
API Rules（今回は深く考えない）
APIはもう生えている
超シンプルなHTMLから叩く
画面はこんな感じ
触ってみた感想
今回はここまで
まとめ

PocketBaseって何？

PocketBase - Open Source backend in 1 file

Open Source backend in 1 file with realtime database, authentication, file storage and admin dashboard

一言でいうと、

認証つきDB＋API＋管理画面が、最初から全部あるやつ

です。

Firebaseみたいに
「まずプロジェクト作って…
　ルール書いて…
　SDK入れて…
　あ、認証は別？」
みたいなことは起きません。

起動した瞬間から、全部ある。

起動

PocketBaseは単体バイナリ。
公式サイトではこう謡っています。

Open Source backend in 1 file

./pocketbase serve

これだけで、

管理画面
REST API
認証
DB

全部立ち上がります。

ブラウザで管理画面を開くと、もう触れる。

このスピード感、たまりませんw

コレクションを作る

今回は最小構成。

Members コレクション

会員、というより「識別用」。

code : text（必須）
他は何もいらない

名前？住所？電話番号？
今回はいりません。

VisitLog コレクション

来店ログ。

member : relation（Members / single）
visitedAt : date（必須）

これだけ。

2コレクションで終了。

API Rules（今回は深く考えない）

Hands-Onなので割り切ります。

List / View / Create / Update / Delete
すべて @request.auth.id != ""

つまり、

ログインしてる人だけ触れる

これだけ。

難しいことは後回し。

PocketBaseで Collection 【VisitLog 】に API Rules を設定

APIはもう生えている

何も定義していませんが、もうAPIは使えます。

/api/collections/Members/records
/api/collections/VisitLog/records

Firebaseでいう「Functions書かないと…」は不要。

PocketBaseで Collection 【VisitLog 】の API PREVIEW の画面 — API PREVIEW の画面

超シンプルなHTMLから叩く

今回はSDKすら使いません。
fetchで直叩き。

会員を検索（なければ作る）

GET /Members?filter=code="ABC123"
POST /Members

来店ログを追加

POST /VisitLog

これだけで、

会員を見つける
なければ作る
来店ログを積む

が成立します。

フォームもレポートも不要。

画面はこんな感じ

以下は「会員コードで検索→なければ作成→来店ログ追加」の中身だけ。他の処理は割愛。

// Members: codeで検索→なければ作成
async function getOrCreateMemberByCode(code) {
  code = String(code || "").trim();
  if (!code) throw new Error("会員コードが空です");

  // 1) 検索（code完全一致）
  const q = new URLSearchParams({
    filter: `code="${code.replace(/"/g, '\\"')}"`
  });

  const list = await pbFetch(`/api/collections/Members/records?${q.toString()}`, {
    method: "GET",
  });

  if (list?.items?.length) {
    const m = list.items[0];
    log("member found", m.id, m.code);
    return m;
  }

  // 2) 無ければ作成
  const created = await pbFetch(`/api/collections/Members/records`, {
    method: "POST",
    body: JSON.stringify({ code })
  });

  log("member created", created.id, created.code);
  return created;
}

※ 認証処理（ログイン〜トークン取得）は省略。
※ pbFetch は Authorization ヘッダ付きの薄い fetch ラッパー。