実録。弁護士マップを公開するまでの3日間

3月20日～22日の3日間で「弁護士マップ」というウェブサービスを開発した記録です。私はエンジニアですが、開発は Claude Opus4.6（設計とコーディング）、Codex（コードレビュー）、人間（全体レビュー）の体制で行い、1行もコードを書いていません。GitHub のコミット数を数えたところ、87個でした
https://bengoshi-map.com/

0日目

時刻	やったこと
22:00	3連休を使って、某裁判官マップにインスパイアされた弁護士マップを作ろうと思い立つ
23:56	都道府県クリック出来る日本地図の表示を claude に頼んだところ、「d3.js + TopoJSON が、stimulus との相性が良くてお勧め」とのことなのでそのまま ViewComponent で実装。記念すべき first commit。以下はpreview(Lookbook)の表示

1日目

時刻	やったこと
14:00	claudeと全体の設計について壁打ち。基本的な導線は、転職サイトなどで何度も作った（rails の案件によくある）都道府県をクリック→エリアをクリック→弁護士事務所一覧とする。弁護士事務所の住所リストは既に手元にあるので、それを claude に読ませると「KEN_ALL に郵便番号と地方公共団体コードが載っているので、それを使ってコード化するのが良い」とのこと
15:56	KEN_ALL をダウンロードして読み込み、DBに 郵便番号,地名,公共団体コード をインポートする機能を作成。大口事業所用郵便番号のインポート機能も作成
17:02	弁護士事務所の住所をパースして、郵便番号から公共団体コードを紐づけレコードに保存する機能を作成
21:57	KEN_ALL だけだと政令指定都市の「区」をまとめられないので、総務省の全国地方公共団体コードXLSをダウンロード・インポート、ついでにジオコーディングする機能を作成
23:10	仮のトップページを作成
23:40	地方公共団体マスタの管理画面を作成
23:50	郵便番号マスタの管理画面を作成
0:19	地方公共団体マスタに、札幌市＞札幌市中央区となるような親子関係のリレーションを作成
0:24	特別区（東京23区）が「区」として分類されていたので、特別区に分類するよう修正
2:34	KEN_ALL で町名に旧字体が使われていて、地方公共団体マスタと一致しない場合があるため、正規化する機能を追加
5:19	都道府県の slug やコードを管理するためのActiveHashモデルを作成
5:20	ジオコーディングAPIを使ってインポートするのに時間が掛かるので、実行して就寝

2日目

時刻	やったこと
16:30	作業再開
17:14	ジオコーディングで取得した緯度経度をyamlにエクスポートする機能と、yaml に無い場合のみAPIにフォールバックする機能を作成
20:15	地方公共団体マスタのコードは6桁（1桁はチェック用）、KEN_ALL は5桁なので、5桁に正規化する機能を追加
21:43	claudeやcodex と壁打ちしつつ、エリア一覧など全体の設計書を作成。エリアは、政令指定都市、市（特別区含む）、郡（町村の上位概念。コードが無いので KEN_ALL から抽出）のレコード。エリア has_many 地方公共団体。事務所住所は既に地方公共団体コードと紐づいているので、エリアごとに集約する
23:15	設計書を元に、一通り全体が動くサイトが完成
23:31	ページを遷移したときに、トップページで「地図を読み込んでいます」と一瞬待たされるのを軽減するため、js の読み込み最適化を行う
23:46	遅い原因が jsをCDN(jsdelivr)から読み込んでいるせいかもしれないので、npm を使ってパッケージングするように変更
0:43	読み込みの遅さが解決しないのため、d3.js をやめ、SVGを表示するように変更。沖縄の表示位置も左上から右下に移動
1:00	日本地図を弁護士の数でヒートマップ表示
1:23	スマホでクリックしづらかったので、都道府県ボタンを追加。
2:42	ボタンの位置調整。タブを追加。レスポンシブ対応
3:14	リンクの target: "_blank" をやめたり、テストを修正したり、ヒートマップの色合いを変えたりリファクタ
3:46	エリア一覧を「ア行」「カ行」のように行ごとにグループ化
4:41	「現在地から探す」ボタンを動くようにする
5:21	トップページを2カラムレイアウトに変更。表示内容はとりあえず claude におまかせ。

3日目

完成形