【FormBridge新バージョン対応】新しいJSを使って郵便番号から住所を自動入力する
FormBridge新バージョンとなり既存のJavascriptが動作しなくなりました。
少しづつ移行するにあたり、住所の自動入力機能の刷新を行いました。
なお自作をせずに以下の記事でも設定が可能です。
しかし、住所の入力する欄が複数必要なケースだと、上記の記事の内容は使えないので、自分でJSを書くに至りました。
その他、自作しているので細かな調整も可能です。
またちょうどよいユースケースなので新しいJSの書き方を理解するのにも約に立ちました。
以下にコードを乗せますのでぜひ使ってみてください。
コード
(function () {
"use strict";
// フィールドコードをここで定義
const FIELD_CODE_POSTAL_CODE = 'postal_code'; // 実際の郵便番号フィールドコードに変更
const FIELD_CODE_PREFECTURE_AND_CITY = 'prefecture_and_city'; // 住所（都道府県・市区町村）
const FIELD_CODE_KANA_ADDRESS = 'kana_address'; // 住所フリガナ
/**
* 郵便番号を入力した際に住所を自動取得する関数
* @param {string} postalCode - 郵便番号（ハイフンなし）
* @returns {Promise<Object>} - 住所データ（address1, address2, address3, kana1, kana2, kana3）
*/
function getAddressFromPostalCode(postalCode) {
const apiUrl = `https://zipcloud.ibsnet.co.jp/api/search?zipcode=${postalCode}`;
return fetch(apiUrl)
.then(response => response.json())
.then(data => {
if (data.status === 200 && data.results) {
const address = data.results[0]; // 最初の住所を選択
return address; // JSONの住所データをそのまま返す
} else {
throw new Error('住所が見つかりませんでした');
}
})
.catch(error => {
console.error('APIリクエストに失敗しました:', error);
return null; // エラーが発生した場合はnullを返す
});
}
/**
* 郵便番号フィールドの変更イベントハンドラー
* 郵便番号を入力して住所を自動で取得し、フォームのフィールドにセットします
*/
formBridge.events.on(`form.field.change.${FIELD_CODE_POSTAL_CODE}`, function (context) {
const postalCode = context.value;
// ハイフンなしで7桁の郵便番号を処理
const formattedPostalCode = postalCode.replace("-", "");
// 7桁の郵便番号のみ処理を実行
if (formattedPostalCode && formattedPostalCode.length === 7) {
getAddressFromPostalCode(formattedPostalCode)
.then(address => {
if (address) {
// 住所データを統合してセット
const fullAddress = `${address.address1} ${address.address2} ${address.address3}`;
context.setFieldValue(`${FIELD_CODE_PREFECTURE_AND_CITY}`, fullAddress);
console.log(`住所が正常にセットされました: ${fullAddress}`);
// 住所1フリガナ（読み仮名）をセット
const kanaAddress = `${address.kana1} ${address.kana2} ${address.kana3}`;
context.setFieldValue(`${FIELD_CODE_KANA_ADDRESS}`, kanaAddress);
console.log(`フリガナが正常にセットされました: ${kanaAddress}`);
// 住所取得成功時にはエラーメッセージをクリア
context.setFieldValueError(`${FIELD_CODE_POSTAL_CODE}`, null);
} else {
// 住所が取得できなかった場合のエラーハンドリング
context.setFieldValueError(`${FIELD_CODE_POSTAL_CODE}`, '住所が見つかりませんでした');
console.log('住所の取得に失敗しました');
}
})
.catch(error => {
// APIリクエストでエラーが発生した場合
context.setFieldValueError(`${FIELD_CODE_POSTAL_CODE}`, '住所取得中にエラーが発生しました');
console.error('住所取得中にエラーが発生しました:', error);
});
} else {
// 無効な郵便番号の場合
console.log('有効な郵便番号を入力してください');
context.setFieldValueError(`${FIELD_CODE_POSTAL_CODE}`, '有効な郵便番号を入力してください');
}
});
})();