友人との旅行幹事が面倒だったので、Claude Codeで専用アプリを2週間で作った
はじめに
こんにちは。趣味で個人開発している Wintu です。
友人との旅行が増え、幹事を務めるたびに「旅程・費用・メモを一箇所にまとめたい」と感じるようになりました。そこで、グループ旅行管理アプリ「Romblan」を実際の旅行に向けて短期間で開発し、その過程で得た知見や Tips をまとめました。
今回は、話題の AI コーディングツール「Claude Code」をフル活用し、2 週間で PWA として構築した際のポイントを紹介します。
技術選定
まず前提として、AI はインターネット上に情報が豊富なライブラリ・フレームワークのコード生成が得意です。そのため、安定して情報量が多く、採用実績のある技術を選ぶことは AI 活用において大きなメリットになります。
ただし今回は、実際の旅行が迫っていたこともあり、私自身が日頃から使っていて習熟度が高い、かつ情報量も十分な技術スタックを選定しました。
- TypeScript
- Bun / Hono
- TypeORM / MySQL
- Vue.js / PandaCSS
特に重要なのは、TypeScript の型システムを最大限に活用することです。
AI が生成するコードには細かなミスが混ざりやすいため、型チェックを利用して “ズレ” を未然に検知し、品質を担保しやすくなります。
また、Hono には RPC 機能が搭載されています。
これを利用すると フロントエンドと API の型を自動で共有できるため、AI がコードを生成する際の齟齬（型名の不一致やパラメータの漏れ）を大幅に減らすことができました。
import type {ExtractResponseDataType} from '@/lib/api-client'
type TravelData = ExtractResponseDataType<typeof client.api.travels.$get>
MCPの導入
Claude Code単体でも相当強力なのですが、MCPを使うことで強化可能です。ただし、Contextを消費してしまうので入れすぎは注意です。私が便利に使わせてもらってるのは以下の2つです。
Context7でライブラリの導入を効率的に行え、serenaでトークンを節約しつつコード生成クオリティを上げております。
AI向けのガイド作成
Claude Codeを使う場合はCLAUDE.mdを作成することでプロジェクト単位のルールや最低限のメモリを事前に読み込み、従わせることができます。
私は基本的に公式のガイドを参考に書き、他サービス(CodexやGemini)などに繰り返し読み込ませ正常に従うかをチェックして進めてました
以下サンプルのようにコードルールに関しては実際のコードをサンプルとして入れてます。
### Function & Class Definitions
- **YOU MUST**: Always use arrow functions for ALL function definitions
- **PROHIBITED**: Avoid traditional `function` declarations and classes
- **Example**:
// ✅ CORRECT
const handleSubmit = async () => { ... }
const calculateTotal = (items: Item[]) => { ... }
// ❌ WRONG
function handleSubmit() { ... }
async function calculateTotal(items: Item[]) { ... }
デザインの決定
普段ソフトウェアエンジニアとして働く私にとってデザインは強敵です。ちょっとでも見栄えがいいアプリを作成するには自分自身のデザイン感度を上げる必要があります。
私はdribbleやpinterestをひたすら眺めてました。このデザインいいな。と思ったものをひたすら集め組み合わせています。
動かしたい時は雑にHTMLを書き、Claude Codeに続きを指示してプロットを作成の繰り返しです。
私はこの動画を参考にデザインを進めました。
フロントエンドを先に作る
バックエンドの畑から育ったエンジニアのため、ついついDBの設計からやりがちです。ただ、AIとコーディングする場合は設計を明確に伝えるのが手間だったりします。
なので設計をコードで表現することを意識してます。そこで画面から作るアプローチを取ります。画面を先に作成し、モックデータである程度動くところまで作るとその画面コード自体がバックエンドの設計書になります。
順番を変えるだけで体感結構AI側のミスが減った気がします。
上記のTipsを使うことにより無事旅行に間に合うことができました。完璧なものを作るより先に実際に使ってみないとわからない箇所がたくさんあり、改善点も見えてきたので間に合ってよかったです。
実際に旅行だとネットワークが不安定な箇所がたくさんあり、オフライン対応の必要性に気づくなどはありました。
最後に実際に作ったプロダクトの紹介をさせてください。
「Romblan」はグループ旅行に必要最低限の機能を詰め合わせた支援ツールです。ぜひご旅行予定がある人は試してみてください
Discussion