距離測定アプリ「distance-measurement-app」を作成しました。
url:https://adorable-cannoli-d522c2.netlify.app/
github:https://github.com/KOSOTSU-dev/distance-measurement-app
プロジェクト概要
「distance-measurement-app」は、ウォーキングやランニングの距離をなぞるだけで測れる Web アプリです。
React と TypeScript をベースに、Leaflet × OpenStreetMap を利用して地図上でルートを描き、その距離を計算します。
計算には地球の丸みを考慮できる Haversine 公式 を採用し、より正確な結果を出せるよう工夫しました。
開発で苦戦したこと
1. 地図APIの選定
- 最初は「Google Maps API」を検討しました。
- しかし利用制限や料金体系があり、自由に試すにはハードルが高いと感じました。
- その結果、無料でカスタマイズ性も高い OpenStreetMap を採用。
2. React と Leaflet の組み合わせ
- Leaflet は純粋な JavaScriptライブラリなので、React とどう組み合わせるかに悩みました。
-
react-leafletを使うことである程度スムーズに統合できましたが、- 「クリックイベントの扱い」
- 「状態管理と描画の同期」
には苦労しました。
3. 距離計算ロジックの実装
- 2点間の距離計算には Haversine 公式を使いましたが、最初は計算式の理解が難しかったです。
- 緯度・経度をラジアンに変換する必要や、浮動小数点の誤差調整など細かい落とし穴がありました。
- 直線距離は出せても「道路に沿った距離」をどう表現するかという課題にも直面しました。
（ここまでaiで記述）
考えていたこと・工夫したこと
-
「気軽に試せる距離測定ツール」
→ ランナーや散歩する人が、アプリや複雑な設定なしで直感的に使えることを目指しました。 -
「無料で持続可能な仕組み」
→ Google Maps のような課金制APIではなく、OpenStreetMapを選んだのは、学生や個人開発者でも安心して使えるからです。 -
「正確性と直感操作の両立」
→ Haversine公式での計算は「正確さ」、地図クリックでのルート描画は「直感性」を意識。
→ 正確さと使いやすさをどうバランスさせるかを常に考えていました。 -
「正確性と直感操作の両立」
→ 道をなぞると道を認識して補正する機能を追加しようと思いましたが、補正するところまではうまくいったのですが散歩のような一周まわるようなルートを描いた時、最短ルートを補正してしまい、縁を描くことができませんでした。そのため、セーブポイントを作成できるようにして、セーブからカーソルまでの道の中だけで補正を行おうと思ったのですが自分の力不足で補正が効かなくなったり、セーブポイントがうまく設定されなかったりという障害にぶつかりました。
結果、悔しいですがなぞったものを軸として距離を測るようにしました。人が道をなぞるとどうしてもブレてしまうので本当に若干ですがそのぶれを正すように補正する機能を追加しました。理想としてはなぞるだけでブレた部分を道にピッタリ沿うように補正してできるだけ完璧な距離測定をできるようにしたかったのですが悔しいです。
まとめ
理想の機能と実際の実力のギャップの中でどう折り合いをつけて開発するかや代替案のアイデアを考えるのが非常に楽しかったです。 今後、フィットネス記録系の機能を追加していくのも面白いかなとも思いましたが複雑化するとその分使いやすさは減ってしまうので難しいところです。。
何か感想やアドバイス等あれば聞きたいのでぜひコメントやdmお待ちしております。明日の更新をお楽しみに。
https://x.com/KOSOTSU_KUN(X)
https://github.com/KOSOTSU-dev(github)