1. ホーム
  2. React Native
  3. ExpoのLocationで位置情報を取得する【これからはじめるReact Native】

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

目次

  1. はじめに
  2. Locationの使い方
  3. まとめ

はじめに

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

 

Locationの使い方

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

では、いつものようにsnack expoでプロジェクトを作っていきます。
今回開発するのはこちらのイメージです。
Image uploaded from iOS.png (144.1 kB)

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

※端末の位置情報を使用する為、シミュレータではなくデバイスでないと正しく位置情報が取得できません。
また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に代入しています。

POINT!!

getCurrentPositionAsyncは現在位置を一回だけ取得するメソッドです。 他にも随時(時間や距離のインターバルは設定可能)取得するwatchPositionAsyncといったメソッドもあります。watchPositionAsyncではアプリ起動時の位置情報取得となりますが、アプリ非起動時(バックグラウンド)でも位置情報を取得することを検討中とのことです。詳しくは公式リファレンスをご覧ください。

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

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

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

まとめ

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

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

投稿者プロフィール

eishis
eishis
SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。
マーケター・ディレクター・エンジニアなど何でも屋。
COBOLからReactまで色んなことやります。