JavaScript でクライアントの IP アドレスを取得する
Kirill Ibrahim
2023年12月11日
JavaScript
-
JavaScript でクライアントの IP アドレスを取得するには
Ipifyアプリケーションを使用する -
Ipinfoアプリケーションを使って JavaScript でクライアントの IP アドレスを取得する -
JavaScript でクライアントの IP アドレスを取得するには
Abstractアプリケーションを使用する
IP アドレスは、ネットワークハードウェアに固有のアドレスを与える数字の組み合わせです。それはあなたのコンピュータをネットワーク内の他のデバイス、ウェブ、そして世界中に接続します。
JavaScript は、サードパーティのアプリケーションを使用してクライアントに属するパブリック IP アドレスを取得します。サードパーティのアプリケーションは、ユーザーの IP アドレスを取得し、プレーンテキスト、JSON、JSONP 形式の 3つの形式で返します。このようなアプリケーションはインターネット上に数十種類存在します。
この記事では、JavaScript で IP アドレスを取得する最もポピュラーな 3つのツール、ipify、ipinfo、Abstract を紹介します。
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 のサイトを参照してください。
チュートリアルを楽しんでいますか？ <a href="https://www.youtube.com/@delftstack/?sub_confirmation=1" style="color: #a94442; font-weight: bold; text-decoration: underline;">DelftStackをチャンネル登録</a> して、高品質な動画ガイドをさらに制作するためのサポートをお願いします。 Subscribe