GET でリソースを取得する

郵便番号検索API - zipcloud
http://zipcloud.ibsnet.co.jp/doc/api

の JSONP API を使って、郵便番号から住所を取得する。

API の動作を確認する

郵便番号 103-0028 の住所を Web ブラウザーに表示する。

{
    "message": null,
    "results": [
        {
            "address1": "東京都",
            "address2": "中央区",
            "address3": "八重洲",
            "kana1": "ﾄｳｷｮｳﾄ",
            "kana2": "ﾁｭｳｵｳｸ",
            "kana3": "ﾔｴｽ",
            "prefcode": "13",
            "zipcode": "1030028"
        }
    ],
    "status": 200
}

Playground サービスで動作を確認する

http://codepen.io で New Pen から新しい Playground を作る。

Settings > JavaScript > Quick-add > jQuery を選択し Save & Close ボタンを押す。

$(function() {
  var url = 'http://zipcloud.ibsnet.co.jp/api/search?zipcode=1030028';
  $.ajax({
    url: url,
    dataType: 'jsonp',
    success: function(data) {
      console.log(data);
    }
  });  
});

$(function(){}); は、ブラウザーが ready 状態になったらコードを実行する。

$.ajax(); は url の呼び出しが成功すると、その結果 data を success に渡して function を実行する。

Console にリソースを取得した結果が表示される。url の zipcode を変更すると結果が変わる。

dataType を指定しない場合

dataType に jsonp を指定せず、 url: url + '?callback=?' としても同じ結果になる。

JSONP は、API を提供する Web サーバーのホスト名と、API を利用する Web ページのホスト名が異なる「クロスドメイン」で API を利用する仕組み。

$.ajax() の省略形 $.get()

$(function() {
  var url = 'http://zipcloud.ibsnet.co.jp/api/search?zipcode=1030028';
  $.get(url,function(data) {
    console.log(data);
  }, 'jsonp');
});

と書くこともできる。

Vue.js でひな形を作る

ダミーデータを使って画面を作る。

Settings > JavaScript で https://unpkg.com/vue/dist/vue.js を追加し Save & Close ボタンを押す。

<div id="zip">
  <p>郵便番号<input type="text" v-model="zipcode"><button>住所を表示</button></p>
  <input type="text" v-model="address1">
  <input type="text" v-model="address2">
  <input type="text" v-model="address3">
</div>

new Vue({
  el: '#zip',
  data: {
    zipcode: '1030028',
    address1: '住所1',
    address2: '住所2',
    address3: '住所3'
  },
  methods: {}
});

Vue.js と $.get() を組み合わせる

ボタンを押すと、API を呼び出し、結果を表示する。

bind(this) に注意する。$.get() が成功したときに実行する function が、その外側にある Vue の data に this でアクセスできるようになる。

<div id="zip">
  <p>郵便番号<input type="text" v-model="zipcode"><button v-on:click="fetchAddress(zipcode)">住所を表示</button></p>
  <input type="text" v-model="address1">
  <input type="text" v-model="address2">
  <input type="text" v-model="address3">
</div>

new Vue({
  el: '#zip',
  data: {
    zipcode: '1030028',
    address1: '住所1',
    address2: '住所2',
    address3: '住所3'
  },
  methods: {
    fetchAddress: function(zipcode) {
      var url = 'http://zipcloud.ibsnet.co.jp/api/search?zipcode=' + zipcode;
      $.get(url, function(data) {
          var result = data.results[0];
          this.address1 = result.address1;
          this.address2 = result.address2;
          this.address3 = result.address3;
        }.bind(this), 'jsonp');
    }
  }
});

bind を使わない場合

$.get() が成功したときに実行する function が、その外側の this (Vue の data) を参照するために、this を別の名前の変数 (ここでは that) に代入しておく。function からは that を使って Vue の data を参照する。

this.address1 が that.address1 に変わっていることに注意する。

    fetchAddress: function(zipcode) {
      var that = this;
      var url = 'http://zipcloud.ibsnet.co.jp/api/search?zipcode=' + zipcode;
      $.get(url, function(data) {
          var result = data.results[0];
          that.address1 = result.address1;
          that.address2 = result.address2;
          that.address3 = result.address3;
        }, 'jsonp');
    }

例

課題

API を呼び出している間、画面に「データ取得中...」と表示する。
郵便番号に数字を7桁入力すると自動的に API を呼び出す。

(おまけ) POST でリソースを作る

次の記事を参考にして、ToDo 管理アプリを作ってみる。

Vue.js + jQuery で Ajax の練習 (GET)