Supabase + Next.jsでトレード記録アプリを自作する技術ガイド

「既存のトレード記録ツールが自分のスタイルに合わない」「自分だけの分析機能が欲しい」——プログラミングスキルがあるトレーダーなら、自作アプリという選択肢がある。

この記事では、Supabase（BaaS）とNext.js（Reactフレームワーク）を使って、FXトレード記録アプリをゼロから構築する方法を解説する。データベース設計から認証、CRUD実装、デプロイまでの全工程をカバーする。

なぜSupabase + Next.jsなのか

Supabaseの強み

SupabaseはFirebaseのオープンソース代替として人気のBaaS（Backend as a Service）だ。PostgreSQLベースのデータベースに加え、認証、リアルタイム購読、ストレージ、Edge Functionsを提供する。無料プランでも十分な機能があり、個人開発のトレードアプリには最適だ。

Next.jsの強み

Next.jsはReactベースのフルスタックフレームワークで、App Routerによるファイルベースルーティング、Server Components、API Routesを備えている。SEO対応のブログページからダッシュボードまで、1つのプロジェクトで構築できる。Vercelへの無料デプロイも簡単だ。

組み合わせのメリット

Supabaseがバックエンドの大半を担当するため、フロントエンド開発に集中できる。認証はSupabase Auth、データベースはSupabase PostgreSQL、ファイルアップロードはSupabase Storageで、バックエンドのコードをほとんど書かずにフルスタックアプリが完成する。

データベース設計：tradesテーブル

必須カラムの設計

トレード記録の核となるtradesテーブルには、以下のカラムが最低限必要だ。id（UUID、主キー）、user_id（UUID、認証ユーザーID）、currency_pair（通貨ペア）、direction（売買方向）、entry_price（エントリー価格）、exit_price（決済価格）、lot_size（ロットサイズ）、pips（損益pips）、profit_loss（損益金額）、entry_time（エントリー日時）、exit_time（決済日時）。

分析用カラムの追加

基本カラムに加えて、strategy（使用手法）、emotion（感情タグ）、notes（メモ）、screenshot_url（スクリーンショットのURL）、session（東京/ロンドン/NY）を追加すると、後の分析精度が格段に上がる。created_atとupdated_atのタイムスタンプも忘れずに設定する。

インデックスの設定

user_idは必ずインデックスを設定する。ユーザーごとのデータ取得が最も頻繁なクエリだからだ。entry_timeにもインデックスを追加しておくと、期間絞り込みのパフォーマンスが向上する。currency_pairもフィルタリングに頻繁に使うためインデックスの候補だ。

認証：Supabase Authの実装

メール認証の設定

Supabaseの管理画面でメール認証を有効にし、Next.jsのクライアントライブラリでサインアップ・サインイン・サインアウト機能を実装する。supabase.auth.signUpでアカウント作成、supabase.auth.signInWithPasswordでログイン、supabase.auth.signOutでログアウトが実現する。

OAuth認証の追加

Googleアカウントでのログインを追加すると、ユーザーのハードルが下がる。Supabaseの管理画面でGoogleプロバイダーを有効にし、Google Cloud Consoleでクライアントを作成する。supabase.auth.signInWithOAuthメソッドで実装は完了だ。

ミドルウェアでの保護

Next.jsのmiddleware.tsファイルでセッションチェックを行い、認証されていないユーザーをログインページにリダイレクトする。ダッシュボードやトレード記録ページなどの保護されたルートは、ミドルウェアで一括管理するのが最も効率的だ。

Row Level Security（RLS）の設定

RLSはSupabaseの最も重要なセキュリティ機能だ。RLSポリシーを設定することで、各ユーザーが自分のデータのみにアクセスできるように制限する。

SELECTポリシー

「auth.uid() = user_id」の条件を設定するだけで、ログイン中のユーザーが自分のトレードデータのみを参照できるようになる。他のユーザーのデータは完全に不可視だ。

