位置情報機能の実装
スマートフォンのGPS機能を活用することで、ユーザーの現在地に基づいたサービスを提供できます。Expoでは、expo-location モジュールを使用して位置情報機能を実装できます。ここでは、位置情報のパーミッションを取得する必要があります。
expo-locationの基本
まずは、expo-location モジュールをインストールします（リスト4）。
$ npx expo install expo-location
位置情報のパーミッションを取得し、現在位置を表示する基本的な機能を実装します（リスト5）。
import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, Alert } from 'react-native';
import * as Location from 'expo-location';
export default function App() {
// (1) 位置情報関連のstate
const [locationPermission, setLocationPermission] = useState(null);
const [location, setLocation] = useState(null);
const [errorMsg, setErrorMsg] = useState(null);
// (2) パーミッション要求と位置情報取得
useEffect(() => {
(async () => {
const { status } = await Location.requestForegroundPermissionsAsync();
setLocationPermission(status === 'granted');
if (status !== 'granted') {
setErrorMsg('位置情報へのアクセスが拒否されました');
Alert.alert(
'位置情報へのアクセスが必要です',
'このアプリは現在地を表示するために位置情報へのアクセスが必要です。設定からパーミッションを変更してください。',
[{ text: 'OK' }]
);
return;
}
try {
// (3) 現在位置を取得
const currentLocation = await Location.getCurrentPositionAsync({
accuracy: Location.Accuracy.Balanced,
});
setLocation(currentLocation);
} catch (error) {
setErrorMsg('位置情報の取得に失敗しました');
console.error(error);
}
})();
}, []);
// (4) 表示内容の決定
let text = '位置情報を取得中...';
if (errorMsg) {
text = errorMsg;
} else if (location) {
text = `緯度: ${location.coords.latitude}\n経度: ${location.coords.longitude}`;
}
// View部分は省略
}
（1）では、位置情報関連のstateを定義しています。（2）では、パーミッション要求と位置情報取得の処理を行います。
（3）では、Location.getCurrentPositionAsync() メソッドを使用して現在位置を取得します。（4）では、表示するテキストを決定しています。図3は実際に動かしてみた様子です。
location.coords には、緯度や経度の情報だけではなく、計測精度や高度などの情報も含まれています。取得できる情報については、公式ドキュメントを参照してみてください。
位置情報の監視機能
位置情報の監視（リアルタイム更新）機能の核となる部分は以下のようになります（リスト6）。
// 位置情報の監視を開始する関数
const startLocationWatch = async () => {
if (!locationPermission) return;
try {
// (1) 位置情報の監視を開始
const subscription = await Location.watchPositionAsync(
{
accuracy: Location.Accuracy.Balanced,
timeInterval: 5000, // 5秒ごとに更新
distanceInterval: 10, // (3) 10メートル移動するごとに更新
},
(newLocation) => {
setLocation(newLocation);
console.log('位置情報が更新されました:', newLocation);
}
);
setLocationSubscription(subscription);
} catch (error) {
console.error('位置情報の監視に失敗しました:', error);
}
};
// 監視を停止する関数
const stopLocationWatch = () => {
if (locationSubscription) {
locationSubscription.remove(); // (2) 監視を停止
setLocationSubscription(null);
}
};
（1）のように Location.watchPositionAsync()メソッドを使用することで位置情報の監視を開始し、ユーザーが移動するたびに位置情報が更新されます。監視を停止するには、（2）のようにサブスクリプションのremove()メソッドを呼び出します。
図4は、位置情報の監視機能が実際に動作している様子です。
リスト6の（3）のように distanceInterval を指定することでコールバックを実行する制御しているので、手元で試す場合は、実際に移動して確認してみてください。
まとめ
今回はExpoを通じてパーミッションが必要なプラットフォーム機能を利用する方法を解説しました。ユーザーの許可を取ることで、よりユーザーが持つコンテキストに応じたアプリを開発できるようになります。こういった機能も適切に扱うことで、よいユーザー体験を提供できるでしょう。
今回までは、1画面の中でもできることを中心に解説しました。実際のアプリでは、画面を切り替えながら開発を進めていくことになります。次回からは何回かに分けて、画面を切り替えながら開発を進めていく方法を解説します。お楽しみに。
