ExpoのLocationで位置情報を取得する【これからはじめるReact Native】

はじめに

アプリ開発において、位置情報を扱うケースは多くあります。
現在地から近いお店情報の取得、現在地から近い人とマッチングなど、様々な使い方がアプリ上でされています。
今回は、React NativeでexpoのLocationを使用し位置情報を取得する方法をご紹介します。

Locationの使い方

React Native公式のGeolocationを今回は使わず、Expo用のLocationを使用します。

では、いつものようにsnack expoでプロジェクトを作っていきます。
今回開発するのはこちらのイメージです。

今回のコードはこちらです。

※端末の位置情報を使用する為、シミュレータではなくデバイスでないと正しく位置情報が取得できません。
またExpoのアップデートでiOSの場合にはQRコード経由ではなくなったのでご注意ください。

コードの解説

import { Location, Permissions } from "expo";
まず必要なコンポーネントをロードしています。
Permissions というのはユーザーの権限周りの管理をしています。
今回は「位置情報の使用を許可するか」という確認をユーザーに行い、許可が取れたら位置情報を取得し使用する、という流れの為に使用しています。

  state = {
    locationResult: null
  };

stateのlocationResultにnullを入れて初期化しています。

  componentDidMount() {
    this._getLocationAsync();
  }

componentDidMount つまりコンポーネントがマウントされた後に_getLocationAsyncイベントを実行しています。

  _getLocationAsync = async () => {
   let { status } = await Permissions.askAsync(Permissions.LOCATION);
   if (status !== 'granted') {
     this.setState({
       locationResult: 'Permission to access location was denied',
     });
   }

   let location = await Location.getCurrentPositionAsync({});
   console.log(JSON.stringify(location));
   this.setState({ locationResult: JSON.stringify(location) });
 };

長いので分けて解説していきます。

async ()
こちらはいわゆるasync/await構文です。

async/await構文とは

MDN（Mozilla Developer Network）の解説によるとこうあります。

async 関数が呼び出された場合、 Promise を返します。async 関数が値を返した場合、promise は返された値で解決されます。async 関数が例外や何らかの値をスローした場合、 Promise はスローされた値で拒否されます。
async 関数は、 await 式を含むことができます。 await 式は、async 関数の実行を一時停止し、 Promise の解決を待ちます。そして async 関数の実行を再開し、解決された値を返します。

ちょっとこれだと難しいかもしれませんね。
Promiseとは、わかりやすく言えば「現時点ではわからなくても良い（あとで結果がわかる）値を使うこと」です。
async関数では、await式を持つことができます。このawait式はPromiseの解決を待つことができます。

なぜこんなまどろっこしいことをするかというと、API経由で値を取得する場合など「処理に時間がかかるが値をすぐ使いたい」ときに「一旦処理の結果が返ってくるのを待って！」とストップをかけることができるからです。

今回のケースでいうと、
let { status } = await Permissions.askAsync(Permissions.LOCATION);
こちらはstatusにPermissionsの位置情報を確認した値を代入しています。
「位置情報を取得しても良いですか？」というアラートの結果は、ユーザーの選択を待たなければならずすぐ返ってくるわけではありません。
その状態で次の行の
if (status !== 'granted') {
に進むわけにはいかず、awaitでPromiseの結果を確実に待ってから処理するというわけです。

 if (status !== 'granted') {
     this.setState({
       locationResult: 'Permission to access location was denied',
     });
   }

こちらでは確実に取得したユーザーの位置情報取得に関する確認の結果を持って、拒否された場合にlocationResultにアクセス拒否された旨を伝えています。

let location = await Location.getCurrentPositionAsync({});
getCurrentPositionAsyncで位置情報を取得し、locationに代入しています。

this.setState({ locationResult: JSON.stringify(location) });
こちらはstateのlocationResultに、先程取得した位置情報のJSONデータであるlocationを文字列にして渡しています。

        <Text>
          {this.state.locationResult}
        </Text>

そして最後、locationResult をレンダリングすることで、位置情報が画面上で出てくるというわけです。

まとめ

今回はExpoのLocationをご紹介しました。
以前も解説した通り、ExpoではNative系の機能がそのまま使えない代わりに、ExpoがこのLocationのように代替のAPIを用意してくれています。
またAPIの返り値などでasync/await構文を使う方法も学習しました。
これはかなり多く使われるので理解するようにしてください。

次回からはExpoを使用し、実際にクイズアプリを作りながら解説していきます。