日本の住所入力フォーム設計：都道府県・市区町村・番地・建物名

// 候補は出すが、入力自体は自由。値の正規化はサーバー側で行う。
<label htmlFor="prefecture">都道府県</label>
<input
  id="prefecture"
  name="address-level1"
  autoComplete="address-level1"
  list="prefecture-options"
  value={prefecture}
  onChange={(event) => setPrefecture(event.target.value)}
/>
<datalist id="prefecture-options">
  {PREFECTURES.map((name) => (
    <option key={name} value={name} />
  ))}
</datalist>

// src/lib/prefectures.ts
 
/** 都道府県コード順（JIS X 0401）。表示順もこの並びを使う。 */
export const PREFECTURES = [
  '北海道',
  '青森県',
  '岩手県',
  '宮城県',
  '秋田県',
  '山形県',
  '福島県',
  '茨城県',
  '栃木県',
  '群馬県',
  '埼玉県',
  '千葉県',
  '東京都',
  '神奈川県',
  '新潟県',
  '富山県',
  '石川県',
  '福井県',
  '山梨県',
  '長野県',
  '岐阜県',
  '静岡県',
  '愛知県',
  '三重県',
  '滋賀県',
  '京都府',
  '大阪府',
  '兵庫県',
  '奈良県',
  '和歌山県',
  '鳥取県',
  '島根県',
  '岡山県',
  '広島県',
  '山口県',
  '徳島県',
  '香川県',
  '愛媛県',
  '高知県',
  '福岡県',
  '佐賀県',
  '長崎県',
  '熊本県',
  '大分県',
  '宮崎県',
  '鹿児島県',
  '沖縄県',
] as const
 
export type Prefecture = (typeof PREFECTURES)[number]

// src/lib/address-validation.ts
 
export type FieldError = { field: string; message: string }
 
const MAX_LENGTHS = {
  addressLine1: 100,
  addressLine2: 100,
} as const
 
/**
 * 住所欄の検証。「実在するか」は判定しない。
 * 弾くのは「空である」「長すぎる」「制御文字が混ざっている」の3つだけ。
 */
export function validateAddress(input: {
  prefecture: string
  city: string
  addressLine1: string
  addressLine2: string
}): FieldError[] {
  const errors: FieldError[] = []
 
  // 制御文字（改行・タブ・NULLなど）はコピペで紛れ込む。表示崩れの原因になる。
  // eslint-disable-next-line no-control-regex
  const hasControlChar = (value: string) => /[\u0000-\u001F\u007F]/u.test(value)
 
  if (input.prefecture.trim() === '') {
    errors.push({
      field: 'prefecture',
      message: '都道府県を選択してください。',
    })
  }
 
  if (input.city.trim() === '') {
    errors.push({ field: 'city', message: '市区町村を入力してください。' })
  }
 
  if (input.addressLine1.trim() === '') {
    errors.push({
      field: 'addressLine1',
      message: '町域・番地を入力してください。',
    })
  } else if (input.addressLine1.length > MAX_LENGTHS.addressLine1) {
    errors.push({
      field: 'addressLine1',
      message: `町域・番地は${MAX_LENGTHS.addressLine1}文字以内で入力してください。`,
    })
  }
 
  // 建物名は任意。入力されたときだけ長さを見る。
  if (input.addressLine2.length > MAX_LENGTHS.addressLine2) {
    errors.push({
      field: 'addressLine2',
      message: `建物名・部屋番号は${MAX_LENGTHS.addressLine2}文字以内で入力してください。`,
    })
  }
 
  for (const [field, value] of Object.entries(input)) {
    if (hasControlChar(value)) {
      errors.push({ field, message: '使用できない文字が含まれています。' })
    }
  }
 
  return errors
}

// src/components/AddressForm.tsx
'use client'
 
import { useId, useState } from 'react'
 
import { PREFECTURES } from '@/lib/prefectures'
 
type Candidate = { prefecture: string; city: string; town: string }
type LookupStatus = 'idle' | 'loading' | 'empty' | 'error'
 
const LOOKUP_TIMEOUT_MS = 5000
 
