ReactでGeolocation APIを使って現在位置の緯度を表してみた

概要

APIを使って何かしたいと思い、簡単なものから実装したいということで本文の通り、Geolocatin APIを使って現在の緯度を表してみました。
Geolocatin APIはブラウザに組み込まれているので使いやすかったのも良いと思いました。

Reactの雛形

まずはReactの雛形から作っていきます。
create-react-appで作っていきます。

index.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class App extends Component {
  render() {
    return <div>Latitude: </div>;
  }
}

ReactDOM.render(
  <App />,
  document.querySelector('#root')
);

上記のLatitude:　の所に現在の緯度を表そうと思います。

stateのイメージ

stateのイメージとしては初期値はnullでGeolocation APIで取得した緯度をsetStateでstateに保存するイメージです。

index.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class App extends Component {
  state = { lat: null };

  render() {
    // ここにGeolocation APIで緯度を取得してsetStateする処理を書く

    return <div>Latitude:{this.state.lat}</div>;
  }
}

ReactDOM.render(
  <App />,
  document.querySelector('#root')
);

Geolocation APIから緯度を取得する

緯度の取得方法ですが公式によると

Geolocation API は navigator.geolocation オブジェクトを通じて提供されます。

そうです。

さらにgetCurrentPosition()メソッドで現在位置を取得できるそうです。
このgetCurrentPosition()では２つの引数を取り、１つ目にpositionオブジェクトを入力引数として受け取れるコールバック関数、２つ目にerrを入力引数として受け取れるコールバック関数を取ります。
実際にコードをみていきましょう。

navigator.geolocation.getCurrentPosition(
  pos => console.log(pos),
  err => console.log(err)
);

上記のコードでエラーが出なければpositionオブジェクトがコンソールに表示されます。
それを見ると緯度の表示がposition.coords.latitudeにあると思うのでそれをsetStateしてあげて表示まで行きます。

index.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class App extends Component {
  state = { lat: null };

  render() {

    navigator.geolocation.getCurrentPosition(
      pos => this.setState({ lat: pos.coords.latitude }),
      err => console.log(err)
    );

    return <div>Latitude:{this.state.lat}</div>;
  }
}

ReactDOM.render(
  <App />,
  document.querySelector('#root')
);

以上で表示されたはずです。

感想

今回はとりあえず何かしらAPIを使うのが目標でした。
今後はいろんなAPIも触って行き、Reactも楽しんでいければと思います。