Zenn
🗾

非エンジニアが AI 駆動開発で 2ヶ月で作った地図アプリの裏側

に公開
Rust
TypeScript
postgis
PMTiles
idea

TL;DR

  • 住所を入力すると 1 秒 で管轄法務局を判定する地図アプリを、開発期間 実働約 2 ヶ月・AI 利用料込み開発コスト 約 10 万円 で構築
  • MapLibre GL JS + Next.js + Rust(Axum) + PostGIS の"個人開発でも回る"コンパクト構成
  • Vibe Coding × LLM を活用し、設計〜実装〜デプロイまでを AI と対話しながら推進
  • SQL.js 断念 → Martin vCPU 爆食い → Axum/PostGIS へ切替など失敗と学び多数
  • 本記事では AI 駆動開発の実践ノウハウ と開発過程の失敗談を中心に解説

プロダクト概要

  • サイト URL: https://nextjsfrontend-prototype.up.railway.app/
  • 住所入力 or 地図クリックで即座に管轄法務局を表示
  • 住居表示 → 管轄法務局をリアルタイム判定する 公開サービスとしては世界初（2025/07 当方調べ）
  • 詳細レポート（Claude 生成）: 『日本の法務局管轄判定システムに関する調査報告書』 ※非公開ドラフト

実績を数字で見る

指標 数値 補足
開発期間 実働約 2 ヶ月 2025/03 開始 → 06 完了（5 月は休止）
開発コスト ≒ ¥100,000 LLM 代: Windsurf 2 ヶ月 + Cursor 2 ヶ月 + GPT Plus 1 ヶ月 + Claude Code etc.
1 日目の PV 50 PV Note 流入のみ
コード行数 ≒ 5,400 行 tokei で自作ソース (TS/TSX/Rust/Python) を集計（2025/07/02）
データ行数 ≒ 3,300 行 自作 JSON データセット（法務局管轄エリア）

Vibe Coding テクニック Best 5

1. チャット分割でコンテキスト飽和を防ぐ

LLM は 3,000 token を超えると急激に質が落ちる印象。チャットを分割し、直前の要約＋タスク看板だけを渡すことでパフォーマンスを維持した。

2. 設計ドキュメントを Markdown 分割し毎回 LLM に添付

ドメインモデル／API スキーマ／タスク看板をそれぞれ 400 行以下に分割。必要な断片だけ貼れば token を節約しつつ誤解を防げる。

3. まず LLM に現状把握させる

新しいチャットを作成後、LLM にドキュメントを渡して「まず作業をせずに一旦状況を理解してほしい」と伝えると、ドキュメントを見た上で関連する作業中のコードを確認して実際の作業進捗を理解してくれる。そして理解した内容をざっくり話してくれるので、認識のずれを防ぐことができる。

4. モデルスイッチで回答の多様性を確保

Gemini ↔ GPT-4.1 ↔ o3 をタスク単位で切替え。詰まったら別モデルに聞くと突破口が開けることが多い。

失敗談と解決策

SQL.js 断念 → Martin

WASM 版の SQLite には SQLite WASM と SQL.js の二つの利用方法があるが、前者はコード内で空の.sqlite を用意する初期化作業が必須であったため断念。後者はメモリ内に DB を展開するが、全国版のジオコーディング用のデータを組み立てた結果 32GB に到達したため、断念。

abr-geocoder を素直にバックエンド側で用意し、別で法務局管轄タイルを配信するサーバーを用意することにした。タイル内に法務局情報を含めてしまえば、法務局情報を返すバックエンドサーバーを開発する必要がない。なんと楽な話だろう！すでに出来上がっているサーバーに設定ファイルをつけてデプロイするだけでいいのだ。

しかし、いざ実際に動作させてみると、自分が操作しただけで 30 もの vCPU を使用してしまった。流石に同時に 2 人で利用できない時点で Web サービスとして話にならないため、軽量化する必要があった。

Martin → Axum/PostGIS + PMTiles

AI の導きにより、そもそも頻繁に変化しない情報に Martin を使って都度タイルを生成する必要はなく、事前にタイルを組み立てておいてただ配信すればいいのだと気づく。PMTiles の出番である。

法務局の詳細情報をタイルに含めるのをやめて別でバックエンドサーバーを建てることを許容し、ある法務局が管轄するエリアのポリゴンを事前に結合しておいて、それを PMTiles 化することによって大幅に軽量化することに成功した。

abr-geocoder 32 GB ビルド問題

  • 症状: デプロイ時に 15 分オーバーで失敗
  • 解決: ローカルでビルド →pCloud へ zip 配置 → 起動時に解凍

LLM コンテキスト落ち問題

  • 症状: 指示逸脱 & 同じ提案ループ
  • 解決: テクニック 1 + 2 で解消

今後の展望

  • ポリゴン精度の向上
    国勢調査ポリゴン → 登記所備付地図ベースへ全面リプレイス予定。
  • API 連携の公開
    REST API を一般公開し、Excel などからの呼び出しも想定。
  • 裁判所など他機関の管轄マップ拡張
    不動産・商業登記にとどまらず、訴訟管轄や税務署など他制度へ展開。
  • マップエンジン再検討
    Google Maps など代替エンジンでの UX／コスト比較を実施。

まとめ & Call to Action

Discussion