はじめに
はじめまして！
株式会社Dirbatoの社内技術支援横断組織「Backbeat」で、最新技術の調査や社内ツールの保守開発を担当している山田佳奈です。
2025年入社組として、もうすぐ入社から1年が経とうとしている事実に震えております...（時の流れが早すぎる）。
今回は、私が技術キャッチアップを兼ねて開発した、 AI IDE「Cursor」とのペアプログラミングによる個人開発アプリ「PonChord」 について紹介させてください。
開発の動機：スケジュールも行きたい場所も予算も、全部一つにまとめたい！
私は学生時代から海外旅行が大好きで、行きたい国や場所が見つかればすぐに飛んでいくタイプでした。
しかし、学生時代の限られた予算と時間で最大限楽しむには、「綿密な計画」 が欠かせません。
当時はこんな感じで管理していました：
- 行きたい場所リスト → Instagramの保存
- 場所の確認 → Google Maps
- スケジュール → Excelやスプレッドシート
- やりとり → LINEのノート
……ツール、散らばりすぎ問題。
いくつかの旅行アプリも試しましたが、自由度が低かったり、帯に短し襷に長しで「これだ！」としっくり来るものがありませんでした。
そこで、 「自分の管理したい項目がすべて揃ったアプリがあれば、もっと快適に旅行ができるはず！」 と考え、Next.jsの勉強も兼ねて自分で作ることにしました。
PonChord（ポンコード）とは？
PonChordは、複数人でリアルタイムに近い感覚で旅程を編集・管理できるWebアプリケーションです。
アプリ名の由来には、私の切実な願いが込められています。
- Pon: 私自身がよくうっかりミスをする「ポンコツ（Ponkotsu）」なので、そんな私でも使えるように。
- Chord: 音楽の「和音（Chord）」のように、旅行の計画をみんなで調和させながら作り上げたい。
「ポンコツな私でも、最強アプリがあれば仲間と楽しく旅程が立てられる。そして最高のハーモニー（計画）が作れる！」
という、想いで命名しました。笑
開発の相棒：AIエディタ「Cursor」
このアプリ開発において重要だったのが AI搭載コードエディタ「Cursor」 の存在です。
Webアプリ開発初心者の私にとって、Next.jsやPrismaといった技術は未知の領域でした。そこで私は、Cursorを 「24時間隣にいてくれるシニアエンジニア」 と見立て、ペアプログラミングを行いました。
意識したのは、以下のサイクルを回すことです。
- 実装: 要件を伝えて土台となるコードを生成してもらう
- 理解: 「なぜこの記述が必要か？」を質問し、技術的な裏付けを得る
- 定着: 理解した内容をもとに、より的確な指示（プロンプト）を出す
単にコードを書いてもらうだけでなく、「なぜ？」を問い続けるスタイルを徹底したことで、手を動かしながら楽しく技術を習得できました。結果として、開発後半にはAIへの指示出しの精度も上がり、開発効率が劇的に向上しました。
PonChord実装については、今後も記事を書く予定ですが、どこかで私が開発中にCursorへ投げた数百件のプロンプトを分析し、AIとどう付き合えばバグを減らせるかについても解説する予定です。
主な機能
- 共同編集: URL招待で友人を追加し、一緒にプランを練ることができます。
- 24時間タイムライン: 縦型のタイムラインで、視覚的にスケジュールを把握。
- しおりPDF生成: 作成した計画を、印刷可能なPDFとして出力（日本語対応）。
- 行きたいところリスト: 気になるスポットをスクラップしてタグ管理。
- 支出管理: 旅行中の割り勘計算もサポート。
技術スタック
モダンなWeb開発のトレンドを抑えつつ、個人開発としての生産性と型安全性を重視して選定しました。
| カテゴリ | 技術 | 選定理由 |
|---|---|---|
| Dev Tool | Cursor | AIペアプログラミングによる爆速開発を実現するため。 |
| Frontend | Next.js 14 (App Router) | Server Componentsによる最適化とディレクトリベースルーティングのため。 |
| Language | TypeScript | 開発体験の向上と、バグの早期発見（型安全性）のため。 |
| Styling | Tailwind CSS | デザインシステムを素早く構築し、レスポンシブ対応を容易にするため。 |
| Backend | Next.js API Routes | フロントエンドと同じリポジトリ・言語で完結させるため。 |
| Database | PostgreSQL | 信頼性の高いRDB。 |
| ORM | Prisma | スキーマ定義が直感的で、TypeScriptとの相性が抜群に良いため。 |
| @react-pdf/renderer | Reactコンポーネントを書く感覚でPDFをレイアウトできるため。 |
実装の歩み（開発ロードマップ）
このアプリは一気に完成させたわけではなく、大きく4つのフェーズを経て現在の形になりました。
Phase 1: 基盤構築（まずは動くものを）
まずはアプリの骨格を作るところからスタートしました。
- 認証: NextAuth.jsを使ったメール/パスワード認証の実装。
- CRUD: 旅程の作成・編集・削除機能。
- DB設計: User, Journey, JourneyItem などの基本的なPrismaスキーマの定義。
Phase 2: コア機能の実装（技術的な壁への挑戦）
ここでは技術的に難易度の高い機能に挑戦しました。特にPDF生成は 「日本語が文字化けする」「ダウンロードできない」 などの問題に直面し、かなり苦労しました（詳細は後々の記事で解説します）。
- 画像アップロード: ファイルサイズ制限やパス解決の実装。
-
PDF生成:
@react-pdf/rendererの日本語フォント対応。 - 支出管理: 割り勘ロジックの実装。
Phase 3: UI/UX改善（使いやすさの追求）
機能は動くようになったので、使い勝手を向上させました。
- タイムラインUI: 当初は単純なリスト表示でしたが、 「24時間軸で見たい」「クリックで追加したい」 という要件を実現するためにUIを作り込みました。
- レスポンシブ対応: スマホでも快適に操作できるように調整。
- モーダル制御: 予定の追加・編集をスムーズにするため、モーダルコンポーネントを整備。
Phase 4: 高度な機能（完成度を高める）
最後に、アプリとしての完成度を高める機能を追加しました。
- マイページ: プロフィール画像やステータスメッセージ機能。
- タグ機能: 検索や絞り込みを可能に。
- 共同編集: URLによる招待システムと、同時編集時の競合を防ぐ楽観的ロックの実装。
こだわりの機能
1. 直感的なタイムライン編集
もっともこだわったのがこのUIです。24時間の縦長タイムラインを採用し、空いている時間をクリックするだけで予定を追加できます。
- 10時間分を表示し、残りはスクロール。直感的に時間を把握。
- 位置情報に住所を登録するとGoogleMapでその位置の情報を開くことが可能。
- ドラック&ドロップで予定のブロックを移動出来る。
2. PDFしおり生成
旅行といえば「しおり」。ボタン一つで、日本語フォント（Noto Sans JP）に対応した綺麗なPDFを生成します。スマホで見たり、印刷して持っていくことも可能です。
出力されるPDF(出力デザインについては考え中)↓
3. 行きたいところリスト＆タグ管理
「とりあえず行きたい場所」をリストアップし、#ご飯 #イベント などのタグで色分け管理できます。Google Mapsリンクも住所から自動生成されます。
おわりに
Cursorという強力な相棒と共に個人開発を進めましたが、それでも技術的な「ハマりポイント」はたくさんありました。
- Next.js App Routerの
paramsがPromise型になっていてエラー連発 - Prismaのスキーマ変更後に型定義が合わなくなる問題
- PDF生成でのフォント読み込みエラー
- 共同編集時のデータ不整合
次回以降の記事では、これらの具体的なエラーと解決策にフォーカスして、技術的な深掘りをしていきます！