✈️

Claudeと2週間で旅行計画アプリを作った！

に公開
Firebase
Next.js
個人開発
Claude
Claude Code
idea

はじめに

旅行好きのエンジニアです。
2週間前に初めてClaudeとチャットして感動して、その勢いでアプリ作成しました。
今度西ヨーロッパを旅行する予定があり、計画は進んでいるのですが、もうちょっとこういうことができたらいいなと思ったものを入れ込みました。

完成したもの

ゆくゆく – 旅行計画アプリ

技術スタック

  • Next.js 15.4.3 (App Router)
  • TypeScript
  • Tailwind CSS
  • Firebase Authentication, Firestore, Storage
  • Hosting: Vercel
  • E2Eテスト: Playwright
  • PWA対応

主な機能

  • スケジュール管理（時間別）
  • チェックリスト
  • ファイル保存（PDF・画像など）
  • メモ
  • 予算管理
  • メンバー招待・共有

スケジュール一覧

チェックリストページ

ファイル一覧ページ

やりたいこと／それに対する実装

1. チケットやホテル情報のPDFを共有したい、チケット使うときにぱっと出したい

  • スケジュールごとにファイルを追加できる
  • ファイルは一覧で日付順に確認できる

2. 誰がどのお金払ったか確認したい

  • スケジュールごとに払った金額と、誰が立て替えているか記入できる
  • 予算管理ページでその合計が見れる

3. マップで確認したい。（計画時にマップと計画表を行き来することが多い）

  • 場所フォームに名前を入れたらgoogleマップのリンクになる

4. 持ち物、旅行前の準備、チケット予約、やることがいっぱいある

  • チェックリストページで、複数のタイトルでチェックリストを作れる

5. 現地でネットが繋がらない時も内容を確認したい

  • PWA対応。ホーム画面追加可能、オフラインでも見れる
  • （PDFの対応ができていないので今後対応予定。）

6. 家族旅行時に父に共有するときなど、ログインしなくても見れるようにしたい

  • ゲスト共有（閲覧のみ）を作成

Claudeとのやりとり

最初はチャットで大枠を作りました。Claudeどんなもんなんだろうというところからチャットを始めています。
スクショ左側は自分がオーダーした内容で、右側はClaudeがオーダーに沿って作成後のプレビュー。

1回目

いきなりこの文章からスタート。そしたらあっという間にプレビュー付きで返信してくれた。
初期1

2回目

「くすみ色でおしゃれに」というとてもざっくりしたオーダーをした。一部のボタンがなぜか真っ白になった。

初期2

３回目

細かく指定した。
初期

その後数回やりとりして、環境を相談して自分で環境を作ってからClaude Codeに移行しました。

Claude Code移行後

大枠のUIは上記でほぼOKだったので、機能として実装されていない部分や気になるところ、オフライン対応などを実装していきました。

  • 足りていない機能追加（個々の編集、削除）
  • バグ
  • 気になるUI改善
  • PWA対応
  • E2Eテスト導入

感想

とても楽しかった。とっても感動。自分がこうしたいと思うものを実装の工数を気にせず作れることがとても嬉しかったです。
そして、設計の大事さと言語化力の大事さを改めて感じました。勢いで進めてしまったので、最初に設計からClaudeと一緒に作ったらもっと早く実装できたのだろうと思いました。
それでも一番は楽しかった。次何か作るときはしっかり設計してから作りたいと思います。
読んでくださりありがとうございました！

Discussion