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

Web サーバーと非同期に通信するサンプル。

つまづきやすいのは JavaScript の this。this (のスコープ) について理解するには、書籍 [JavaScript Ninjaの極意](http://amzn.to/2fBbKoZ) がオススメ。

# GET でリソースを取得する

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

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

## API の動作を確認する
郵便番号 103-0028 の住所を Web ブラウザーに表示する。

http://zipcloud.ibsnet.co.jp/api/search?zipcode=1030028

```js
{
	"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 ボタンを押す。

```js
$(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()

```js
$(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 ボタンを押す。

```html
<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>
```

```js
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 でアクセスできるようになる。


```html
<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>
```

```js
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 に変わっていることに注意する。

```js
    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');
    }
```

## 例

http://codepen.io/takatama/pen/ZBGjpK

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

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

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

- [Google SpreadSheet のデータを JSON 形式で取得する Web API をサクッと作る - Qiita](http://qiita.com/takatama/items/7aa1097aac453fff1d53)
- [Google SpreadSheet にデータを追加、更新、削除する Web API をサクッと作る - Qiita](http://qiita.com/takatama/items/e5cb83012d14c0094a79)
- [jQuery.post() | jQuery API Documentation](https://api.jquery.com/jquery.post/)
- https://github.com/55enokky/vuejs-hanson160609/