npm パッケージ

yubinbango-core

TypeScript フレンドリーな npm パッケージ。住所データを JSONP で yubinbango.github.io から取得し、 セッション内にキャッシュします。watch で zip の変化を検知し、7桁になったタイミングでコールバックを呼び出します。

〒

7桁の数字を入力すると自動入力します

自動入力エリア

実装コード 
// npm install yubinbango-core
import YubinBango from 'yubinbango-core'

const form = reactive({ zip: '', pref: '', city: '', address: '' })

watch(() => form.zip, (val) => {
  const clean = val.replace(/-/g, '')
  if (!/^\d{7}$/.test(clean)) return

  new YubinBango.Core(clean, (addr) => {
    form.pref    = addr.region   // 例: "東京都"
    form.city    = addr.locality // 例: "新宿区"
    form.address = addr.street   // 例: "新宿"
  })
})
  • ✅ JSONP でデータ取得・セッション内キャッシュ（同郵便番号は再リクエストなし）
  • ✅ TypeScript 型定義あり
  • ✅ Vue のリアクティビティと完全に互換
  • ✅ Pinia store からでも同じ書き方で呼べる