ReactコンポーネントでのGeolocation API

navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options)は、デバイスの位置情報を一度だけリクエストします。成功時のコールバックにはGeolocationPositionオブジェクトが渡されます。ボタンのクリック時に最寄りの店舗を検索する場合など、継続的な移動の追跡ではなく、一度だけ位置情報が必要なときに適しています。

navigator.geolocation.watchPosition(successCallback, errorCallback, options)は、デバイスの位置が変化するたびにコールバックを継続的に呼び出します。数値のwatchIdを返します。位置情報を常に最新に保つ必要がある、配送状況の追跡やターンバイターン方式のナビゲーションなど、リアルタイムの用途に適しています。

GeolocationPositionオブジェクトには、latitude、longitude、メートル単位のaccuracyを含むcoordsプロパティがあります。そのほかの任意フィールドには、altitude、altitudeAccuracy、heading、speedがあります。timestampフィールドには、位置情報が取得された時刻が記録されます。

エラー時のコールバックには、数値のcodeプロパティを持つGeolocationPositionErrorが渡されます。コード1はPERMISSION_DENIED（ユーザーが拒否した）、コード2はPOSITION_UNAVAILABLE（ハードウェアまたはネットワークの障害）、コード3はTIMEOUT（リクエストがタイムアウトした）を表します。必ず3つすべてのケースに対応してください。

watchPositionのリスナーは、停止するまで無期限に実行されます。useEffectでは、navigator.geolocation.clearWatch(watchId)を呼び出すクリーンアップ関数を返します。クリーンアップを忘れると、コンポーネントのアンマウント後も監視が実行され続け、バッテリーを消費したり、アンマウント済みの状態を更新したりする可能性があります。

useGeolocationフックは、4つの値を取り得るステータス状態を管理します。idle（まだリクエストしていない）、loading（リクエスト中）、success（位置情報を受信済み）、error（失敗）です。また、positionとerrorMessageも状態として保持します。これにより、コンポーネントは明確で一貫したインターフェースを利用できます。

ユーザーが位置情報を拒否した場合は、その機能に位置情報へのアクセスが必要な理由と、ブラウザの設定で再び有効にする方法を説明する、わかりやすいメッセージを表示します。ユーザーに生のエラーコードを表示してはいけません。位置情報の許可がなくても機能を利用できるように、住所を手動で入力する代替手段を用意してください。

多くの強力なブラウザAPIと同様に、位置情報の取得はセキュアコンテキストに制限されています。通常のHTTPページではnavigator.geolocationはundefinedになります。開発中にlocalhostを使用する場合は、HTTPSがなくても動作します。本番環境では、必ずアプリをHTTPSで配信してください。そうしないと、ユーザーに許可を求めるダイアログが表示されません。

getCurrentPositionとwatchPositionの3番目の引数には、オプションオブジェクトを指定できます。enableHighAccuracy: trueを指定すると、電力消費が増える代わりにGPSレベルの精度を要求します。timeoutは待機する最大時間をミリ秒で指定します。maximumAgeを指定すると、指定したミリ秒以内に取得された位置情報をキャッシュから使用できます。

位置情報を利用すると、「近くの店舗を探す」、地図上での配送ドライバーの追跡、現在の都市に基づく天気情報、位置情報付きの投稿、ユーザーと目的地の距離の計算などの機能を実現できます。許可を求める前に、アプリが位置情報を必要とする理由を必ずユーザーにわかりやすく説明してください。

Chrome DevToolsでは、偽のデバイス位置を設定できます。DevToolsを開き、3点メニューから「その他のツール」、「Sensors」の順に選択します。緯度と経度を入力して、任意の場所をシミュレートできます。位置情報に依存する機能をテストする際、実際にその場所へ移動するよりもはるかに効率的です。

GeolocationPositionErrorのコードが1の場合、何を意味しますか？

一度だけ位置情報を取得するにはgetCurrentPositionを、継続的に追跡するにはwatchPositionを使用します。必ずuseEffectのクリーンアップでclearWatchを呼び出してください。idle、loading、success、errorの状態を持つuseGeolocationフックを作成します。許可の拒否に適切に対応し、本番環境では位置情報の取得にHTTPSが必要であることを忘れないでください。