Firebaseの無料代替ツール、たった1つのファイルで完結する驚きの選択肢
BBetter Stack
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00PocketBaseはSupabaseやFirebaseのオープンソースの代替であり、おそらく最もシンプルな
00:00:04バックエンドです。たった1つのファイルでリアルタイムデータベース、認証、そして
00:00:11ファイルストレージを提供します。これは、近年のWeb開発がどれほど複雑化しているかとは対照的です。
00:00:16そこで今日の動画では、PocketBaseを実際に試して、そのシンプルなアーキテクチャが
00:00:21単純なアプリ以上の開発にも通用するのか検証します。
00:00:29PocketBaseはSQLiteを内蔵したGo言語の単一バイナリですが、Goでのコーディング自体は
00:00:35必須ではありません。バックエンドはJavaScriptやTypeScriptで拡張でき、Supabaseと同様に
00:00:40コレクションを構成できる基本的な管理UIも用意されています。
00:00:46では、アーキテクチャと実際の使い方を見ていきましょう。PocketBaseが起動していれば
00:00:51フロントエンドからJavaScript SDK経由で接続できます。これもFirebaseや
00:00:57Supabaseと同じ設計です。フロントエンドから直接データベースにアクセスできますが、
00:01:02セキュリティはPocketBaseのAPIルールと認証で保護されているので安心してください。さっそく
00:01:08認証、データベース、ファイルストレージを備えた実際のアプリのデモを見てみましょう。この動画が面白いと思ったら
00:01:13Better Stackに登録してください。このチャンネルでは開発者向けコンテンツを多数発信しています。
00:01:18ここにアプリケーションがあります。バックエンドにPocketBase、そしてWebフロントエンドは
00:01:22Reactで書かれています。フロントエンドで最も重要なのは、こちらの「pb.ts」というファイルです。なぜなら
00:01:30ここでPocketBaseをインポートしてクラスを呼び出し、新しいインスタンスを作成するからです。
00:01:36これでバックエンドサービスと接続でき、以降はアプリ全体で「pb」を使用できるようになります。
00:01:42アプリケーション自体は単純なバグトラッカーです。列間でアイテムをドラッグしたり、
00:01:48新しい課題を作成したりできます。ログインユーザーを管理するフックを見てみると、
00:01:53最初にpb.authStore.recordを使って状態を設定しています。これで現在認証されているユーザーを
00:01:59PocketBaseから取得できます。さらにリスナーも設定しており、authStoreが
00:02:05変更されるたびに、新しいユーザーを状態にセットするようにしています。本当にこれだけでシンプルです。
00:02:11状態へのアクセスやサブスクライブも簡単で、課題管理でも同じです。
00:02:16「useIssues」フックでも同じように状態を初期化しますが、ここでは空の状態で始めます。
00:02:21次にuseEffectで、すべての課題を取得してリスト化し、
00:02:27課題のリストを状態に設定します。これでデータが読み込まれます。さらに
00:02:32課題をサブスクライブすることも可能です。課題をドラッグしたり、作成・削除したりすると
00:02:38「pb.collection('issues').subscribe」で通知を受け取り、新しいレコードが来たら
00:02:44状態に追加できます。つまり、PocketBaseデータベースと直接やり取りしている際、
00:02:49カードをドラッグすれば自動的に状態が更新されます。新しい課題を作成する場合、
00:02:54スクリーンショットを添付することもできます。ではアプリのスクリーンショットを撮って、
00:02:59課題を提出すると、フロントエンドに新しい課題が表示されます。これは
00:03:05送信関数によって処理され、すべてのフォームデータを追加してから、最後に「pb.collection('issues').create」を
00:03:11呼び出してデータを渡します。バックエンド側にはAPIの不正利用を防ぐための
00:03:17コレクションAPIルールがあります。PocketBaseはデフォルトでこの管理画面を提供します。
00:03:24ここには「users」コレクションと、すべての課題が保存される「issues」コレクションがあります。
00:03:27「users」コレクションの中身を見て、上の設定ボタンを押すと、
00:03:32「API Rules」タブがあります。これらがこのコレクションへのアクセスを制限するルールです。
00:03:37例えばユーザーの場合、リクエストのauth IDが空文字列であってはならず、
00:03:43更新や削除を行うには、そのIDが認証済みユーザーのIDと一致している必要があります。これには
00:03:50「@request.auth.id」という特別な文字列を使います。Supabaseを
00:03:56使ったことがある方には、非常になじみ深いパターンでしょう。では、バックエンドの機能で
00:04:02足りない場合はどうすればいいでしょうか？幸い、Goはもちろん、JavaScriptや
00:04:08TypeScriptを使用してフックで拡張可能です。アプリ起動時の「onBootstrap」や、
00:04:15データベースレコード作成時の「onRecordCreate」など、撮影時点で82種類のフックがあり、
00:04:21必要な機能はほぼ網羅されています。ではPocketBaseサービスを拡張してみましょう。
00:04:27pbフォルダを見るとPocketBaseのバイナリがありますが、デフォルトで動かすには
00:04:32本当にこのファイルだけで十分です。ただ今回はフックを
00:04:38TypeScriptで書いたので、それをpb_hooksフォルダにJavaScriptとしてコンパイルする設定をしています。
00:04:44PocketBaseはネイティブではJavaScriptしかサポートしていないため、TypeScriptを使う場合はコンパイルが必要です。
00:04:50メインのフックファイルを見ると「onRecordCreate」フックがあり、
00:04:55これは課題作成時に実行されます。ここでは、
00:05:00レコードが作成されるたびにユーザーにメールを送信する処理をしています。「e.app.newMailClient」を
00:05:05呼び出して送信し、構築したメッセージオブジェクトを渡すだけです。
00:05:10PocketBase内の多くの機能にフックできるので、必要なカスタム機能は
00:05:1582種類以上の既存フックを使えばほとんどサポートされます。
00:05:21SQLiteを実行しているため永続ストレージが必要です。Heroku、Render、
00:05:28Railwayのようなプラットフォームは、ファイルシステムが揮発性のため不向きです。再デプロイのたびに
00:05:33データが消えてしまいます。これを避けるために永続ファイルシステムをマウントすることもできますが、
00:05:39VPSでホストする方が安くて良い方法です。データは「pb_data」フォルダに保存されます。
00:05:45中を見てみると「storage」フォルダがあり、ここに課題にアップロードした
00:05:50画像がすべて保存されています。単にストレージフォルダに保存されているだけで、
00:05:55例えばこのランダムなIDフォルダ内に、先ほどアップロードした画像があります。
00:05:59データベースファイル自体もこのフォルダ内に永続化されます。ここの「data.db」が
00:06:05SQLiteの全コードを含んでいます。もしこのファイルを削除したら、アプリケーションの全データが
00:06:11消えてしまいます。ですから、単にディスクに置いておくのではなく、優れたバックアップ戦略が必要です。
00:06:16Supabaseが基本プランで月額25ドルかかるのと比較して、PocketBaseは
00:06:22ほぼ無料です。VPSコスト（月額わずか4ドルから）を支払うだけで、
00:06:28いくらでもプロジェクトを実行できます。もちろん使用量に応じてスケールさせる必要があります。
00:06:33PocketBaseには移行、ジョブスケジューリング、ログなど、本番環境に必要な機能が
00:06:38すべて揃っています。「pb_public」フォルダに置くことで、静的ファイルを直接配信することも可能で、
00:06:44これはReactフロントエンドなどに役立ちます。また、テンプレートレンダリングを使用して
00:06:49動的ルートをホストすることもでき、メールテンプレートなどに最適です。もし
00:06:54「オールインワン」構成を望むなら、これがその方法です。大きな疑問は「本番環境で使えるのか」ですが、
00:06:59モダンなSaaSアプリを構築するのに必要な機能はすべて含まれています。特に
00:07:04移行やログのような本番レベルの機能も備えています。完全に拡張可能なので、
00:07:09デフォルト設定に縛られることもありません。ただし大きな注意点として、まだv1前であるため、
00:07:15変更履歴を読み、時々手動で移行作業を行うことに問題がない場合のみ、
00:07:20使用するようにと明記されています。もしそうなら、最初の一人ユニコーン企業を構築しましょう。PocketBaseの詳細は
00:07:25説明欄のリンクから確認してください。オープンソースの代替ツールが好きなら、
00:07:29Claude Codeのオープンソース代替である「Open Code」の動画もチェックしてください。Better StackのWarrenでした。
00:07:35ご視聴ありがとうございました。それではまた。