第五章：ワンクリックで現在地を特定！最寄りのキャンプ場を見つける

想像してみてください：ユーザーが苦労して山奥の無名な農道に車を走らせ、日が暮れ始めた状況です。彼があなたの「車泊マップ」を開いた時、最も避けたいのは、画面をスクロールしながら密集した台湾地図上で自分の位置を探すことです。

彼が最初に知りたいことは間違いなく：「今どこにいるの？半径5km以内に安全な車泊スポットはある？」

ここで必要になるのが、現代ブラウザの強力な武器：**Geolocation API（地理位置情報API）**です。前章で学んだLeafletのflyToアニメーションと組み合わせれば、Google Mapsのような「現在地に移動」ボタンを実装できます。これはユーザーの不安を大幅に軽減する救命機能です。

🎯 本章の目標

ブラウザネイティブのGeolocation APIを使用して高精度GPSを取得する方法を学ぶ
位置情報取得時の「プライバシー制限」と「https安全接続」要件を理解する
フローティング「現在地ボタン（Locate Me）」を実装する
地図をユーザーの現在位置にスムーズに移動させ、マーカーを表示する

📍 ステップ1：ユーザー座標の取得（Geolocation API）

コードを書く前に、ブラウザが「位置情報取得」に非常に厳格なセキュリティ制限を設けていることを知っておく必要があります。

[!WARNING] プライバシーとセキュリティ制限！（初心者必読）

ユーザーのGPS座標を取得するには、必ずユーザーのクリック同意（許可ダイアログ）が必要です。ユーザーが拒否した場合、データは取得できません。

ほとんどの現代ブラウザ（Chrome、Safari、Edgeなど）では強制規定：https://（暗号化された安全な接続）のサイト、またはローカル開発環境（http://localhost）でのみ、Geolocation APIの呼び出しが許可されます。 SSL証明書がないhttp://ドメインにデプロイした場合、位置情報機能は警告なしに完全に無効になります！

制限を理解したら、煩雑なネイティブAPIを暗記する必要はありません。AIを使ってすべてのエラー処理を任せましょう。

🔥【Vibe Prompt 実践呪文】 React（Next.js）の地図コンポーネントで「現在地に移動」機能を作成したい。 navigator.geolocation.getCurrentPositionを呼び出すhandleLocateMe関数を生成してください。 要件： 1. ブラウザがこのAPIをサポートしていない場合、「お使いのブラウザは位置情報機能をサポートしていません」とalert()で表示 2. ユーザーが許可を拒否またはタイムアウトエラーが発生した場合、対応する日本語エラーメッセージをalert()で表示 3. 座標（latitude, longitude）の取得に成功した場合、まずconsole.logで座標を出力

AIは非常に堅牢（Robust）なエラー処理コードを生成します：

const handleLocateMe = () => {
  if (!navigator.geolocation) {
    alert("お使いのブラウザは地理的位置情報機能をサポートしていません！");
    return;
  }

  // 高精度モードとタイムアウト時間を設定
  const options = {
    enableHighAccuracy: true,
    timeout: 5000,
    maximumAge: 0
  };

  navigator.geolocation.getCurrentPosition(
    (position) => {
      const lat = position.coords.latitude;
      const lng = position.coords.longitude;
      console.log("📍 座標を取得しました：", lat, lng);
    },
    (error) => {
      switch(error.code) {
        case error.PERMISSION_DENIED:
          alert("位置情報を取得できません：位置情報の許可が拒否されました。ブラウザ設定で有効にしてください。");
          break;
        case error.POSITION_UNAVAILABLE:
          alert("位置情報を取得できません：現在GPS信号がありません。");
          break;
        case error.TIMEOUT:
          alert("位置情報を取得できません：リクエストがタイムアウトしました。しばらくしてから再試行してください。");
          break;
      }
    },
    options
  );
};

🚁 ステップ2：LeafletのflyTo（スムーズ移動）と連携

単にコンソールに座標を表示するだけでなく、地図を「飛ばして」移動させ、ユーザーに明確なマーカーを表示しましょう。 LeafletにはflyToという非常にクールな関数があります。

🔥【Vibe Prompt 実践呪文】 先ほどのhandleLocateMe関数を修正してください。 1. 座標の取得に成功したら、mapInstance.flyTo([lat, lng], 16, { animate: true, duration: 1.5 })を使用して地図を移動させる 2. React State（setUserPositionなど）を使用して座標を保存する 3. JSXでuserPositionが存在する場合、その座標にキャンプ場とは異なる特別なMarker（赤いマーカーや円など）をレンダリングし、「現在地」というPopupを表示する

このロジックを画面右下に浮かぶボタン（absolute bottom-10 right-4）にバインドします。スマートフォンでテストしてみてください。ボタンをクリックすると、「位置情報へのアクセスを許可しますか？」というブラウザのダイアログが表示され、許可を選択すると、映画のようなシーンが展開されます。地図が山や町をスムーズに飛び越え、あなたが立っている正確な場所に降り立つのです！

💼 [ビジネス応用シナリオ] 距離順ソートとナビゲーション連携

ユーザーの位置座標を取得できるようになると、地図アプリケーションは大きなビジネスポテンシャルを獲得します。この座標をデータベースと連携させ、以下の高価値機能を実装できます：

「近くのキャンプ場リスト」の実装：ユーザー座標とデータベース内のすべてのキャンプ場座標との直線距離を計算し、サイドバーに「5km圏内の空きキャンプ場」を表示。急な車泊スポット探しに非常に価値があります。
Google Mapsナビゲーションへのワンクリック接続：キャンプ場のPopupにボタンを追加し、クリックでwindow.open('https://www.google.com/maps/dir/?api=1&origin=' + userLat + ',' + userLng + '&destination=' + campLat + ',' + campLng)をトリガー。ユーザーが専門的なナビゲーションソフトにシームレスに移行できます。

✅ 本章のまとめ

Geolocation機能を追加することで、あなたの車泊マップは「静的な画像カタログ」から「環境認識能力を持つ実用的なナビゲーション補助ツール」へと進化します。これはユーザー体験を向上させるだけでなく、すべてのローカルO2O（Online To Offline）ビジネスモデルの基盤となるコア機能です。次章では、地図上にさまざまなポリゴンやルートを描画する方法を探求し、さらに高度な機能を解禁していきます！