Vue.jsで郵便番号自動入力機能を作成する

Vue.jsだけで郵便番号自動入力機能を作成します。
CORSのエラーが発生してしまうので、jsonpを使用してCORSのエラーが出ないようにしていきます。

jsonpインストール

npm install axios-jsonp

郵便番号から住所を取得してセットする取得実装

jsonpのaxiosを使用して、郵便局dが出している郵便番号取得APiを叩きに行きます。

<div class="form-group">
  <label>住所</label>
  <div class="flex items-center">
    <input class="form-control" type="number" v-model="postalcode1"/><span class="block ml-2 mr-2">ー</span>
    <input class="form-control" type="number" v-model="postalcode2"/>
    <button class="px-4 py-1 rounded-lg text-white bg-black font-normal text-sm ml-4" @click="searchAddress">住所検索</button>
  </div>
</div>
<div class="form-group">
  <label>都道府県</label>
  <input class="form-control" type="text" v-model="prefecture"/>
</div>
<div class="form-group">
  <label>市区町村</label>
  <input class="form-control" type="text" v-model="city"/>
</div>
<div class="form-group">
  <label>地名・番名</label>
  <input class="form-control" type="text" v-model="town"/>
</div>
<div class="form-group">
  <label>建物名・階・番号</label>
  <input class="form-control" type="text" v-model="building"/>
</div>

HTMl部分はこんな感じで、JavaScript部分を実装します。

<script>
const jsonpAdapter = require('axios-jsonp')
export default {
  data() {
    return {
      postalcode1: '',
      postalcode2: '',
      prefecture: '',
      city: '',
      town: '',
      building: '',
    }
  },
  methods: {
    searchAddress() {
      const zipCode = this.postalcode1 + this.postalcode2
      api.get(`https://api.zipaddress.net/?zipcode=${zipCode}`, {adapter: jsonpAdapter}).then(rs => {
        const response = rs.data
        this.prefecture = response.pref
        this.city = response.city
        this.town = response.town
        this.building = ''
      })
    }
  }
}
</script>

たったこれだけで郵便番号から住所を取得することができました。
やはり住所を入力するときは郵便番号である程度入力されていると嬉しいですね。

簡単なのでぜひやってみてください。