REST API
zipcloud API
無料の郵便番号検索 API zipcloud.ibsnet.co.jp を Nuxt の $fetch で呼び出す方法。 npm インストール不要ですが、ネットワーク接続が必要です。
実装コード
// 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 のダウンタイムで動作しなくなる可能性あり