FORM DEMO
住所フォームのデモ
郵便番号を聞くのをやめると、住所入力はここまで短くなる
左は郵便番号から住所を引く、よくある住所フォームです。 右は Jusho の /suggest を使い、住所の一部を入力すると候補が出て、選ぶとフォームが埋まる住所フォームです。 どちらも実際に api.jusho.dev を呼んでいます。
よくある住所フォーム
郵便番号から自動入力
郵便番号を入力して「住所検索」を押すと、都道府県・市区町村・町域が入ります。
- ・郵便番号を覚えていないと、そもそも使えない
- ・引っ越し前後や大規模ビルの個別郵便番号は間違えやすい
- ・1つの郵便番号に複数の町域があると、結局ユーザーが選ぶ
Jusho の住所フォーム
住所の一部から候補を出して自動入力
「渋谷区渋谷」のように途中から入力しても候補が出ます。選ぶと郵便番号まで確定します。
- ・郵便番号を知らなくても、覚えている部分から引ける
- ・都道府県を省略しても候補が出る（「渋谷区渋谷」でOK）
- ・選んだ時点で郵便番号と住所マスタの町域が確定する
なぜ候補から選ばせるのか
覚えている部分から引ける
郵便番号は覚えていなくても、町名や駅前の地名は覚えているものです。「渋谷区渋谷」「博多駅前」のような断片から候補を出せます。
選んだ時点で住所が確定する
候補は住所マスタ（日本郵便・国土交通省データ）から出しています。選択された住所は郵便番号・町域コードまで紐づいた状態で保存できます。
入力回数が減る
郵便番号を調べる → 入力する → 検索ボタンを押す、という往復が不要です。番地まで入力していた場合は、番地欄にそのまま引き継ぎます。
実装はこれだけ
サジェストは GET /suggest の1本です。認証なしで試せます。
// 入力のたびに候補を取得する（2文字以上）
const params = new URLSearchParams({ q: query, max_results: '8' });
const res = await fetch(`https://api.jusho.dev/suggest?${params}`);
const { suggestions } = await res.json();
// 候補を選んだらフォームに反映する
function onSelect(item) {
setForm({
postCode: item.post_code, // "1500002"
pref: item.pref, // "東京都"
city: item.city, // "渋谷区"
town: item.town, // "渋谷"
});
}