JavaScript | Web API：位置情報・センサー － 現在地取得

JavaScript JavaScript
スポンサーリンク

「現在地取得」は“ブラウザに今いる場所を一回だけ教えてもらう”こと

「現在地取得」と聞いたら、まずイメージしてほしいのはこれです。

ブラウザに「今どこにいる？」と一度だけ質問して、
緯度・経度などの位置情報を返してもらう処理

JavaScript では、これを Geolocation API の getCurrentPosition で行います。
スマホなら GPS や Wi‑Fi、PC なら Wi‑Fi や IP などを使って、ブラウザが「だいたいこの辺」と計算してくれます。

ここで大事なのは次の 2 つです。

  • ユーザーの許可が必須（勝手に位置は取れない）
  • 基本的に HTTPS でないと動かない

この前提を頭に置いたうえで、コードを見ていきましょう。

基本の API getCurrentPosition を押さえる

形だけ先に見る

getCurrentPosition のシグネチャはこうです。

navigator.geolocation.getCurrentPosition(
  successCallback,
  errorCallback,
  options
);
JavaScript
  • successCallback: 位置取得に成功したときに呼ばれる関数
  • errorCallback: 失敗したときに呼ばれる関数
  • options: 精度やタイムアウトなどの設定（省略可）

初心者のうちは、まず「成功コールバック」と「エラーコールバック」の 2 つをしっかり意識できれば十分です。

最小の「現在地を表示する」例から始める

HTML と JavaScript の全体像

HTML:

<button id="getLocationBtn">現在地を取得</button>
<pre id="result">ボタンを押すと現在地を表示します</pre>

JavaScript:

const btn = document.querySelector("#getLocationBtn");
const result = document.querySelector("#result");

btn.addEventListener("click", () => {
  if (!("geolocation" in navigator)) {
    result.textContent = "このブラウザは位置情報に対応していません";
    return;
  }

  result.textContent = "位置情報を取得中…";

  navigator.geolocation.getCurrentPosition(
    (position) => {
      const coords = position.coords;
      result.textContent =
        `緯度: ${coords.latitude}\n` +
        `経度: ${coords.longitude}\n` +
        `精度: 約 ${coords.accuracy} m`;
    },
    (error) => {
      result.textContent = "位置情報の取得に失敗しました: " + error.message;
    }
  );
});
JavaScript

このコードで「現在地取得」の流れは一通り体験できます。
ここから、重要な部分を少しずつ深掘りします。

成功時コールバックで何がもらえるかを理解する

position と coords の中身

成功時コールバックには position オブジェクトが渡されます。

(position) => {
  const coords = position.coords;
  console.log(coords.latitude, coords.longitude, coords.accuracy);
}
JavaScript

coords の主なプロパティは次の通りです。

  • latitude: 緯度（−90〜90）
  • longitude: 経度（−180〜180）
  • accuracy: 精度（メートル単位の誤差）

他にも高度や速度などがありますが、まずはこの 3 つを押さえれば十分です。

ここで特に大事なのは accuracy です。
「誤差が 5m なのか 500m なのか」で、アプリの使い方が変わります。

例えば、店舗検索なら誤差 500m でも許容できるかもしれませんが、
ナビアプリなら誤差 500m は致命的です。

「位置情報は完璧じゃない。精度を見て判断する」という感覚を持っておくと、設計が一段レベルアップします。

エラー処理をちゃんと書くのが“現在地取得”のキモ

なぜエラーを真面目に扱う必要があるのか

位置情報は、失敗する可能性が高い機能です。

  • ユーザーが「許可しない」を選ぶ
  • 電波が悪くて位置が取れない
  • 屋内で GPS が入らない
  • タイムアウトする

これらは「レアケース」ではなく「普通に起こるケース」です。
だからこそ、エラーをちゃんと分けて扱うのが大事です。

エラーコードごとにメッセージを変える例

navigator.geolocation.getCurrentPosition(
  (position) => {
    const c = position.coords;
    result.textContent =
      `緯度: ${c.latitude}\n` +
      `経度: ${c.longitude}\n` +
      `精度: 約 ${c.accuracy} m`;
  },
  (error) => {
    switch (error.code) {
      case error.PERMISSION_DENIED:
        result.textContent = "ユーザーが位置情報の取得を拒否しました";
        break;
      case error.POSITION_UNAVAILABLE:
        result.textContent = "位置情報を取得できませんでした（電波状況など）";
        break;
      case error.TIMEOUT:
        result.textContent = "位置情報の取得がタイムアウトしました";
        break;
      default:
        result.textContent = "不明なエラーが発生しました";
    }
  },
  {
    enableHighAccuracy: true,
    timeout: 5000,
    maximumAge: 0
  }
);
JavaScript

