【jQuery不要】郵便番号から住所を自動入力！JavaScriptだけで簡単に実装する方法

2月 14, 2025 2月 14, 2025

こた

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。

「郵便番号を入力すると、住所が自動で入力されるフォームを作りたい！」と思ったことはありませんか？

ECサイトや会員登録フォームでよく見かけるこの機能、実は JavaScriptだけで簡単に実装できます。

今回の記事では、「ZipCloud API」を使って郵便番号から住所を取得する方法を詳しく解説します。

jQueryは使わずに、JavaScript（Vanilla JS）のみで実装するので、余計なライブラリを導入せずに済みます！

実際のコード

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

郵便番号から住所を取得する仕組み

住所の自動入力を実現するには、郵便番号を元に住所情報を取得するAPIを利用します。
今回は「ZipCloud API」を使用します。
このAPIを使うと、郵便番号から都道府県・市区町村・町名を取得できます。

ZipCloud APIの基本的なエンドポイントは以下のとおりです。

https://zipcloud.ibsnet.co.jp/api/search?zipcode=郵便番号

例えば、「100-0001」を検索する場合、以下のURLにアクセスするとJSONデータが返ってきます。

https://zipcloud.ibsnet.co.jp/api/search?zipcode=1000001

このデータをJavaScriptで取得し、フォームに自動入力する仕組みを作ります。

HTMLのフォームを作成

まずは、郵便番号と住所を入力するフォームを作成します。

  郵便番号（7桁）  都道府県  市区町村  町名

ポイント

maxlength="7" で7桁の郵便番号のみ入力できるように制限
placeholder="例: 1000001" でユーザーが入力しやすいようにガイド
次に、このフォームに住所を自動入力するJavaScriptを追加します。

JavaScriptで郵便番号から住所を取得

以下のコードを追加すると、郵便番号を入力したときに住所が自動で入力されます。

 document.getElementById("zipcode").addEventListener("input", function () { const zipcode = this.value.replace(/[^0-9]/g, ""); // 数字以外を削除 if (zipcode.length === 7) { fetch(`https://zipcloud.ibsnet.co.jp/api/search?zipcode=${zipcode}`) .then(response => response.json()) .then(data => { if (data.results) { document.getElementById("prefecture").value = data.results[0].address1; // 都道府県 document.getElementById("city").value = data.results[0].address2; // 市区町村 document.getElementById("town").value = data.results[0].address3; // 町名 } else { alert("該当する住所が見つかりませんでした"); } }) .catch(error => console.error("エラー:", error)); } });