REST API

zipcloud API

無料の郵便番号検索 API zipcloud.ibsnet.co.jp を Nuxt の $fetch で呼び出す方法。 npm インストール不要ですが、ネットワーク接続が必要です。

7桁の数字を入力すると API を呼び出して自動入力します

自動入力エリア

実装コード
// npm インストール不要 — $fetch を使うだけ

interface ZipcloudResult {
  address1: string // 都道府県
  address2: string // 市区町村
  address3: string // 町域
}
interface ZipcloudResponse {
  status: number
  message: string | null
  results: ZipcloudResult[] | null
}

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

  // zipcloud は Content-Type: text/plain を返すので parseResponse が必要
  const data = await $fetch<ZipcloudResponse>(
    `https://zipcloud.ibsnet.co.jp/api/search?zipcode=${clean}`,
    { parseResponse: (txt) => JSON.parse(txt) }
  )

  if (!data.results?.length) return // 該当なし

  const r = data.results[0]
  form.pref    = r.address1 // 例: "東京都"
  form.city    = r.address2 // 例: "新宿区"
  form.address = r.address3 // 例: "新宿"
})
  • ✅ npm インストール不要
  • ✅ API レスポンスの型定義が明確
  • ⚠️ ネットワーク接続が必要
  • ⚠️ API のダウンタイムで動作しなくなる可能性あり