JavaScript でクライアントの IP アドレスを取得する

Kirill Ibrahim 2023年12月11日
  1. JavaScript でクライアントの IP アドレスを取得するには Ipify アプリケーションを使用する
  2. Ipinfo アプリケーションを使って JavaScript でクライアントの IP アドレスを取得する
  3. JavaScript でクライアントの IP アドレスを取得するには Abstract アプリケーションを使用する
JavaScript でクライアントの IP アドレスを取得する

IP アドレスは、ネットワークハードウェアに固有のアドレスを与える数字の組み合わせです。それはあなたのコンピュータをネットワーク内の他のデバイス、ウェブ、そして世界中に接続します。

JavaScript は、サードパーティのアプリケーションを使用してクライアントに属するパブリック IP アドレスを取得します。サードパーティのアプリケーションは、ユーザーの IP アドレスを取得し、プレーンテキスト、JSON、JSONP 形式の 3つの形式で返します。このようなアプリケーションはインターネット上に数十種類存在します。

この記事では、JavaScript で IP アドレスを取得する最もポピュラーな 3つのツール、ipifyipinfoAbstract を紹介します。

JavaScript でクライアントの IP アドレスを取得するには Ipify アプリケーションを使用する

ipify はオープンソースのアプリケーションです。コードは GitHub リポジトリで入手できます。1 分間に何百万ものリクエストをしていても制限はありません。

例:

Axios(ブラウザと node.js 用の HTTP クライアント)をインストールするか、それ用の CDN を入れてください。

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
async function getIpClient() {
  try {
    const response = await axios.get('https://api.ipify.org?format=json');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

getIpClient();
</script>

出力:

data: {ip: "198.16.76.28"}

Ipinfo アプリケーションを使って JavaScript でクライアントの IP アドレスを取得する

Ipinfo アプリケーションには利用制限があります。1 日 1,000 リクエストを無料で行うことができ、無料プランに登録すると月に 50,000 リクエストを無料で受けることができます。

async function getIpClient() {
  try {
    const response = await axios.get('https://ipinfo.io/json');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

getIpClient();

出力:

{
city: "Amsterdam"
country: "NL"
ip: "198.16.76.28"
loc: "52.3740,4.8897"
org: "AS174 Cogent Communications"
postal: "1012"
readme: "https://ipinfo.io/missingauth"
region: "North Holland"
timezone: "Europe/Amsterdam"
}

JavaScript でクライアントの IP アドレスを取得するには Abstract アプリケーションを使用する

また、Abstract アプリケーションには月間 20,000 リクエストの制限があります。また、無料プランでも API キーを取得するには登録が必要です。

例:

async function getIpClient() {
  try {
    const response = await axios.get(
        'https://ipgeolocation.abstractapi.com/v1/?api_key=<your_api_key>');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

getIpClient();

上記の関数の出力をプレビューするには、Abstract のサイトを参照してください。