const STATUS_MESSAGES: Record<LookupStatus, string> = {
  idle: '',
  loading: '住所を検索しています。',
  empty: '該当する住所が見つかりませんでした。都道府県から入力してください。',
  error: '住所を取得できませんでした。そのまま手入力で先に進めます。',
}
 
export function AddressForm() {
  // 同じページに複数フォームが載っても id が衝突しないようにする。
  const uid = useId()
  const [prefecture, setPrefecture] = useState('')
  const [city, setCity] = useState('')
  const [addressLine1, setAddressLine1] = useState('')
  const [status, setStatus] = useState<LookupStatus>('idle')
 
  async function lookup(rawPostalCode: string) {
    // 全角数字とハイフンを落として7桁にそろう場合だけ問い合わせる。
    const digits = rawPostalCode.normalize('NFKC').replace(/[^0-9]/g, '')
    if (digits.length !== 7) {
      return
    }
 
    setStatus('loading')
 
    try {
      const response = await fetch(`/api/postal-code?zipcode=${digits}`, {
        // 応答が返らないまま待ち続けないよう必ず打ち切る。
        signal: AbortSignal.timeout(LOOKUP_TIMEOUT_MS),
      })
 
      if (!response.ok) {
        setStatus('error')
        return
      }
 
      const data = (await response.json()) as { candidates?: Candidate[] }
      const first = data.candidates?.[0]
 
      // 該当なしはエラーではない。手入力に切り替えてもらう。
      if (!first) {
        setStatus('empty')
        return
      }
 
      setPrefecture(first.prefecture)
      setCity(first.city)
      // 町域までしか埋めない。番地の続きはユーザーが打つ。
      setAddressLine1(first.town)
      setStatus('idle')
    } catch {
      // タイムアウト（TimeoutError）も通信断もここに来る。どちらも手入力で回復できる。
      setStatus('error')
    }
  }
 
  return (
    <form action="/checkout/confirm" method="post">
      <div>
        <label htmlFor={`${uid}-postal`}>郵便番号</label>
        <input
          id={`${uid}-postal`}
          name="postal-code"
          type="text"
          inputMode="numeric"
          autoComplete="postal-code"
          maxLength={8}
          aria-describedby={`${uid}-postal-hint`}
          // 1文字ごとに叩かない。欄を離れたときに1回だけ。
          onBlur={(event) => void lookup(event.target.value)}
        />
        <p id={`${uid}-postal-hint`}>
          ハイフンはあってもなくてもかまいません。
        </p>
      </div>
 
      <div>
        <label htmlFor={`${uid}-prefecture`}>都道府県</label>
        <select
          id={`${uid}-prefecture`}
          name="address-level1"
          autoComplete="address-level1"
          required
          value={prefecture}
          onChange={(event) => setPrefecture(event.target.value)}
        >
          <option value="">選択してください</option>
          {PREFECTURES.map((name) => (
            <option key={name} value={name}>
              {name}
            </option>
          ))}
        </select>
      </div>
 
      <div>
        <label htmlFor={`${uid}-city`}>市区町村</label>
        <input
          id={`${uid}-city`}
          name="address-level2"
          autoComplete="address-level2"
          required
          value={city}
          onChange={(event) => setCity(event.target.value)}
        />
      </div>
 
      <div>
        <label htmlFor={`${uid}-line1`}>町域・番地</label>
        <input
          id={`${uid}-line1`}
          name="address-line1"
          autoComplete="address-line1"
          required
          value={addressLine1}
          onChange={(event) => setAddressLine1(event.target.value)}
        />
      </div>
 
      <div>
        {/* 建物名は自動補完しないので state を持つ必要もない。 */}
        <label htmlFor={`${uid}-line2`}>建物名・部屋番号（任意）</label>
        <input
          id={`${uid}-line2`}
          name="address-line2"
          autoComplete="address-line2"
        />
      </div>
 
      {/* 補完の結果は色ではなくテキストで伝え、フォーカスは動かさない。 */}
      <p role="status" aria-live="polite">
        {STATUS_MESSAGES[status]}
      </p>
 
      <button type="submit">確認画面へ</button>
    </form>
  )
}