「あの道路どこ通ってるんだっけ？」をサクッと知りたい
「国道246号線ってどこからどこまで？」「環八ってどれ？」などを簡単に知りたいときにGoogle Mapとかで道路名検索しても，交差点とかしか出てこず困っていたので，Webアプリを自作しました．
道路名や路線番号で一発検索し，路線をハイライトして地図上に表示できます．
インストール不要，Webブラウザでアクセスするだけで気軽に使えます1．
道路閲覧検索アプリ：https://toruseo.jp/road-viewer-finder/
これは，OpenStreetMap（OSM）のデータをもとに，日本全国の主要道路（高速道路・国道・都道府県道）をブラウザ上で閲覧・検索するものです．
左上の検索パネルから道路を検索できます．
- 道路名で検索：「東名」で東名高速道路がハイライトされます
- 路線番号で検索：「246」で国道246号線が見つかります．〇〇県道246号線とかもヒットしますが，マウスホバーで詳細がわかるので区別可能です
- 種別で絞り込み：高速道路だけ，国道だけ，といった絞り込みもある程度可能
検索にヒットした道路は黄色でハイライト表示され，自動的にその範囲にズームします．
道路をダブルクリックすると，その道路と同じ種別・路線番号の道路を自動で検索します．
「この道路，どこまで通っているんだろう？」という疑問にすぐ答えられます．
なお，道路データはOSMを独自に軽量化したものを使用しています．
そのため，実際の道路と異なる場合や，最新の状況が反映されていない場合があります．
対象はおおむね都道府県道以上の道路のみです（OSMでいうところのsecondaryクラス以上）．
多少の粗はお目こぼしください．あくまでサクッと知りたい用途向けです．
最初だけ14MBのデータ読み込みが入ります．
都道府県道の描画チェックを入れるとさらに21MB読み込みます．
若干描画量が多いので，統合GPUのノートPCやスマホだと少し重いかもしれません．
その場合は描画対象の道路のチェックを外してください．
また，ズームすれば軽くなるはずです．
リンク
実装上工夫したポイント
Webブラウザで全主要道路を表示し検索できるという機能をスムーズに実現するため，いくつか工夫をしています．
まず，前処理により可能な限りデータを軽量化し，通信と描画を効率化しています．
同種の道路をまとめたり，見た目に影響しない範囲で緯度経度の精度を落としたり，道路種類別の読み込み機能などを使っています．
そして，システムの裏側では描画範囲をグリッド分割により必要最低限にする処理が入っており，描画処理を軽くしています．
これはPMTilesなどの高機能ライブラリはデフォルトで持っている機能ですが，これまで試した範囲ではそれよりもスムーズに描画ができています．
また，道路名ラベル表示のロジックも，主要道路がわかりやすく表示されるよう少し工夫しています．
ニッチですが，路線番号ベースの検索も見つけたい道路を確実に見つける手段として有用と思います．
道路名のあいまい検索は表記ゆれや完全に別名になったりする場合が多くて難しいので．
余談
コードは全てClaude Code氏に書いてもらい，人間は一行も書いてません．
とはいえAI丸投げというわけではなく，前述の工夫ポイントを人間の指示で盛り込みつつチューニングしました．
使用トークン数を金銭換算すると約30ドルだそうです．
技術スタックはVite + deck.gl (GeoJsonLayer, TextLayer) + MapLibre GL JSとのことです．
筆者はhtmlとjavascriptとGISの知識は最低限ありますが，Viteというのが何なのかはよくわかってません．Node.jsの理解も微妙です．
面白い時代ですね．
余談の余談
ちなみに，GPT氏にレビューさせると，
これは「標準的なサンプル実装」ではありません。「大量の道路データを日本全域で扱い、描画・ラベル・検索・ハイライトを制御したい」という前提では、かなりよく考えられた実装です。
とおだててきました．
一方，Gemini氏にレビューさせると，
「2020年頃のdeck.glならあり得た実装だが、2025年基準だと過剰エンジニアリング」 です。ライブラリの進化に合わせてコードを削除できる余地が半分以上あります。
と辛口．
ただ，Geminiにお勧めされたPMTilesを使う実装をやってみたところ，読み込み遅延が頻繁にはいり不便．工夫の余地はありそうですが，現状で及第点と判断しました．
-
調べた限りではこれらの要件を満たすサービスは見つかりませんでした．需要はある気がするんですが．．．ある程度似ているもの：Overpass Turbo（データベースとOSM内部の知識が必要），日本の県道一覧サイト（リストから選択し表示する形式．なお県道一覧と言いつつ国道も出てくる），Wikipediaの一部道路記事についている地図（これどうやって作ってるんでしょう？手作業？）．他にあればご教示いただければ幸いです． ↩