ここでのポイントは、ユーザー拒否と技術的な失敗を分けていることです。

  • 拒否された場合 → 「設定から許可を変更してください」と案内できる
  • 取得不能・タイムアウト → 「電波状況を確認してください」などのメッセージにできる

「全部まとめて『失敗しました』」ではなく、
なぜダメだったのかをユーザーに伝える のが、良い UX につながります。

options で「どうやって現在地を取るか」を調整する

enableHighAccuracy: 精度を優先するか、軽さを優先するか

enableHighAccuracy は、「できるだけ正確な位置が欲しいかどうか」を伝えるフラグです。

{
  enableHighAccuracy: true,  // 高精度を要求
  timeout: 5000,
  maximumAge: 0
}
JavaScript

true にすると、GPS などをフル活用して高精度を目指しますが、

  • 取得に時間がかかる
  • バッテリー消費が増える

というデメリットもあります。

ざっくりした使い分けのイメージはこうです。

  • ナビ・ランニングログ → true（数メートル単位の精度が欲しい）
  • 近くの店舗検索 → false でも十分（数百メートルの誤差は許容）

「とりあえず全部 true」ではなく、
アプリの用途に合わせて選ぶのがプロっぽいです。

timeout: いつまで待つかを決める

timeout は「最大何ミリ秒待つか」です。
指定しないと、ほぼ無限に待ち続けることになります。

{
  enableHighAccuracy: true,
  timeout: 5000,      // 最大 5 秒待つ
  maximumAge: 0
}
JavaScript

電波が悪い場所では、位置取得にかなり時間がかかることがあります。
「5 秒待ってダメなら諦めてエラーにする」と決めておくと、
ユーザーがいつまでも「取得中…」で待たされることを防げます。

maximumAge: 古い位置情報をどこまで許すか

maximumAge は「どれくらい古い位置情報まで再利用してよいか」です。

  • 0: 毎回必ず最新を取りに行く
  • 10000: 10 秒以内のキャッシュがあればそれを使う

現在地取得では、まずは 0 で「常に最新」を使うのが分かりやすいです。
バッテリーや速度を気にするようになってきたら、
用途に応じて値を変える、というステップで十分です。

UX とセキュリティのポイントを先に知っておく

HTTPS でないと現在地取得は基本的に動かない

Geolocation API は「安全なコンテキスト」でしか動きません。
つまり、基本的に https:// で提供されているページでのみ有効です。

開発中は http://localhost だけ特別に許されていますが、

  • file:// で直接開く
  • http://example.com のような非 HTTPS

だと、navigator.geolocation が使えなかったり、エラーになったりします。

「現在地取得が動かない」ときは、
まず「HTTPS かどうか」を疑う癖をつけておくと、原因切り分けが早くなります。

ユーザーの許可は“当たり前に拒否される”ものとして扱う

位置情報はプライバシーど真ん中なので、
ユーザーが「許可しない」を選ぶのはごく自然です。

だからこそ、

  • 許可ダイアログが出る前に「これから位置情報を使います」と説明する
  • 拒否されたときのメッセージをちゃんと用意しておく
  • 位置情報がなくても最低限使える UI を考えておく

といった設計が大事になります。

「許可される前提」で作ると、現実のユーザーとは噛み合わなくなります。
拒否されるのが普通 くらいの気持ちで設計すると、だいぶ強くなれます。

練習としてやってみてほしい「現在地取得」2 ステップ

ステップ 1: 一回だけ現在地を取得して表示する

目標は、次のような動きです。

  • ボタンを押すと「取得中…」と表示
  • 成功したら緯度・経度・精度を表示
  • 失敗したら理由に応じたメッセージを表示

ここまでできれば、getCurrentPosition の基本はほぼマスターです。

ステップ 2: 取得オプションを変えて挙動の違いを体感する

同じコードで、options を変えてみてください。

  • enableHighAccuracy: false にしてみる
  • timeout を 2000 にしてみる
  • maximumAge を 10000 にしてみる

実際の端末で試すと、

  • 精度が変わる
  • 取得にかかる時間が変わる
  • すぐ結果が返ってくることがある

など、体感として違いが分かります。

コードを読むだけでなく、
「今、ブラウザが裏で何を頑張っているのか」 を想像しながら触ると、
位置情報 API の理解が一気に深くなります。

「現在地取得」は、
あなたの Web アプリと現実世界をつなぐ、かなり強い一手です。

一度この感覚を掴んでおくと、

  • 近くのお店を出す
  • 友達と位置を共有する
  • ランニングコースを記録する

みたいなアイデアが、全部「自分で作れそうなもの」に変わっていきます。
そこまで連れていくための土台が、今回の getCurrentPosition です。

スポンサーリンク
タイトルとURLをコピーしました