Jpostcode - 郵便番号から住所を自動入力する JavaScript ライブラリ

フォーム住所自動入力デモ

郵便番号欄に 7 桁入れると、住所が自動で埋まります。試してみてください。

郵便番号（7桁）

都道府県

市区町村

町域

郵便番号を 7 桁入力すると自動で住所が入ります。

詳細検索デモ

カナ表記・都道府県コードなど、すべてのフィールドを確認できます。1 つの郵便番号に複数住所が紐づく場合は全件表示します。

特徴

毎月自動更新

日本郵便の最新データを月次で取り込み、新バージョンを自動公開。バージョン番号 MAJOR.MINOR.YYYYMM で取得時期が一目でわかります。

公式 CDN あり

ライブラリ本体と郵便番号データを Cloudflare Pages から配信。npm を使わずコピペで導入できます。

API サーバー不要

サーバーサイドの実装やプロキシは不要。ブラウザだけで完結します。

TypeScript 対応

Node / ESM / ブラウザのすべてで使用可能。完全な型定義付き。

使い方

ブラウザで使う（CDN）

<script src="https://jpostcode-js.pages.dev/dist/jpostcode-web.js"></script>
<script>
  Jpostcode.setBaseUrl('https://jpostcode-js.pages.dev/data/json/');

  Jpostcode.find('1000001').then(addresses => {
    console.log(addresses[0]?.prefecture); // 東京都
  });
</script>

フォームで住所を自動入力する

<input id="zip" placeholder="郵便番号">
<input id="prefecture">
<input id="city">
<input id="town">

<script src="https://jpostcode-js.pages.dev/dist/jpostcode-web.js"></script>
<script>
  Jpostcode.setBaseUrl('https://jpostcode-js.pages.dev/data/json/');

  document.getElementById('zip').addEventListener('input', async (e) => {
    const zip = e.target.value.replace(/[^0-9]/g, '');
    if (zip.length !== 7) return;

    const [address] = await Jpostcode.find(zip);
    if (!address) return;

    document.getElementById('prefecture').value = address.prefecture;
    document.getElementById('city').value = address.city;
    document.getElementById('town').value = address.town;
  });
</script>

npm でインストール

npm install jpostcode

Node.js / TypeScript

import { Address, Jpostcode } from 'jpostcode';

const addresses: Address[] = Jpostcode.find('1000001');
console.log(addresses[0]?.prefecture); // 東京都

詳しい使い方は GitHub の README を参照してください。