React.js でユーザーの位置情報を取得する方法: 実践ガイド

Web アプリケーションはますますパーソナライズされています。また、複数の理由で位置情報サービスを使用する Web アプリケーションが増加しています。プライバシー、セキュリティ、または特定のロケーションベースの機能のいずれかです。

ユーザーの位置を知ることで、パーソナライズされたコンテンツ、優れたセキュリティ、天気予報、より多くのローカリゼーション、より優れたユーザー エクスペリエンスなど、さまざまな機能を簡単に提供できます。開発者として、Web アプリケーションのユーザーの場所を取得する方法を知ることは非常に重要です。この記事では、 React.jsなどの最新の Web テクノロジを使用してユーザーの位置情報を取得する方法について、順を追って説明します。ユーザーの IP アドレスを取得するさまざまな方法と、ユーザーからより多くの地理位置情報データを取得する方法について説明します。それでは、始めましょう！

IPまたは地理位置情報とは何ですか?

まず、 IPまたはIPアドレスとは何かを理解しましょう.

すべての家に固有の番号またはアドレスがあるように、インターネットを使用する各デバイスには固有のアドレスがあります。デバイスのこの一意のアドレスはIP アドレスと呼ばれます。デバイスがインターネット経由で相互に通信するのに役立ちます。

ここで、 IP は「インターネット プロトコル」の略で、デバイスがインターネット経由で相互に通信するために使用する一連の規則です。それでは、 Geolocation について理解しましょう。

Geolocation は2 つの単語の組み合わせです。 1 つ目は地球を意味する「Geo」で、2 つ目は地球上のどこにあるかを意味する「 location」です。

そのため、 「IP-Geolocation」は、 IP アドレスに基づいてデバイスが物理的に配置されている場所を見つける方法です。 IP-Geolocationデータの精度は、データを取得するために使用される方法、データの品質、デバイスの種類など、さまざまな要因によって異なります。モバイル デバイスは頻繁にネットワークを変更するため、データの精度が低くなる可能性があります。それでは、React でユーザーの IP アドレスを取得する方法を見てみましょう。

ユーザーの位置を取得する

ユーザーの位置を取得する方法はいくつかあります。この記事では、すべてのブラウザーでサポートされているGeolocation APIを使用します。それを使用するために他のサード パーティ ライブラリをインストールする必要はありません。より多くのデータを取得するには、 Geocoding APIなどのサードパーティ サービスの API を使用できます。

まず、 viteを使用して React アプリを作成しましょう。 CMD またはターミナルを開き、プロジェクト フォルダーを見つけて、次のコマンドを使用します。

• npm create vite@latest your-app-name

上記のコマンドを実行すると、フレームワークのリストが表示されます。矢印キーを使用してリストからReact を選択し、Enter キーを押します。

• バリアントのリストが表示されるので、それらのバリアントからJavascriptを選択します。次に、アプリ名でフォルダーを作成し、必要なすべてのファイルを追加します。次のコマンドを使用して、必要なすべてのライブラリをインストールし、開発サーバーを実行します。

  
  

  • cd your-app-nameこのコマンドは、現在のディレクトリを app ディレクトリに変更します
  • npm installこのコマンドを使用して、必要なすべてのライブラリをインストールします
  • npm run devこのコマンドは、おそらく localhost:5173 で開発サーバーを起動します

  
  

これで開発用サーバーが起動して実行されたので、ユーザーの IP アドレスを取得しましょう。

Geolocation API を使用してユーザーの緯度と経度の情報を取得する

Geolocation API を使用すると、ユーザーは必要に応じて自分の場所を提供できます。このメソッドは、ユーザーが自分の位置情報へのアクセスを許可した場合にのみ機能します。許可しない場合、このブラウザー ベースの API は IP アドレスを取得できません。 Web アプリケーションの機能が本当にユーザーの位置情報を必要とする場合は、適切なテキスト メッセージでユーザーにプロンプトを表示し、位置情報が必要な理由を知らせることができます。

この Geolocation API は、Geolocation オブジェクトを返すことができるプロパティであるnavigator.geolocationへの呼び出しを介してアクセスされます。 navigatorとは何かを見てみましょう。

• navigator:ユーザーエージェント(ブラウザ)の状態とIDを表すインターフェースです。このナビゲーターをログに記録し、それが提供する他のプロパティを見てみましょう。

  
  

  App.jsxファイルを開き、return ステートメント内のすべてのコードを消去し、親divクラスAppに保持してから、次のコードに示すようにuseEffect内でconsole.log(navigator)を使用します。

  
  

 import { useEffect } from "react"; import "./App.css"; function App() { useEffect(() => { console.log(navigator); }, []); return <div className="App"></div>; } export default App;

