📮

(日本の)郵便番号入力欄の実装を考える

2022/07/16に公開

入力欄

idea

はじめに

日本の郵便番号 についてwikipediaで調べてみると下記のような記述を確認

地名が存在しても、住居や事業所のない、いわゆる無人地帯になっている場合は郵便番号が付与されない。逆に、それまで郵便番号が付与されていない地名に対して、住居や事業所が設置された場合は追加で郵便番号が付与される。

今後、郵便番号の追加も削除もあり得る。
また、合併等などで変更があるらしい。
月１回ペースで更新されているとのこと。
参考＊https://www.post.japanpost.jp/zipcode/download.html

郵便番号の仕様

葉書等には下記のような記載である。
＞　〒　◯◯◯ - △△△△

調べてみると◯3桁だけに意味があるものとないものがあるようです。
◯だけでは都道府県などは絞り込めないようです。

7桁の郵便番号で複数の町域で使われているものもある。（重複がある）

郵便番号をプログラムで扱う時の命名について

日本郵便では zipcode と称している。

ユーザーの入力ボックスについて考える

・◯も△も数値のみである。
・3桁の数値、「ー」、4桁の数値である。

<fieldset>
  <label>郵便番号</label>
    <input type="text" name="zip1" id="zip1" size="6" maxlength="3"　pattern="\d{3}" inputmode="numeric">
     -
    <input type="text" name="zip2" id="zip2" size="8" maxlength="4"　pattern="\d{4}" inputmode="numeric">
</fieldset>

オーソドックスな3桁、4桁のテキストボックスが現実的ではないでしょうか。
0始まりも存在するので、 input type="number" は適切ではない。

クライアントサイドの追加仕様

必須入力とした時、どこかのタイミングで必須チェックを行う
3桁の数値か＆4桁の数値かの文字列チェックを行う
ユーザーの入力中に絞り込みによるヒントを与える
住所入力欄が存在する場合、郵便番号より都道府県情報などを外部リソースより取得し適用する
SPの場合、キーボード入力はデフォルト数字入力とする
3桁入力後、4桁の入力欄に自動でカーソルを移動する
サーバーサイドへは半角数値で送信する

サーバーサイドの追加仕様

必須入力とした時、必須チェックを行う
3桁の数値か＆4桁の数値かの文字列チェックを行う
住所入力欄が存在しない場合、郵便番号より都道府県情報などを外部リソースより取得し適用する

外部API

GoogleMapやYahooが出しているよう。
商用とか色々あったり、
郵便局のCSVから自前でフルスクラッチする方など様々。