Next.jsで郵便番号から住所を自動入力する方法

// src/lib/postal-code.ts
 
/** 入力された郵便番号を7桁の半角数字に整える。整えられなければ null。 */
export function toPostalCode7(input: string): string | null {
  const normalized = input
    .normalize('NFKC') // 全角数字・全角ハイフンを半角へ
    .replace(/[〒\s]/g, '')
    .replace(/[-‐‑‒–—―ー]/g, '')
 
  return /^\d{7}$/.test(normalized) ? normalized : null
}

// src/app/api/postal-code/route.ts
import { NextResponse } from 'next/server'
 
import { toPostalCode7 } from '@/lib/postal-code'
 
type ZipcloudResult = {
  zipcode: string
  address1: string // 都道府県
  address2: string // 市区町村
  address3: string // 町域
}
 
type ZipcloudResponse = {
  status: number
  message: string | null
  results: ZipcloudResult[] | null
}
 
export async function GET(request: Request) {
  const raw = new URL(request.url).searchParams.get('zipcode') ?? ''
  const zipcode = toPostalCode7(raw)
 
  if (!zipcode) {
    return NextResponse.json(
      { error: 'invalid_zipcode', message: '郵便番号は7桁で入力してください。' },
      { status: 400 },
    )
  }
 
  // 外部APIが応答しないときにリクエストを溜めないよう、必ず打ち切る。
  const controller = new AbortController()
  const timeout = setTimeout(() => controller.abort(), 5000)
 
  try {
    const response = await fetch(
      `https://zipcloud.ibsnet.co.jp/api/search?zipcode=${zipcode}`,
      { signal: controller.signal, cache: 'no-store' },
    )
 
    if (response.status === 429) {
      return NextResponse.json(
        { error: 'rate_limited', message: '時間をおいて再度お試しください。' },
        { status: 429 },
      )
    }
 
    if (!response.ok) {
      return NextResponse.json(
        { error: 'upstream_error', message: '住所を取得できませんでした。' },
        { status: 502 },
      )
    }
 
    const data = (await response.json()) as ZipcloudResponse
 
    // status が 200 でも results が null（該当なし）のことがある。
    if (data.status !== 200 || !data.results || data.results.length === 0) {
      return NextResponse.json({ candidates: [] }, { status: 200 })
    }
 
    return NextResponse.json({
      candidates: data.results.map((r) => ({
        prefecture: r.address1,
        city: r.address2,
        town: r.address3,
      })),
    })
  } catch (error) {
    const aborted = error instanceof Error && error.name === 'AbortError'
    return NextResponse.json(
      {
        error: aborted ? 'timeout' : 'network_error',
        message: '住所を取得できませんでした。手入力でも先に進めます。',
      },
      { status: 504 },
    )
  } finally {
    clearTimeout(timeout)
  }
}

// src/components/AddressFields.tsx
'use client'
 
import { useState } from 'react'
 
type Candidate = { prefecture: string; city: string; town: string }
 
export function AddressFields() {
  const [zipcode, setZipcode] = useState('')
  const [address, setAddress] = useState('')
  const [status, setStatus] = useState<'idle' | 'loading' | 'empty' | 'error'>('idle')
 
  async function lookup(value: string) {
    setStatus('loading')
    try {
      const response = await fetch(`/api/postal-code?zipcode=${encodeURIComponent(value)}`)
      const data = (await response.json()) as { candidates?: Candidate[] }
      const first = data.candidates?.[0]
 
      if (!first) {
        setStatus('empty')
        return
      }
 
      setAddress(`${first.prefecture}${first.city}${first.town}`)
      setStatus('idle')
    } catch {
      setStatus('error')
    }
  }
 
  return (
    <div>
      <label htmlFor="zipcode">郵便番号</label>
      <input
        id="zipcode"
        name="postal-code"
        inputMode="numeric"
        autoComplete="postal-code"
        value={zipcode}
        onChange={(event) => setZipcode(event.target.value)}
        onBlur={(event) => void lookup(event.target.value)}
      />
 
      <label htmlFor="address">住所</label>
      <input
        id="address"
        name="address-line1"
        autoComplete="address-line1"
        value={address}
        onChange={(event) => setAddress(event.target.value)}
      />
 
      {/* エラーは色だけでなくテキストでも伝える */}
      <p role="status" aria-live="polite">
        {status === 'loading' && '住所を検索しています…'}
        {status === 'empty' && '該当する住所が見つかりませんでした。手入力してください。'}
        {status === 'error' && '住所を取得できませんでした。手入力してください。'}
      </p>
    </div>
  )
}