開発サーバー タブで、F12 を押すか、マウスを右クリックしてコンソールを開きます。 appCodeName 、 Bluetooth 、 clipboard 、 geolocationなどのさまざまなプロパティのリストが表示されます。地理位置情報をログに記録しましょう。このconsole.log(navigator.geolocation)のようにログに地理位置情報を追加するだけです。現時点では地理位置情報にアクセスする権限がないため、コンソールには空のオブジェクトが表示されます。この権限を取得する方法を見てみましょう。次のコードと説明を確認してください。

 useEffect(() => { if (navigator.geolocation) { navigator.permissions .query({ name: "geolocation" }) .then(function (result) { console.log(result); }); } else { console.log("Geolocation is not supported by this browser."); } }, []);

上記のuseEffectでは、まずナビゲーターがあるかどうかを確認します。地理位置情報かどうか、真の場合は権限を確認します。

ここ、

• navigator.permissions:アクセス許可ステータスのクエリと更新に使用できる Permissions オブジェクトを返します。

• query:ユーザー権限の状態を返す Permission のメソッドです。名前と値のペアのカンマ区切りのリストを持つオブジェクトを取ります。ここでは、位置情報の許可のステータスを知りたいので、位置情報を渡しています。

  
  

  ここでは Promise を取得しているため、 thenキーワードを使用して結果をログに記録します。ブラウザのコンソールを確認すると、次のオブジェクトが表示されます。

   { name: "geolocation", onchange: null, state: "prompt" }

状態は 3 つの異なる値を持つことができます。

• 付与:つまり、位置情報にアクセスする権限があるため、地理位置情報を直接呼び出すことができます。
• prompt:ユーザーは許可を求めるポップアップを受け取ります。
• 拒否:ユーザーが現在地の共有を拒否したことを意味します。

「許可」および「プロンプト」状態では、ユーザーの現在の位置を取得する関数を作成できますが、「拒否」状態では、ブラウザーで位置情報の許可を有効にする方法を示すことができます。

注:ユーザーが場所の許可を既に拒否している場合、ユーザーがブラウザで手動で有効にしない限り、再度場所の許可を求める方法はありません。

