📌

Geolocation API をPromiseを使ってラップする(TypeScript利用)

3 min read

Geolocation API を扱い易くするため、Promiseを使ってラップしたので忘備録に。
Geolocation APIをPromiseでラップして扱う(TypeScript)を参考に、もう少し細かく型を書いてみました。

クラス定義

Geolocation.ts
/**
 * 位置情報クラス
 */
class Geolocation {
  /**
   * 現在位置取得処理
   */
  static getCurrentPosition(): Promise<Position> {
    return new Promise<Position>(
      (
        resolve: (position: Position) => void,
        reject: (positionError: PositionError) => void,
      ) => {
      if (!navigator.geolocation) {
        // 位置情報APIが利用できない場合
        // 自前でPositionErrorを作成
        const error:PositionError = {
          code: undefined,
          message: 'geolocation not supported.',
          PERMISSION_DENIED: undefined,
          POSITION_UNAVAILABLE: undefined,
          TIMEOUT: undefined,
        }
        reject(error);
      }
      const geolocation: Geolocation = navigator.geolocation
      // 成功コールバック
      const successCallback:PositionCallback = (position: Position): void => {
        resolve(position)
      }
      // エラーコールバック
      const errorCallback:PositionErrorCallback = (positionError: PositionError): void => {
        reject(positionError)
      }
      // オプション定義
      const options: PositionOptions = {
        // enableHighAccuracy: boolean,
        // maximumAge: number,
        // timeout: number,
      }
      // 現在位置取得
      geolocation.getCurrentPosition(successCallback, errorCallback, options);
    });
  }
}

呼び出し

index.ts
/**
 * 位置情報更新処理
 */
const updatePosition = async () => {
  try {
    const position: Position = await Geolocation.getCurrentPosition()
    console.log(position)
    // [object GeolocationPosition] {
    //   coords: [object GeolocationCoordinates] {
    //     latitude: XX.XXXXXXX,
    //     longitude: XXX.XXXXXX,
    //     altitude: null,
    //     accuracy: 4507,
    //     altitudeAccuracy: null,
    //     heading: null,
    //     speed: null,
    //   },
    //   timestamp: 1577702787855,
    // }
  } catch (positionError) {
    console.log(positionError)
    // [object GeolocationPositionError] {
    //   code: 1,
    //   message: "User denied Geolocation",
    //   PERMISSION_DENIED: 1,
    //   POSITION_UNAVAILABLE: 2,
    //   TIMEOUT: 3,
    // }
  }
}

updatePosition()

ローカルに環境を作らなくても、CodePen.ioなどで簡単に試せます。

参考

GitHubで編集を提案

Discussion

ログインするとコメントできます