ブラウザの互換性もバッチリ！JavaScriptでIPアドレスを取得する3つの方法

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

window.location.hostname を使う

const ipAddress = window.location.hostname;

この方法はシンプルでコードも短く済みますが、ホスト名しか取得できないため、IPアドレスを特定するには不十分な場合があります。

メリット:

• コードが短い
• 実装が簡単

• IPアドレスを特定できない場合がある

RTCPeerConnection を使う

const getIpAddress = async () => {
  const connection = new RTCPeerConnection();
  const iceCandidate = await connection.createIceCandidate();
  const ipAddress = iceCandidate.candidate.split(':')[0];
  connection.close();
  return ipAddress;
};

この方法は、WebRTC APIを利用して、より正確なIPアドレスを取得することができます。ただし、ブラウザの互換性やネットワーク環境によってはうまく動作しない場合があります。

• より正確なIPアドレスを取得できる

• ブラウザの互換性がない場合がある
• ネットワーク環境によってはうまく動作しない

第三者のサービスを使う

const getIpAddress = async () => {
  const response = await fetch('https://api.ipify.org?format=json');
  const data = await response.json();
  return data.ip;
};

この方法は、IPアドレス情報提供サービスを利用して、簡単にIPアドレスを取得することができます。ただし、サービスの利用規約やセキュリティ面に注意する必要があります。

• 簡単
• 確実

• サービスの利用規約やセキュリティ面に注意が必要

上記の方法のいずれかを選択して、クライアントのIPアドレスを取得することができます。どの方法を選択するかは、目的に応じて検討してください。

const getIpAddress = async () => {
  const connection = new RTCPeerConnection();
  const iceCandidate = await connection.createIceCandidate();
  const ipAddress = iceCandidate.candidate.split(':')[0];
  connection.close();
  return ipAddress;
};

const button = document.getElementById('get-ip-address');
button.addEventListener('click', async () => {
  const ipAddress = await getIpAddress();
  const resultElement = document.getElementById('ip-address');
  resultElement.textContent = ipAddress;
});

このコードをHTMLファイルに埋め込んで実行すると、ボタンをクリックした時にクライアントのIPアドレスが表示されます。

注意:

• このコードは、ブラウザの互換性やネットワーク環境によってはうまく動作しない場合があります。
• IPアドレスは個人情報に該当するため、取得したIPアドレスを適切に扱ってください。

• window.location.hostname を使ってIPアドレスを取得する場合は、以下のコードを使用できます。

const ipAddress = window.location.hostname;

• 第三者のサービスを使ってIPアドレスを取得する場合は、以下のコードを使用できます。

const getIpAddress = async () => {
  const response = await fetch('https://api.ipify.org?format=json');
  const data = await response.json();
  return data.ip;
};

クライアントのIPアドレスを取得するその他の方法

Web API

• navigator.geolocation API

• 比較的簡単に実装できる

このAPIは、リアルタイム通信のために使用できます。IPアドレスも通信情報の一部として取得できます。

サーバサイド処理

クライアントからIPアドレスを取得する処理をサーバ側で実行する方法です。

• セキュリティ対策がしやすい

• サーバ側の処理が必要になる
• クライアント側のコードを変更する必要がない

第三者サービス

IPアドレス情報提供サービスを利用する方法です。