JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

【JavaScript入門】クライアントのIPアドレスを取得する方法とサンプルコード

Webアプリケーションを開発していると、サイト訪問者のパブリックIPアドレスを取得したい場面があります。しかし、JavaScriptにはブラウザから直接IPアドレスを取得する標準APIが用意されていないため、外部のIP検索サービスを利用するのが一般的です。

実装の仕組み

本記事では、ipinfo.ioが提供するJSONP形式のAPIを使用して、クライアントのIPアドレスを取得する方法を紹介します。JSONPを利用することで、同一生成元ポリシー（クロスオリジン制約）を回避しながら、別ドメイン上のデータを受け取ることができます。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>クライアントのIPアドレスを取得</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-weight: 500;
        font-size: 18px;
        color: blueviolet;
    }
</style>
</head>
<body>
<h1>クライアントのIPアドレスを取得する</h1>
<div class="result"></div>
<script type="application/javascript">
    let resEle = document.querySelector(".result");
    function showIP(json) {
        resEle.innerHTML = "あなたのパブリックIPアドレスは: " + json.ip;
    }
</script>
<script type="application/javascript" src="https://ipinfo.io/?format=jsonp&callback=showIP"></script>
</body>
</html>

コードの解説

  • document.querySelector(".result")で、結果を表示するための要素を取得しています。
  • showIP(json)関数は、APIから返されたJSONオブジェクトを受け取り、その中のipプロパティの値を画面に出力します。
  • 最後の<script>タグでipinfo.ioのエンドポイントを読み込むと、URLに含まれるcallback=showIPパラメータにより、取得したデータが引数としてshowIP関数へ渡され、自動的に実行されます。

出力結果

【JavaScript入門】クライアントのIPアドレスを取得する方法とサンプルコード

このHTMLファイルをブラウザで開くと、画面に「あなたのパブリックIPアドレスは: xxx.xxx.xxx.xxx」という形式で、アクセス元のIPアドレスが表示されます。

注意点

  • 取得できるのはパブリックIPアドレスのみであり、ローカルネットワーク内のプライベートIPアドレスは取得できません。
  • 本番環境では、通信の安全性を確保するためにHTTPS対応のAPIエンドポイントを使用することを推奨します。
  • 外部APIに依存するため、サービスの利用規約やレート制限についても事前に確認しておきましょう。
  1. JavaScriptでDOMを更新する方法！ボタンクリックで要素を動的に追加するサンプルコード

    JavaScriptでは、createElement()やcreateTextNode()、appendChild()といったメソッドを組み合わせることで、ページを再読み込みすることなく新しい要素を動的に生成し、DOM（Document Object Model）を更新できます。以下は、ボタンのクリックをきっかけに新しい見出し要素を追加するシンプルなサンプルコードです。 サンプルコード <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /&

  2. JavaScriptで24時間表記を12時間表記(午前・午後)に変換する方法

    JavaScriptで24時間表記を12時間表記(午前・午後)に変換する方法 Webアプリケーションを開発していると、24時間表記の時刻を「午前・午後」が付いた12時間表記に変換して表示したい場面があります。この記事では、JavaScriptとHTMLを組み合わせて、ユーザーが入力した時刻を12時間表記に変換し、その結果を画面に表示するシンプルなプログラムを紹介します。 コード例 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" />