React Mapping（仮）
Concept
React.js（Vite＋TypeScript）へのキャッチアップを目的に、実際に自分が利用しているトレーニングスポットを地図上で管理できるWEBアプリとして制作しました。
単なる写経ではなく、Supabaseを使った認証・DB連携込みのCRUD（登録・一覧表示・編集・削除）を一通り自分の手で実装し、React特有の考え方（状態管理・再レンダリング・コンポーネント間のデータの受け渡し）を体で覚えることを目標にしました。
Git運用・CI/CD・テストまで含めて、実務のワークフローに近い形で開発を進めています。
Dsign
本アプリはデザインカンプからの作り込みではなく、Tailwind CSSによるユーティリティファーストな実装で、機能性・可読性を優先したシンプルなUIとしています。
地図（一覧表示のマップ・ピン）とサイドバーのアコーディオン（スポット一覧・新規登録・ログイン）という、情報の見やすさを重視した2カラム構成を採用しました。
Plan
将来的にはこのフレームをオープンソース化し、誰でもマッピングアプリを作成できるような環境にしたいと考えています。
今後は、このマップアプリと並行して、自身のWordPress運用実績を活かした「headless WordPress × Next.js」の技術検証プロジェクトにも着手予定です。
WordPressの運用資産（wp-admin・プラグイン）はそのままに、フロントだけをNext.jsで再構築し、SSR/SSG・App Routerといった、より実務で求められる知識の習得を進めていく計画です。
Coding
フロントはReact（Vite）＋TypeScriptで構築し、useStateによるフィルタ・選択状態の管理、useEffectによる非同期データ取得・地図操作（react-leaflet）を実装しています。
バックエンドはBaaSであるSupabase（PostgreSQL）を採用し、DBへのCRUD処理、認証（メール/パスワードログイン）、投稿者本人またはマスターアカウントのみ編集・削除を許可するRLS（Row Level Security）を組み合わせた権限管理まで実装しました。
本アプリはサーバーサイドレンダリングを行わないCSR（クライアントサイドレンダリング）のSPA構成で、ブラウザ側のJavaScriptが画面の組み立てからデータ取得後の再描画まで一貫して担当しています。
品質担保として、Vitest＋React Testing Libraryによるユニットテストと、GitHub Actionsでのlint・型チェック・ビルド自動化（CI）、Vercelへの自動デプロイまで一通り整えています。
Point
-
Technique
Supabase（BaaS）＋RLSによる認証・権限管理と、useState/useEffectを用いた状態管理・データ取得の実装。
-
UX
地図ピンをクリックすると該当地点へスムーズにズームするインタラクティブな操作性。
-
- Release Date
- 2026.09
