TypeScriptで郵便番号入力の手間を解消！住所自動入力の実装方法

こんばんはエンジニアの眠れない夜です。

今回は、TypeScriptを使って郵便番号から住所を自動入力する機能の実装方法を紹介します。ユーザーが入力する手間を省き、UXを向上させるだけでなく、入力ミスを防ぐ効果も期待できます。

なぜ住所自動入力が重要なのか？

住所入力は、フォームの中でも特に面倒な項目の一つです。手入力によるミスや、入力時間の増加は、ユーザーの離脱に繋がりかねません。

住所自動入力機能を実装することで、以下のメリットが得られます。

ユーザー体験の向上: 入力の手間を減らし、スムーズなフォーム入力を実現します。
入力ミスの削減: 手入力による誤字脱字を防ぎ、データの正確性を担保します。
開発効率の向上: 住所入力に関するバリデーション処理などを簡略化できます。

実装のポイント

今回の実装では、以下の点に焦点を当てています。

TypeScriptの型安全性: 型定義を活用し、安全かつ保守性の高いコードを目指します。
API連携: 無料の郵便番号API「zipaddress.net」を利用し、住所情報を取得します。
ユーザーフレンドリーな入力: 全角数字やハイフンの有無に対応し、柔軟な入力をサポートします。

実装コード例

<form>
  <div>
    <label for="billing_zip_code">郵便番号:</label>
    <input type="text" id="zip_code" name="zip_code">
  </div>
  <div>
    <label for="billing_address1">住所1:</label>
    <input type="text" id="address1" name="address1">
  </div>
  </form>

// 郵便番号の自動入力処理を行う関数
function handleZipCodeAutofill(zipCodeInputName: string, address1InputName: string) {
    // 郵便番号の入力欄とその他の要素を取得
    const zipCodeInput = document.querySelector(`input[name="${zipCodeInputName}"]`) as HTMLInputElement;
    const address1Input = document.querySelector(`input[name="${address1InputName}"]`) as HTMLInputElement;

    // 郵便番号の入力欄と住所1の入力欄が存在する場合にのみ、以降の処理を実行
    if (zipCodeInput && address1Input) {
        // 全角数字を半角数字に変換する関数
        function toHalfWidth(str: string): string {
            return str.replace(/[０-９]/g, (s) => String.fromCharCode(s.charCodeAt(0) - 0xFEE0));
        }

        // 郵便番号の入力が終わった時のイベントリスナー
        zipCodeInput.addEventListener('change', () => {
            let zipCode = zipCodeInput.value;

            // 郵便番号の前後のスペースを削除
            zipCode = zipCode.trim();

            // 郵便番号からハイフンを取り除く
            zipCode = zipCode.replace(/-/g, '');

            // 全角数字を半角数字に変換
            zipCode = toHalfWidth(zipCode);

            // 郵便番号が7桁の数字であることを確認
            if (!/^\d{7}$/.test(zipCode)) {
                alert('郵便番号の形式が正しくありません');
                return;
            }

            // ハイフンを追加して郵便番号を整形
            const formattedZipCode = zipCode.slice(0, 3) + '-' + zipCode.slice(3);

            // 元の郵便番号の入力欄を正規化した郵便番号で更新
            zipCodeInput.value = formattedZipCode;

            // Web APIを使用して住所情報を取得
            fetch(`https://api.zipaddress.net/?zipcode=${formattedZipCode}`)
                .then(response => response.json())
                .then(data => {
                    if (data.code === 200) {
                        // 住所情報が取得できた場合は、住所1の入力欄に自動入力
                        address1Input.value = data.data.fullAddress;
                    } else {
                        // 住所情報が取得できなかった場合は、エラーメッセージを表示
                        alert('住所情報が取得できませんでした');
                    }
                })
                .catch(error => {
                    console.error('住所情報の取得中にエラーが発生しました:', error);
                    alert('住所情報の取得中にエラーが発生しました');
                });
        });
    }
}

// 郵便番号の自動入力処理を呼び出す
handleZipCodeAutofill('zip_code', 'address1');