技術スタック

概要

TREK の構成を参考に、マイル旅行計画に最適化した技術スタックを選定する。

選定結果

レイヤー	技術	選定理由
Frontend	React 18 + Vite + Tailwind CSS	TREK同構成、エコシステム豊富、PWA対応容易
Backend	Node.js + Express	JS統一、TREK同構成
Database	SQLite (better-sqlite3)	セルフホスト向き、シンプル、ゼロ設定
State管理	Zustand	軽量、ボイラープレート少ない
地図	Leaflet + react-leaflet	無料、日本地図対応、OSS
PWA	vite-plugin-pwa + Workbox	オフライン対応
Auth	JWT	シンプルな認証
アイコン	lucide-react	豊富なアイコンセット
デプロイ	Docker	セルフホスト可能

フロントエンド詳細

React + Vite

フロントエンド構成:
├── React 18          # UI ライブラリ
├── Vite              # ビルドツール（HMR高速）
├── Tailwind CSS      # ユーティリティファースト CSS
├── Zustand           # 状態管理
├── React Router      # ルーティング
├── react-leaflet     # 地図コンポーネント
└── lucide-react      # アイコン

主要ライブラリ

パッケージ	用途
react-leaflet	Leaflet の React ラッパー
react-leaflet-cluster	マーカーのクラスタリング
@tanstack/react-query	サーバーステート管理・キャッシュ
react-dnd	ドラッグ&ドロップ（日程管理）
recharts	チャート（予算・マイル効率グラフ）
date-fns	日付操作

バックエンド詳細

Node.js + Express

バックエンド構成:
├── Express           # HTTP サーバー
├── better-sqlite3    # SQLite ドライバ
├── jsonwebtoken      # JWT 認証
├── node-cron         # 定期実行（データ更新）
└── ws                # WebSocket（将来のリアルタイム同期用）

API構成

/api/v1/
├── /auth              # 認証
│   ├── POST /register
│   ├── POST /login
│   └── GET  /me
├── /miles             # マイル管理
│   ├── GET  /balance
│   ├── PUT  /balance
│   └── GET  /chart
├── /search            # 検索
│   ├── GET  /destinations
│   └── GET  /recommend
├── /accommodation     # 宿泊検索
│   └── GET  /search
└── /trips             # 旅行プラン
    ├── GET    /
    ├── POST   /
    ├── GET    /:id
    ├── PUT    /:id
    └── DELETE /:id

データベース

SQLite を選んだ理由

項目	SQLite	PostgreSQL
セットアップ	ゼロ設定	サーバー必要
バックアップ	ファイルコピー	pg_dump
パフォーマンス	読み取り高速	書き込み高速
同時接続	制限あり	高並行性
セルフホスト	最適	やや手間

Phase 1〜3 のユースケースでは SQLite で十分。将来的にマルチユーザー対応が必要になった場合は PostgreSQL に移行を検討。

ディレクトリ構造（案）

selfTravelPlanning/
├── client/                    # フロントエンド
│   ├── public/
│   ├── src/
│   │   ├── components/        # UIコンポーネント
│   │   │   ├── common/        # 共通コンポーネント
│   │   │   ├── map/           # 地図関連
│   │   │   ├── search/        # 検索UI
│   │   │   └── trip/          # 旅行プラン
│   │   ├── hooks/             # カスタムフック
│   │   ├── stores/            # Zustand ストア
│   │   ├── pages/             # ページコンポーネント
│   │   ├── utils/             # ユーティリティ
│   │   └── App.jsx
│   ├── index.html
│   └── vite.config.js
├── server/                    # バックエンド
│   ├── src/
│   │   ├── routes/            # Express ルート
│   │   ├── services/          # ビジネスロジック
│   │   ├── models/            # DB モデル
│   │   ├── middleware/        # ミドルウェア
│   │   └── index.js
│   └── data/                  # SQLite DB ファイル
├── docs/                      # 設計書（VitePress）
├── docker-compose.yml
├── Dockerfile
└── package.json