INSERT/UPDATE/DELETEポリシー

INSERT時にはuser_idが認証ユーザーのIDと一致することを強制する。UPDATE/DELETEも同様に、自分のデータのみ操作可能に制限する。これにより、フロントエンドのバグがあったとしても他ユーザーのデータを改ざんすることは不可能になる。

RLSは「最後の砦」だ。フロントエンドでどれだけバリデーションを行っても、データベースレベルでアクセス制御しなければセキュリティは担保できない。tradesテーブルでは必ずRLSを有効にすること。

CRUD実装：トレード記録の登録・表示・編集・削除

トレード登録フォーム

React Hook FormとZodを組み合わせたフォームバリデーションが現代的なアプローチだ。通貨ペアはセレクトボックス、売買方向はラジオボタン、価格やロットは数値入力、メモはテキストエリアで実装する。送信時にsupabase.from('trades').insertでデータを保存する。

トレード一覧の表示

Server Componentsを使えば、サーバーサイドでデータを取得してHTMLをレンダリングできる。supabase.from('trades').select().order('entry_time', ascending: false)で最新のトレードから順に取得し、テーブルまたはカード形式で表示する。ページネーションやフィルタリングも追加すると実用性が高まる。

編集と削除

各トレードの詳細ページで編集フォームを表示し、supabase.from('trades').update().eq('id', tradeId)で更新する。削除は確認ダイアログを挟んでからsupabase.from('trades').delete().eq('id', tradeId)を実行する。RLSが設定されているため、自分のデータのみが操作対象になる。

ダッシュボードの構築

統計サマリーの計算

SupabaseのPostgreSQL関数で勝率・プロフィットファクター・最大ドローダウンを計算し、ダッシュボードに表示する。SQLのWINDOW関数を使えば、月別推移やローリング集計も効率的に計算可能だ。重い計算はデータベース側で行い、フロントエンドは表示に専念するのがパフォーマンスのコツだ。

チャートライブラリの選択

Rechartsは最もNext.jsと相性の良いチャートライブラリだ。エクイティカーブ（AreaChart）、通貨ペア別損益（BarChart）、勝率推移（LineChart）を実装する。軽量で学習コストが低く、Tailwind CSSとの併用も容易だ。

デプロイと運用

Vercelへのデプロイ

GitHubリポジトリをVercelに接続するだけで、自動デプロイが設定される。環境変数にSUPABASE_URLとSUPABASE_ANON_KEYを設定し、プロダクションデプロイを実行する。独自ドメインの設定もVercelの管理画面から数クリックで完了する。

無料枠での運用

Supabaseの無料プランは500MBのデータベース、1GBのファイルストレージ、50,000回の認証リクエストを提供する。個人のトレード記録アプリであれば、数年間は無料枠で十分に運用可能だ。Vercelも個人利用なら無料プランで問題ない。

バックアップの重要性

Supabaseの無料プランではデータベースの自動バックアップは提供されない。定期的にCSVエクスポート機能を使って手動バックアップを取るか、pg_dumpを使ったバックアップスクリプトをcronで実行する仕組みを構築しておく。トレード記録は貴重な資産であり、データ消失は取り返しがつかない。

まとめ：自作アプリで理想のトレード環境を手に入れる

Supabase + Next.jsでのトレード記録アプリ開発は、個人開発者にとって非常に現実的な選択肢だ。

SupabaseがDB・認証・ストレージを提供し、バックエンド開発の負担を大幅削減
tradesテーブルの設計は必須カラム + 分析用カラムで構成
RLS（Row Level Security）でユーザーデータの完全な分離を実現
Server ComponentsとRechartsで高速なダッシュボードを構築
VercelとSupabaseの無料枠で個人利用ならコストゼロで運用可能

ただし、アプリ開発と保守には相応の時間と労力がかかる。まずは既存のツールで記録・分析のワークフローを確立し、既存ツールで満たせない要件が明確になった時に自作を検討するのが賢い進め方だ。