Reactで、現在地を取得して表示する方法

// 位置情報の結果を、画面に出す形にする
export type Coords = { latitude: number; longitude: number; accuracy: number; timestamp: number };

export function toCoords(p: GeolocationPosition): Coords {
  const { latitude, longitude, accuracy } = p.coords;
  return { latitude, longitude, accuracy, timestamp: p.timestamp };
}

export function toMessage(err: GeolocationPositionError) {
  switch (err.code) {
    case err.PERMISSION_DENIED: return '位置情報の利用が許可されていません。ブラウザの設定で許可してください。';
    case err.POSITION_UNAVAILABLE: return '現在地を特定できませんでした。';
    case err.TIMEOUT: return '時間内に現在地を取得できませんでした。';
    default: return `現在地を取得できませんでした（${err.message}）`;
  }
}

// HTTPS（または localhost）でないページでは、位置情報を使えない
export function unsupportedReason() {
  if (!window.isSecureContext) return 'このページでは位置情報を使えません（HTTPS で開いてください）。';
  if (!('geolocation' in navigator)) return 'このブラウザは位置情報に対応していません。';
  return '';
}

import type { Coords } from './geo';

export function CoordsView({ coords }: { coords: Coords }) {
  return (
    <dl className="coords">
      <dt>緯度</dt><dd>{coords.latitude.toFixed(5)}</dd>
      <dt>経度</dt><dd>{coords.longitude.toFixed(5)}</dd>
      <dt>精度</dt><dd>約{Math.round(coords.accuracy)}m</dd>
      <dt>取得時刻</dt><dd>{new Date(coords.timestamp).toLocaleTimeString('ja-JP')}</dd>
    </dl>
  );
}

import { useState } from 'react';
import { type Coords, toCoords, toMessage, unsupportedReason } from './geo';
import { CoordsView } from './CoordsView';

export function CurrentLocation() {
  const [coords, setCoords] = useState<Coords | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  function locate() {
    const reason = unsupportedReason();
    if (reason) return setError(reason);
    setLoading(true);
    setError('');
    navigator.geolocation.getCurrentPosition(
      (p) => {
        setCoords(toCoords(p));
        setLoading(false);
      },
      (err) => {
        setError(toMessage(err));
        setLoading(false);
      },
      // 10秒で諦める。前に取った位置は使わず、毎回取り直す
      { enableHighAccuracy: false, timeout: 10_000, maximumAge: 0 },
    );
  }

  return (
    <section>
      <button type="button" onClick={locate} disabled={loading}>
        {loading ? '取得中…' : '現在地を取得'}
      </button>
      <p role="alert">{error}</p>
      {coords && <CoordsView coords={coords} />}
    </section>
  );
}

import { useEffect, useState } from 'react';
import { type Coords, toCoords, toMessage, unsupportedReason } from './geo';

// enabled が true の間だけ、位置が変わるたびに受け取る
export function useWatchPosition(enabled: boolean) {
  const [coords, setCoords] = useState<Coords | null>(null);
  const [error, setError] = useState('');

  useEffect(() => {
    if (!enabled) return;
    const reason = unsupportedReason();
    if (reason) {
      setError(reason);
      return;
    }
    const id = navigator.geolocation.watchPosition(
      (p) => {
        setCoords(toCoords(p));
        setError('');
      },
      // エラーのあとにも位置が届くことがあるので、最後の位置は消さない
      (err) => setError(toMessage(err)),
      { enableHighAccuracy: true, maximumAge: 0 },
    );
    return () => navigator.geolocation.clearWatch(id); // 追うのをやめる
  }, [enabled]);

  return { coords, error };
}

import { useState } from 'react';
import { useWatchPosition } from './useWatchPosition';
import { CoordsView } from './CoordsView';

export function LiveLocation() {
  const [watching, setWatching] = useState(false);
  const { coords, error } = useWatchPosition(watching);

  return (
    <section>
      <label>
        <input type="checkbox" checked={watching} onChange={(e) => setWatching(e.target.checked)} />
        現在地を追い続ける
      </label>
      <p role="alert">{error}</p>
      {coords && <CoordsView coords={coords} />}
    </section>
  );
}

位置 35.6812 → エラー 2 → 位置 35.6852 → エラー 2 → 位置 34.7025

import { useEffect, useState } from 'react';

// 比べるための書き方：片付けで clearWatch() を呼んでいない
export function NaiveWatch() {
  const [lat, setLat] = useState<number | null>(null);
  useEffect(() => {
    navigator.geolocation.watchPosition((p) => setLat(p.coords.latitude));
  }, []);
  return <p>{lat}</p>;
}