Web サーバーと非同期に通信するサンプル。
つまづきやすいのは JavaScript の this。this (のスコープ) について理解するには、書籍 JavaScript Ninjaの極意 がオススメ。
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 管理アプリを作ってみる。