Wixフォームに郵便番号から住所を自動入力する機能を追加する

WixフォームとVeloを使って、郵便番号を入力すると自動で住所が挿入されるフォームを作成します。

![郵便番号から住所を自動入力.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/365910/a185772d-7a9f-6cfe-e058-7be3bc8a10fd.gif)

住所の取得には郵便番号検索APIを使用します。
https://zipcloud.ibsnet.co.jp/doc/api

最終的なコードはこちら

```javascript:HOME
$w.onReady(function () {
    $w('#input1').onInput(async () => {
        // 7桁以上入力されたら実行
        if ($w('#input1').value.length >= 7) {
            const fetchedData = await getAddress();
            // 都道府県
            $w('#input2').value = fetchedData[0].address1
            // 市区町村
            $w('#input3').value = fetchedData[0].address2
            // 住所1
            $w('#input4').value = fetchedData[0].address3
        }
    });
});

export async function getAddress() {
    const api = "https://zipcloud.ibsnet.co.jp/api/search?zipcode="
    // 入力されたハイフンを削除して変数に格納
    let inputPostalCode = $w('#input1').value.replace("-", "");
    let url = api + inputPostalCode;
    const response = await fetch(url);
    if (response.ok) {
        const json = await response.json();
        return json.results;
    } else {
        return Promise.reject("Fetch did not succeed");
    }
}
```
（始める前に開発モードを有効にしておきます）
![2023-04-25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/365910/36056680-27aa-b430-c9c4-7bf5e86c3db4.png)


## STEP1 | Wixフォームを準備

Wixフォームを設置します。
![2023-04-25 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/365910/fcafd223-ae08-d28e-dbb5-20050adf8383.png)

4つのテキストタイプの入力項目を設定して、項目タイトルと適当なIDを設定します。

* 項目タイトル: 郵便番号　ID: input1
* 項目タイトル: 都道府県　ID: input2
* 項目タイトル: 市区町村　ID: input3
* 項目タイトル: 住所1　ID: input4

![2023-04-25 (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/365910/622ce9ac-63a6-9da0-e06a-7f339873b24a.png)

郵便番号はハイフンを入れても8桁なので、8桁までしか入力できないようにしておきます。
![2023-04-25 (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/365910/4903b1ec-66cf-339a-19fb-1635404b1d38.png)


## 郵便番号検索APIの仕組み

郵便番号「7830060」で検索する場合は
https://zipcloud.ibsnet.co.jp/api/search?zipcode=7830060
のURLをたたきます。

![2023-04-25 (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/365910/f06660aa-d64a-bc6c-549b-5e75a8124728.png)

実際にブラウザでたたくとJson形式で住所情報が表示されます。

## STEP2 | 郵便番号検索APIにアクセスする

郵便番号の入力値を受け取り、zipcode=の後ろに追加してあげれば住所情報を受け取れそうです。

"https://zipcloud.ibsnet.co.jp/api/search?zipcode={ユーザーが入力した郵便番号}"

```javascript:HOME
export async function getAddress() {
    const api = "https://zipcloud.ibsnet.co.jp/api/search?zipcode="
    // 入力されたハイフンを削除して変数に格納
    let inputPostalCode = $w('#input1').value.replace("-", "");
    let url = api + inputPostalCode;
    const response = await fetch(url);
    if (response.ok) {
        const json = await response.json();
        return json.results;
    } else {
        return Promise.reject("Fetch did not succeed");
    }
}
```
ここでは郵便番号検索APIにアクセスするための関数 getAddress を定義しています。

まず、APIのURLを定数 api に格納します。次に、入力された郵便番号を取得し、ハイフンを削除して変数 inputPostalCode に格納します。そして、APIのURLと inputPostalCode を結合して、住所検索用のURL url を作成します。

次に、fetch 関数を使用して、作成したURLにアクセスし、レスポンスを取得します。response.ok が true の場合、レスポンスは正常に受信されたことを示します。その場合、レスポンスからJSONデータを取得し、結果を返します。

response.ok が false の場合、 Promise.reject() を使用して Fetch did not succeed というエラーメッセージを返します。

上記のコードがわからなくても
$w.onReady(function () {
});
の外にコードをコピペで大丈夫です。

:::note info
#input1 は必要に応じて入力項目のIDと一致させてください。
:::

## STEP3 | 住所データを受取り表示させる

input1 要素に入力された郵便番号が7桁以上の場合に、郵便番号検索APIにアクセスして、郵便番号に対応する住所情報を取得し、取得した住所情報をそれぞれ input2、input3、input4 要素に表示します。

```javascript:HOME
$w('#input1').onInput(async () => {
    // 7桁以上入力されたら実行
    if ($w('#input1').value.length >= 7) {
        const fetchedData = await getAddress();
        // 都道府県
        $w('#input2').value = fetchedData[0].address1
        // 市区町村
        $w('#input3').value = fetchedData[0].address2
        // 住所1
        $w('#input4').value = fetchedData[0].address3
        // console.log(fetchedData);
    }
});
```

$w.onReady(function () {
});
の中に上記コードをコピペしてください。

:::note info
#input1 input2 #input3 #input4 は必要に応じて入力項目のIDと一致させてください。
:::

## まとめ
入力項目のIDさえ合わせていただければ、ほぼコピペで実装できます。

参考にした資料
https://www.wix.com/velo/example/hello-fetch