jQuery入門 2020 #07:非同期(Ajax)通信をしよう ②

前回、Vanilla JSで Ajax通信のプログラムを作成しましたが、今度はこれを jQueryで作成してみましょう。次のようになります。

jQueryでの Ajax通信は、$.getJSON

まず、jQueryで Ajax通信をする場合は $.getJSONというメソッドを使います。

$.getJSON(JSONファイルへのパス, 通信成功時の処理);

指定したJSONファイルから取得をし、成功をすると2番目のパラメーターで指定した関数が実行されます。通常ここには、次のように直接処理を記述していきます。

$.getJSON('feed.json', function(json) {
  ...
}

これで jsonの中に、JSONデータが格納されます。後は、前回と同様にこの jsonを利用しながら処理をしていけば良いでしょう。

var html = '<ul>';
for (var i=0; i<json.items.length; i++) {
    html += '<li>' + json.items[i].title + '</li>';
}
html += '</ul>';

最後に、jQueryの機能を使ってページ内に反映します。

$('#news').html(html);

その他の Ajaxメソッド

ここで利用した、$.getJSONというメソッドはその名の通り、JSONデータを取得する専用のメソッドです。この他に、汎用的に利用できるさまざまなメソッドがあります。

$.get, $.post

HTTPで GET通信または POST通信を行う場合は通常、このメソッドを利用します。最後のパラメーターで戻り値の種類を指定できます。

$.get(URL, 送信するデータ, 成功時の処理, 返されるデータタイプ(xml, json, script, html));
// $.postも同様

$.ajax

最も汎用的に利用できるメソッドで、数多くのパラメーターがあります。以下のリファレンスなどをご参照ください。

Vue.jsとの組み合わせ

Vue.jsには、Ajax通信の機能が備わっておらず、別のライブラリーと組み合わせて利用することが前提となっています。そこでここでは、jQueryと組み合わせてみましょう。まずは、Vue.jsを CDN(Content Delivery Network)で読み込みます。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

そしたら、基本となるプログラムを作成していきましょう。JSONは「items」という dataで受け取ります。

<script>
var app = new Vue({
  el: '#news',
  data: {
    items: {}
  }
});
</script>

Ajax通信は、「mounted」という宣言の中で行います。次のように追加しましょう。

  mounted: function() {
    var self = this;
    $.getJSON('feed.json', function (json) {
      self.items = json.items;
    });
  }

ここで、次の記述に注目しましょう。

var self = this;

これは、「thisを逃がす」という処理を行っています。通常、Vue.jsで dataで宣言した変数に値を代入する場合は、

this.items = json.items;

等とします。しかし、jQuery内の次の記述では「this」が Ajaxのオブジェクトを指してしまいます。

    $.getJSON('feed.json', function (json) {
      this.items = json.items;
    });

そのため、jQueryに制御が移る前に、thisの値を別の変数として避難させておき、その変数を使って Vue.jsのオブジェクトに代入しているというわけです。これで、Ajax通信ができるようになるので後は HTML側で次のようにして処理しましょう。

    <div id="news">
        <ul>
            <li v-for="item in items">{{ item.title }}</li>
        </ul>
    </div>

全文は次のようになります。

Ajax通信ライブラリー『axios』を使おう

こうして、jQueryを利用することで Ajax通信が簡単に行えますが、近年は非同期通信に「Promise」などが使われることから、少し jQueryでは力不足になってきています(Promiseについては、また別の機会に紹介しましょう)。

そこで、近年利用されている Ajax通信ライブラリーが「axios」です。Vue.jsと組み合わせて利用することもできます。まずは、CDNで取り込みましょう。

    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

そして、mountedの内容を次のように変更します。

mounted: function () {
  var self = this;
  axios.get('feed.json').then(function(res) {
    self.items = res.data.items;
  });
}

jQueryとほぼ同様ですが、受け取れるデータに少し違いがあります。jQueryの場合は、JSONの内容だけで受け取れるため、次のように扱えました。

self.items = json.items;

しかし、axiosが受け取るデータは通信の成否やレスポンスコードなどの情報も含まれていて、JSON自体は res.dataという中に入っているため、次のようにして代入します。

self.items = res.data.items;

全文は次のようになります。

簡単な通信なら jQuery、ややこしい通信なら axios

このように、現状で Ajax通信を行うためには、Vanilla JS、jQuery、axios等いくつかの選択肢があります。どのような使い分けをするかですが、JSONをサクッと受け取って処理したいなどの場合は、わざわざ axiosを取り込んで使うほどでもないため、jQueryを利用するのが手軽と言えます。しかし、先の「Promise」を利用するなど、APIを叩いてややこしい処理をしたいなどの場合、jQueryでやろうとするとややこしいので、そのような場合は axiosを採用するなどすると良いでしょう。