郵便番号を元に、住所の自動入力を実装！yubinbango.js

yubinbango.jsとは？

yubinbango.jsは、日本の郵便番号から自動的に住所を取得するJavaScriptライブラリです。ユーザーが郵便番号を入力するだけで、市区町村や町名などの住所を自動的に入力欄に反映させることができ、フォーム入力の手間を大幅に減らすことができます。

yubinbango.jsの特徴とメリット

• シンプル: yubinbango.jsは軽量であり、HTMLフォームに簡単に組み込むことができます。外部のJavaScriptファイルを読み込み、クラスを付与するだけで、住所の自動入力機能を導入可能です。
• ユーザー体験の向上: 住所の入力はユーザーにとって時間がかかる部分です。郵便番号から住所が自動補完されることで、入力ミスのリスクを減らし、ユーザー体験が向上します。
• 無料で使える: GitHubで公開されており、誰でも無料で利用できます。オープンソースであり、開発者コミュニティによって継続的に改善が行われています。

実際の見え方

まずは、以下より実際に郵便番号を入力してみてください！

See the Pen
yubinbango by koki nakata (@koki-nakata)
on CodePen.

yubinbango.jsの使い方

ライブラリの読み込み

まず、yubinbango.jsをHTMLに読み込みます。以下のようにスクリプトタグを追加してください。

<script src="https://yubinbango.github.io/yubinbango/yubinbango.js"></script>

フォームの設定

フォームに郵便番号の入力フィールドを設定し、適切なclassを付与することで自動的に住所が補完されるようになります。以下は簡単なサンプルコードです。

<div class="h-adr">
　<input type="hidden" class="p-country-name" value="Japan">
　<div>
　　<label for="zip">郵便番号</label>
　　<input class="p-postal-code" type="text" name="zip" id="zip">
　</div>
　<div>
　　<label for="prefecture">都道府県</label>
　　<input class="p-region" type="text" name="prefecture" id="prefecture">
　</div>
　<div>
　　<label for="city">市区町村</label>
　　<input class="p-locality p-street-address" type="text" name="city" id="city">
　</div>
　<div>
　　<label for="address">住所</label>
　　<input class="p-extended-address" type="text" name="address" id="address">
　</div>
</div>

h-adrクラスをフォームタグに付与し、各住所フィールドに適切なクラス（例: p-postal-code や p-region）を指定することで、自動入力が機能します。

各クラスの説明

• h-adr: フォーム全体を住所入力として認識させるためのクラスです。このクラスを付与することで、yubinbango.jsが住所自動補完の対象として認識します。
• p-country-name: 国名を指定するためのクラスです。日本の場合は”Japan”と指定し、表示を隠すためにstyle="display:none;"を使用します。
• p-postal-code: 郵便番号を入力するフィールドに付与します。このクラスによって、郵便番号から住所情報を取得します。郵便番号の入力にはハイフン（-）を含めても対応しています。
• p-region: 都道府県を入力するフィールドに付与します。このクラスで郵便番号に基づいた都道府県の情報を自動入力します。
• p-locality: 市区町村を入力するフィールドに付与します。郵便番号に基づいて、市区町村の情報を自動的に補完します。
• p-street-address: 町域（町名や番地など）を入力するフィールドに付与します。このクラスで詳細な住所情報を自動入力します。

注意点

• データの精度: 住所データは定期的に更新されているものの、古い郵便番号や新設の地域には対応していない場合もあります。そのため、yubinbango.jsの最新版を使用し、正確なデータを得ることが重要です。
• SSLの利用: yubinbango.jsの外部リソースを読み込みます。ユーザーのセキュリティを確保するため、サイトがHTTPSであることが推奨されます。

まとめ

解説の通り、非常に軽量で簡単に導入することが可能です。特にECサイトや会員登録フォームでユーザー体験を向上させるために、ぜひ活用してみてください！