2025/06/23

概要

• LeafletとSvelteを使った地図検索＆レビュー投稿アプリを作成
• OpenStreetMapのNominatim APIを利用した場所検索機能を実装
• 検索結果を地図上に最大30件のマーカーで表示
• マーカーをクリックするとレビュー投稿フォームをモーダルまたは横並びパネルで表示
• PC版は地図とレビューを横並び表示、スマホ版はモーダルでレビュー投稿可能に対応
• レビューはLocalStorageに保存し、永続化を実現

使い方

• 検索のフォームに場所を入れることで東京都の30件のものがヒットするようにした
• PCだと、マーカーを押すと左に地図・右にレビューをかけるようになります
• スマホだと、マーカーを押すとモーダルでレビューがかけるようになります

詳細

地図・検索機能

• Leafletで地図を表示し、OpenStreetMapのタイルを使用
• Nominatim APIにキーワードを送り、最大30件の検索結果を取得
• 検索結果ごとにマーカーを設置し、ポップアップ内にレビュー投稿ボタンを表示
• マーカークリック時にレビュー投稿フォームを呼び出すイベントを実装

レビュー機能

• レビュー投稿フォームをReviewModal.svelte（モーダル）とReviewPanel.svelte（横並びパネル）で実装
• App.svelteで画面サイズを監視し、PCは横並び、スマホはモーダル表示に切り替え
• レビューはローカルストレージに保存し、ページをリロードしても内容が保持される

UI/UX改善

• 画面幅によるレスポンシブ対応を実装
• PCでは地図を横幅いっぱいに広げ、レビューエリアは横にスリムに表示
• モーダルのクリックで閉じる仕組みを実装