Tabipac — AIと一緒に作った旅行持ち物リストサービス
Tabipac — AIと一緒に作った旅行持ち物リストサービス
旅行のたびに「あれ持ったっけ？」と不安になる経験はありませんか？そんな課題を解決するために、AIと一緒に Tabipac（たびぱっく） を開発しました。
サービス概要
Tabipac は、旅行の持ち物リストを作成・管理・家族や友人と共有できるWebサービスです。
- 旅行ごとにリストを作成
- カテゴリ別に持ち物を管理（衣類、書類、日用品など）
- URLを共有して家族・友人とリアルタイムでチェック
- テンプレートで素早くリスト作成（海外旅行・国内・キャンプなど）
- Googleログインでデバイスをまたいでデータを永続化
システム構成図
┌──────────────────────────────────────────────────────────────┐
│ ユーザー (ブラウザ) │
└───────────────────────────────┬──────────────────────────────┘
│ HTTPS
┌─────────────────┴──────────────────┐
▼ ▼
┌────────────────────────┐ ┌──────────────────────────┐
│ Vercel │ │ Cloudflare Workers │
│ ┌──────────────────┐ │ REST │ ┌──────────────────┐ │
│ │ React + Vite │ │ ◄──────► │ │ Hono (API) │ │
│ │ (TypeScript) │ │ │ └────────┬─────────┘ │
│ └──────────────────┘ │ └────────────│─────────────┘
└────────────────────────┘ │ SQL
▼
┌────────────────────────────────┐
│ Supabase │
│ ┌──────────────────────────┐ │
│ │ PostgreSQL (DB) │ │
│ │ trips / categories / │ │
│ │ items / invite_links │ │
│ └──────────────────────────┘ │
│ ┌──────────────────────────┐ │
│ │ Auth (Google OAuth) │ │
│ └──────────────────────────┘ │
└────────────────────────────────┘
技術スタック
| レイヤー | 技術 | 理由 |
|---|---|---|
| フロントエンド | React + Vite (TypeScript) | 高速な開発体験、型安全 |
| バックエンド | Hono + Cloudflare Workers | エッジ実行で低レイテンシ、無料枠が大きい |
| データベース | Supabase (PostgreSQL) | RLS対応、Auth機能が内蔵 |
| 認証 | Supabase Auth + Google OAuth | ユーザー体験が良く実装が簡単 |
| ホスティング | Vercel | フロントのデプロイが最速 |
| ドメイン | floto.co.jp サブドメイン | 既存ドメインを流用 |
機能仕様
権限モデル
Tabipacは2つのロールを持つシンプルな権限設計です。
| ロール | できること |
|---|---|
| オーナー | 旅行作成・編集・削除、アイテム追加・削除・チェック、共有リンク管理 |
| メンバー | アイテムのチェック・アンチェックのみ |
共有URL設計
https://tabipac.floto.co.jp/share/{uuid}
- UUIDv4（
crypto.randomUUID()）でランダム生成 - 有効期限：7日 / 14日 / 30日 / 無期限から選択
- オーナーによる即時revoke（無効化）対応
データベース設計（主要テーブル）
trips -- 旅行（name, start_date, end_date, user_id）
categories -- カテゴリ（name, icon, color, position）
items -- 持ち物（name, is_required, is_checked, position）
invite_links -- 共有リンク（token, expires_at, revoked）
audit_logs -- 操作ログ（action, actor_role, item_id）
テンプレート一覧
🌏 海外旅行（パスポート・充電器・変換プラグなど） 🗾 国内旅行（宿泊セット・カメラなど） 💼 出張（名刺・PC・資料など） ⛺ キャンプ（テント・調理道具・ランタンなど） 📝 カスタム（ゼロから作成）
AIとの開発体験
今回はすべての設計・実装を Claude Code（Anthropic） と対話しながら進めました。
コードを書いてもらうだけでなく、
- 「Googleログインはどうやって実装する？」
- 「DBなしとDB版、どちらが良い？」
- 「セキュリティ的に大丈夫？」
といった設計レベルの相談にも答えてもらいながら、ゼロからサービスをリリースできました。
AIとペアプログラミングする体験は、「頭の中のアイデアを整理しながらすぐコードに落とせる」という感覚で、一人で作るよりも圧倒的に速く、かつ学びも多い開発体験でした。
まとめ
Tabipacは家族・友人向けのクローズドなサービスとして作りました。 仕事しながら2,3時間くらいですかね…とんでもない時代に生きてます笑
また何か思いついて作ったらこちらで公開していきます！ 引き続き、FLOTOをよろしくお願いします。