【個人開発】最寄り駅から徒歩X分以内の物件を地図上に列挙できるアプリを作ってみた【React,TS,supabase,leaflet】

Last updated at 2026-03-15Posted at 2026-03-15

賃貸物件を探す際、「駅から近い物件」、あるいは「駅から遠くてもいいので家賃が安い物件」などを調べたいことがよくある。
既存の賃貸サイトでは、「駅からX分以内」といった条件で物件を検索できる機能があるが、具体的な位置（近くに何があるか、駅のどの方角か）は各物件の詳細画面で確認するしかない。また、移動手段は徒歩限定であり、自転車や車などのバリエーションがない。

駅と移動手段（徒歩、自転車、車）、所要時間を入力することで、駅から指定の手段で、指定時間内に到達可能な範囲内にある物件を検索し、地図上にピンを刺して列挙してくれるアプリケーションである。

初期表示画面。

駅を指定すると、このようにピンが刺される。

所要時間を入力し、「検索」を押下することで、地図とドロワー上に検索結果が表示される(データはダミーである)。

物件マーカー、およびドロワー上の各物件をクリックすることで、駅からのルートが表示される。

画面遷移を失くし、1画面と少ない操作で完結できるように設計した。
「最寄り駅からX分以内の物件を探す」機能を前面に出すため、UIを必要最低限（5つのフォームと駅名検索のみ）にし、ユーザーがサイトを訪れてから最小のステップで検索を実行し、結果が得られるようにしている。
経路探索ライブラリの選定
- 当初はOSRMを使用予定だったが、地図データの読み込みや常駐時のメモリ逼迫が大きく、デプロイ時のコストが気がかりだった。
  valhallaはOSRMと比べるとかなり軽量で、ビルド時間も短く、さらにデフォルトで等時線(指定地点から指定時間で到達可能な範囲を返す)APIが用意されていたため、今回はこちらを使用した。

実際の物件情報を表示する機能。
- 現行ではダミーのcsvを使用している。物件サイトから情報を取得してテーブルに投入するバッチ処理が必要である。
Webにデプロイすること。
- 経路探索APIにDockerコンテナを使用しており、何等かのクラウドかvpsサービスを利用してコンテナをデプロイする必要がある。
路線選択時、実際の路線を地図上に表示すること。
- 現在は各駅を線でつなぐのみであり、実際の路線とズレが生じている。
物件の詳細情報を個別に表示すること。
- 現在一覧表示のみである。詳細表示では、物件から駅までの経路なども表示できるようにしたい。

単一ページで完結しているため、管理するべきStateやContextが多かった。機能を追加する際、冗長なコードにならないように、処理をまとめたり、any型を避けて型定義したり、コメントで補足するなど、可読性の担保を意識してコードを書いた。
地図の表示機能について、はじめは理解できるか不安だったが、やってみるとそれほど難しい機能ではなく、色々とカスタマイズできることが分かって楽しかった。今までは触れたことのない技術に対して抵抗感があったが、とりあえずハンズオンでもいいから広く浅く手を付けてみることは重要だと思った。

postGISのクエリ方法がかなり難しく、AIの助けを借りながら実装を行った。自分で腹落ちできるレベルまで理解しておきたい。
バックエンド処理全般。特にpostgresqlの関数定義。
valhallaの公式ドキュメントが英語で書かれており、仕様の把握に時間がかかった。斜め読みをする癖があるため、肝心な情報を読み飛ばしてしまうことがよくあった。きちんと上から読む癖をつけたい。

ReactのContextやRefについて、今までは知識として知っているだけだったが、実践で使用したことで、肌感としてそれらの使い方を理解できるようになった気がする。
各OSSをDockerコンテナとして運用することの恩恵を理解した。compose upするだけで即使用可能になるため、セットアップ手順やOSSの詳細について理解していなくとも十分に使いこなすことができる。

プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてください！
▼▼▼