Vue.jsでWebAPIを使ってみた(郵便番号→住所)

参照URL
https://qiita.com/icoxfog417/items/49f7301be502bc2ad897

参考URLだとgithubのissueを取得するのだけど、もうちょい身近なAPIの方がいいよな～と色々と探してみたら、わりと事前登録してAPIキーを取得しないと駄目！と面倒なのが多かった。
登録不要なAPIでも、クロスドメイン問題(同じドメイン無いじゃないとAJAXさせない。Access-Control-Allow-Originヘッダー)とかあって面倒。

個人が勉強用に公開しているのがあったので、それを使ってみた。
http://zipaddress.net/

<!-- CDNでvue.jsを取得 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>


<div id="app">
  <h2>郵便番号 {{zipcode}} </h2>
  <div>
    <!-- 郵便番号の入力欄 -->
    <input type="text" v-model="zipcode">
  </div>
  
  <!-- 郵便番号から住所が見つかったら表示 -->
  <div v-if="address.code == 200">
    都道府県：{{address.data.pref}} <br>
    住所　　：{{address.data.address}} <br>
    市区　　：{{address.data.city}} <br>
    町村　　：{{address.data.town}} <br>
    全住所　：{{address.data.fullAddress}} <br>
  </div>    
  
  <!-- 見つからなかった事を表示 -->  
  <div v-else>
      Not Found
  </div>
</div>

<!-- CSS記述 -->
<style>
</style>


<!-- JS処理 -->
<script>

// 登録不要でクロスドメインOKなAPIって、あんまり無い…。
var API_URL = "http://api.zipaddress.net/?zipcode="


var app = new Vue({
  el: "#app",
  data: {
    zipcode: "", //郵便番号
    address: "" // APIからもらう住所データ
  },
  
  // 初期化
  created: function () {
    this.zipcode = "100-0001"; // 郵便番号を初期化
    this.fetchData(); // 郵便番号を検索して、結果を表示しておく
  },
  
  // 指定された変数が変更されたら、この関数を実行する
  watch: {
    zipcode: "fetchData"
  },

  methods: {
    fetchData: function () {
      // ajaxで取得  
      var xhr = new XMLHttpRequest();
      // 非同期なので、参照渡しでデータ取得する
      var self = this;
      // 郵便番号をくっつけて、URLを生成
      xhr.open("GET", API_URL + this.zipcode);
      
      // 非同期なので完了したら・・・
      xhr.onload = function () {
        // 返ってくるデータはJSONなので、パースして変数に格納
        self.address = JSON.parse(xhr.responseText);
      }
      // サーバへ送信
      xhr.send()
    }
  }
})
</script>

<h2>郵便番号 {{zipcode}} </h2>

<div>

</div>

都道府県：{{address.data.pref}} <br>

住所　　：{{address.data.address}} <br>

市区　　：{{address.data.city}} <br>

町村　　：{{address.data.town}} <br>

全住所　：{{address.data.fullAddress}} <br>

</div>

Not Found

</div>

<style>

</style>

// 登録不要でクロスドメインOKなAPIって、あんまり無い…。

var API_URL = "http://api.zipaddress.net/?zipcode="

var app = new Vue({

el: "#app",

data: {

zipcode: "", //郵便番号

address: "" // APIからもらう住所データ

// 初期化

created: function () {

this.zipcode = "100-0001"; // 郵便番号を初期化

this.fetchData(); // 郵便番号を検索して、結果を表示しておく

// 指定された変数が変更されたら、この関数を実行する

watch: {

zipcode: "fetchData"

methods: {

fetchData: function () {

// ajaxで取得

var xhr = new XMLHttpRequest();

// 非同期なので、参照渡しでデータ取得する

var self = this;

// 郵便番号をくっつけて、URLを生成

xhr.open("GET", API_URL + this.zipcode);

// 非同期なので完了したら・・・

xhr.onload = function () {

// 返ってくるデータはJSONなので、パースして変数に格納

self.address = JSON.parse(xhr.responseText);

}

// サーバへ送信

xhr.send()

}

})

</script>

関連記事