vue3で郵便番号の自動入力をする

はじめに

この記事ではvue3で郵便番号の自動入力をする方法を紹介します。
実装例で、フォーカスが外れたときに郵便番号を自動入力するサンプルコードを載せています。

環境

• Vue.js: 3.0.5
• Node.js: 14.17.0
• npm: 7.16.0
• Bootstrap: 5.1.3

ライブラリのインストール

yubinbango-core2というライブラリを使用します。
https://www.npmjs.com/package/yubinbango-core2
ターミナルで以下を実行

npm i yubinbango-core2

補足
本家のyubinbango-coreはmoduleがエクスポートされていないため、そのままだとvueで使えません。
そのため、moduleエクスポート済みのyubinbango-core2をインストールしています。
（https://github.com/yubinbango/yubinbango-core/issues/4 yubinbango-coreのissuesを参照）

実装例

v-on:blur="fetchAddress()"でフォーカスが外れた時に郵便番号から住所を取得する関数を呼び出しています。

sample.vue

<template>
  <div class="container">
    <form>
      <div class="my-3">
        <label class="form-label" for="postal-code">郵便番号</label>
        <input
          class="form-control"
          type="text"
          id="postal-code"
          v-model="form.postalCode"
          v-on:blur="fetchAddress()"
        >
      </div>
      <div class="mb-3">
        <label class="form-label" for="address">住所</label>
        <input class="form-control" type="text" id="address" v-model="form.address">
      </div>
    </form>
  </div>
</template>

<script>
import { reactive } from 'vue'
import { Core as YubinBangoCore } from 'yubinbango-core2'

export default {
  components: {
    YubinBangoCore,
  },

  setup () {
    const form = reactive({
      postalCode: '',
      address: '',
    })

    // 郵便番号から住所を取得する関数
    function fetchAddress() {
      new YubinBangoCore(form.postalCode, function(addr) {
        // region=都道府県, locality=市区町村, street=町域
        const address = addr.region + addr.locality + addr.street

        form.address = address
      })
    }

    return { form, fetchAddress }
  }
}
</script>