次のように、3 つの許可状態すべてに 3 つの条件を使用しましょう。

 useEffect(() => { if (navigator.geolocation) { navigator.permissions .query({ name: "geolocation" }) .then(function (result) { console.log(result); if (result.state === "granted") { //If granted then you can directly call your function here } else if (result.state === "prompt") { //If prompt then the user will be asked to give permission } else if (result.state === "denied") { //If denied then you have to show instructions to enable location } }); } else { console.log("Geolocation is not supported by this browser."); } }, []);

prompt状態でgetCurrentPositionという関数を使いましょう。この関数は次の引数を取ります。

• success : 場所が正常に取得された場合に呼び出されるコールバック関数。
• error : ロケーションの取得中にエラーが発生した場合に呼び出されるコールバック関数。これはオプションです。
• options : オプションは maximumAge、timeout、enableHighAccuracy などのさまざまなパラメーターを取ります。これらのオプションの詳細については、 MDN のドキュメントを参照してください。これもオプションです。

3 つの引数すべてを実装しましょう。まず、成功関数を作成しましょう。 useEffectの前に、次の成功関数を追加します。

 function success(pos) { var crd = pos.coords; console.log("Your current position is:"); console.log(`Latitude : ${crd.latitude}`); console.log(`Longitude: ${crd.longitude}`); console.log(`More or less ${crd.accuracy} meters.`); }

このコールバック関数は、座標を意味するcoordsを持つ位置オブジェクトを返します。座標から緯度、経度、精度などの値を取得できます。ここで、成功関数の後に次のエラー関数を追加します。

 function errors(err) { console.warn(`ERROR(${err.code}): ${err.message}`); }

オプションオブジェクトも宣言しましょう。

 var options = { enableHighAccuracy: true, timeout: 5000, maximumAge: 0, };

次の行を「prompt」および「granted」条件に貼り付けて、ブラウザーで出力を確認します。

 navigator.geolocation.getCurrentPosition(success, errors, options)

ブラウザーに、位置情報の許可を求めるプロンプトが 1 つ表示されます。アクセス許可を与えると、コンソール タブに座標値が表示されます。これが完全なコードです。

 import { useEffect } from "react"; import "./App.css"; function App() { var options = { enableHighAccuracy: true, timeout: 5000, maximumAge: 0, }; function success(pos) { var crd = pos.coords; console.log("Your current position is:"); console.log(`Latitude : ${crd.latitude}`); console.log(`Longitude: ${crd.longitude}`); console.log(`More or less ${crd.accuracy} meters.`); } function errors(err) { console.warn(`ERROR(${err.code}): ${err.message}`); } useEffect(() => { if (navigator.geolocation) { navigator.permissions .query({ name: "geolocation" }) .then(function (result) { console.log(result); if (result.state === "granted") { //If granted then you can directly call your function here navigator.geolocation.getCurrentPosition(success, errors, options); } else if (result.state === "prompt") { //If prompt then the user will be asked to give permission navigator.geolocation.getCurrentPosition(success, errors, options); } else if (result.state === "denied") { //If denied then you have to show instructions to enable location } }); } else { console.log("Geolocation is not supported by this browser."); } }, []); return <div className="App"></div>; } export default App;

それでおしまい。これにより、任意のデバイスの緯度と経度の値を簡単に取得できます。この情報だけでは不十分なので、 opencage のリバース ジオコーディング APIを使用して、ユーザーの位置に関する詳細情報を取得しましょう。

逆ジオコーディングによる位置情報サービスの強化

ユーザーのデバイスに関する緯度と経度の情報は既に取得しています。次に、それを使用してその場所に関する詳細情報を取得する方法を見てみましょう。 opencageの API を使用して、場所に関する詳細情報を取得します。そのため、必ずサインアップして API キーを取得してください。 opencage は無料トライアルで 1 日あたり 2,500 件のリクエストを提供するため、料金を支払う必要はありません。価格設定の詳細については、Web サイトから確認できます。無料試用版があり、CORS の制限もない Opencage の API を使用しています。それでは、この API を使用する関数を作成しましょう。

 const [location, setLocation] = useState(); function getLocationInfo(latitude, longitude) { const url = `https://api.opencagedata.com/geocode/v1/json?q=${latitude},${longitude}&key=${APIkey}`; fetch(url) .then((response) => response.json()) .then((data) => { console.log(data); if (data.status.code === 200) { console.log("results:", data.results); setLocation(data.results[0].formatted); } else { console.log("Reverse geolocation request failed."); } }) .catch((error) => console.error(error)); }

このgetLocationInfo関数は緯度と経度を取得し、緯度、経度、および API キーを取得する opencage のドキュメントの URL を使用します。この関数では、fetch を使用して URL からデータを取得しました。ステータス コードが200の場合は、データをlocation状態に保存します。ブラウザでコンソールをチェックして、取得しているデータの種類を確認できます。ここでは、 formattedプロパティの値を使用しています。応答オブジェクトの詳細については、ドキュメントを確認してください。ここで、既に定義したsuccess関数からこの関数を呼び出しましょう。

 function success(pos) { var crd = pos.coords; ... ... getLocationInfo(crd.latitude, crd.longitude); }

これで、ユーザーが自分の場所を提供することに同意するたびに、 success関数が実行され、緯度と経度の情報がgetLocationInfo関数に渡されて実行されます。この場所の状態を使用して、Web アプリで場所を表示できます。

完全なコードは次のとおりです。

 import { useEffect, useState } from "react"; import "./App.css"; const APIkey = "Enter-your-api-key"; function App() { const [location, setLocation] = useState(); function getLocationInfo(latitude, longitude) { const url = `https://api.opencagedata.com/geocode/v1/json?q=${latitude},${longitude}&key=${APIkey}`; fetch(url) .then((response) => response.json()) .then((data) => { console.log(data); if (data.status.code === 200) { console.log("results:", data.results); setLocation(data.results[0].formatted); } else { console.log("Reverse geolocation request failed."); } }) .catch((error) => console.error(error)); } var options = { enableHighAccuracy: true, timeout: 5000, maximumAge: 0, }; function success(pos) { var crd = pos.coords; console.log("Your current position is:"); console.log(`Latitude : ${crd.latitude}`); console.log(`Longitude: ${crd.longitude}`); console.log(`More or less ${crd.accuracy} meters.`); getLocationInfo(crd.latitude, crd.longitude); } function errors(err) { console.warn(`ERROR(${err.code}): ${err.message}`); } useEffect(() => { if (navigator.geolocation) { navigator.permissions .query({ name: "geolocation" }) .then(function (result) { console.log(result); if (result.state === "granted") { //If granted then you can directly call your function here navigator.geolocation.getCurrentPosition(success, errors, options); } else if (result.state === "prompt") { //If prompt then the user will be asked to give permission navigator.geolocation.getCurrentPosition(success, errors, options); } else if (result.state === "denied") { //If denied then you have to show instructions to enable location } }); } else { console.log("Geolocation is not supported by this browser."); } }, []); return ( <div className="App"> {location ? <>Your location: {location}</> : null} </div> ); } export default App;

API または関数がデータを適切に取得できない場合にエラー メッセージを表示するエラー状態も実装できます。また、必要なエラー処理メソッドも関数に実装します。これにより、デバイスの位置に関する多くの情報を取得できます。次に、デバイスの IP アドレスを取得する方法を見てみましょう。

ユーザーの IP アドレスの取得

クライアント側でユーザーの IP アドレスを取得するには、単純なパブリック IP アドレス API であるipifyを使用します。次のコード ブロックに示すように、別のuseEffectを作成し、IP アドレスをフェッチする関数を作成します。

 const [ipAddress, setIpAddress] = useState(''); useEffect(() => { const fetchIp = async () => { try { const response = await fetch('https://api.ipify.org?format=json'); const data = await response.json(); setIpAddress(data.ip); } catch (error) { console.error(error); } }; fetchIp(); }, []);

上記のコードでは、IP アドレスを格納するためにipAddressという 1 つの状態を作成しました。 ipfyはパブリック API であるため、API キーは必要なく、URL を直接使用できます。 useEffectでは、 ipAddress状態で IP アドレスを取得して保存するfetchIpという 1 つの非同期関数を作成しました。 useEffectでfetchIp関数を呼び出すことを忘れないでください。

これにより、デバイスの IP アドレスを簡単に取得できます。このようなサービスを提供する API は複数あります。サーバー側では、通常、ユーザーが Web ページまたはデータを取得するために送信したリクエストから IP アドレスを取得できます。ただし、一部の ISP は共有 IP アドレスを使用しているため、IP アドレスだけに頼るべきではありません。つまり、複数のユーザーが同じ IP アドレスを持つ可能性があります。さらに、一部のユーザーは VPN やプロキシも使用しています。

ユーザーの位置データを収集して処理するためのベスト プラクティス

ユーザーのデータに関しては、どのアプリケーションにおいても常に重要な部分です。開発者としての私たちの仕事は、ユーザー中心でユーザーのデータを保護するアプリケーションを作成することです。デバイスの位置などのデータについては、開発者は次のような多くの問題に直面する可能性があります。

• IP または地理位置情報のデータはどの程度正確ですか?
• ユーザーが位置情報を使用することに同意しない場合はどうすればよいですか?
• データを安全に処理および保護する方法は?

ロケーションベースの機能を実装するのは難しい場合がありますが、ベスト プラクティスに従うことで、よりパーソナライズされた安全なエクスペリエンスをユーザーに提供できます。位置情報に基づくデータを扱う場合は、次の点に注意してください。

• 正確さ: IP アドレスを使用する場合は、複数の API を使用して再確認し、場所をクロスチェックする必要があります。位置情報ベースのサービスと機能にフォールバック メカニズムを含める必要があります。位置データは、デバイスの設定、ネットワーク接続などの要因の影響を受ける可能性があるため、データを確認することをお勧めします。

  
  

• プライバシー:複数の国のさまざまな法律をチェックする必要があるため、これはユーザーのデータを収集する際の主要な懸念事項です。開発者は常にユーザーのプライバシーを尊重する必要があります。ユーザーからデータを収集する際には、明確で簡潔なプライバシー ポリシーが必要です。機密情報を収集するときはいつでもユーザーに伝える必要があります。位置情報に基づく機能がある場合は、データを使用する理由と方法を明確に示す必要があります。また、ユーザーが自分のデータを共有したくない場合に簡単にオプトアウトできるように、オプトアウト オプションを提供する必要があります。

  
  

• セキュリティ:データのセキュリティのために、OAuth や JWT などの認証メカニズムを実装し、不正アクセスから API エンドポイントを保護できます。クライアントとサーバー間の安全な通信を確保するために、HTTPS および SSL 証明書を使用してデータを暗号化する必要があります。バックエンドでは、役割ベースのアクセス制御を実装して、管理者のみなど、選択したユーザーのみがデータにアクセスできるようにすることができます。依存関係を更新する前に、それが公式のソースからのものかどうかを常に確認する必要があります。

  
  

  結論

  位置データは、ユーザーのパーソナライズされたエクスペリエンスに関して重要な役割を果たしますが、このデータの処理も重要なタスクです。位置データを取得するために使用できるさまざまな方法がありますが、必要なデータの量によって異なりますが、IP アドレスだけが必要な場合はipify API を使用でき、さらに地理位置情報データが必要な場合はいずれかを使用できます。 opencageまたはGoogle のリバース ジオコーディング APIも同様です。天気アプリなどの小さなアプリケーションを構築している場合は、ブラウザーの地理位置情報 API を使用できるため、API を使用する必要はありません。これらのデータのセキュリティとプライバシーに関しては、適切に作成されたプライバシー ポリシーを提供することにより、ユーザーのプライバシーに関連する潜在的なリスクを回避する必要があります。これでこの記事は終わりです。

  
  

  • DevDreamningという私の Web サイトをチェックしてください。
  • 私のユーチューブチャンネル👇😉