ReactとSupabaseでFXトレード管理アプリを個人開発した話

はじめに

FXトレーダーとして自分のトレード成績を管理するツールが欲しくなり、個人開発でWebアプリを作りました。
MT4/MT5のエクスポートHTMLをアップロードするだけでグラフが自動生成されます。

本記事では技術選定の理由と実装の概要を解説します。

技術スタック

• フロントエンド: React 19 + Vite + Tailwind CSS v4
• バックエンド: Supabase（PostgreSQL + Auth + Realtime）
• ホスティング: Vercel
• 決済: Lemon Squeezy

Supabaseを選んだ理由

Firebase の代替として Supabase を選びました。主な理由は：

1. PostgreSQL なので SQL が使える
2. Row Level Security (RLS) でユーザーデータを安全に分離できる
3. Realtime 購読でリアルタイム更新が簡単
4. 無料枠が十分（500MB DB + 1GB Storage）

// supabaseClient.js
import { createClient } from '@supabase/supabase-js'

export const supabase = createClient(
  import.meta.env.VITE_SUPABASE_URL,
  import.meta.env.VITE_SUPABASE_ANON_KEY
)

RLS によるデータ分離

各ユーザーが自分のデータのみ読み書きできるようにRLSを設定します。

-- reports テーブルのRLSポリシー
ALTER TABLE reports ENABLE ROW LEVEL SECURITY;

CREATE POLICY "users can only access own reports"
  ON reports FOR ALL
  USING (auth.uid() = user_id);

Realtime 購読でリアルタイム更新

PowerShellスクリプトがMT4データをSupabaseに書き込むと、
ブラウザに即座に反映されます。

useEffect(() => {
  const channel = supabase
    .channel('reports')
    .on('postgres_changes',
      { event: '*', schema: 'public', table: 'reports', filter: `user_id=eq.${userId}` },
      (payload) => setReports(prev => updateReports(prev, payload))
    )
    .subscribe()

  return () => supabase.removeChannel(channel)
}, [userId])

まとめ

Supabase を使うことで認証・DB・リアルタイム通信をまとめて解決できました。
個人開発で複数機能を一人で実装する場合、BaaS の活用は非常に効果的です。