非同期通信とその実装について - エンジニアのサブルーチン

今回は非同期通信についてまとめていきたいと思います。

非同期通信とは

非同期通信の前に、まずは軽く同期通信について解説する。

同期通信

一般的に、ユーザーがあるサイトのページに移動する等、サーバーに対してリクエストを投げると、サーバーからレスポンスがくるまでブラウザは操作不能になる。こんな感じで、ユーザーがリクエストをサーバーに投げかけてからサーバーからレスポンスがくるまでブラウザの処理が止まって、ユーザーが処理できなくなるような通信のことを同期通信という。

非同期通信とはこれの逆のことでユーザーがリクエスト投げかけた直後でも、ブラウザ側で操作ができるような通信のことを言う。

そして、サーバーが応答があるとコールバックを行います。コールバックとは簡単にいうと、必要な時に呼び出せるように前もって定義しておく関数のこと。

...

いまいち理解できないと思うので、わかりやすくいうとグーグルの検索フォームで「あ」と入力すると、ページの遷移を伴わずに、自動的に「明日の天気」「アマゾン」等、予測が出てくる。これが非同期通信です。

非同期通信のメリットは、使うべきところで使うと圧倒的にユーザビリティ性が向上するっていうところ。グーグルマップとかいろんなところで使われている。ムッチャ便利。

...

本題に入る前に軽く事前知識のおさらいだけ。

API

あるソフトウェアから、第三者のソフトウェアの機能やそのソフトウェアとコミュニケーションを取れるようにする窓口のような役割をするもの。

HTTPリクエスト/HTTPレスポンス

HTTP通信における、クライアントからサーバへの通信をHTTPリクエスト、サーバからクライアントへの通信をHTTPレスポンスという。

HTTPリクエストには、[リクエスト行、リクエストヘッダ、ボディ部]が。HTTPレスポンスには、[ステータス行、レスポンスヘッダ、ボディ部]という、通信の内容が入っている。

では本題。どうやって非同期通信を実装するか。それはAjaxを使う。

Ajax

Ajaxとは　Javascriptにおける非同期通信を用いた手法のこと。 Ajaxは、Javascript自身がサーバーと通信し、同期通信のようにページ全体が切り替わるのではなく、ページの一部を書き換える事で、ユーザビリティ性の高さを実現している。

...

天気の情報を取得するWebAPIを使って、都市名を入力するとその都市の現在の気温などを非同期通信を用いて表示する機能を作る。

const API_KEY = '取得したAPI Key';

$(function() {
  $('#weather-form').on('submit', function(e) {
    var cityName = $(this).find('#weather-form-city').prop('value');
    $.ajax('http://api.openweathermap.org/data/2.5/weather?APPID=' + API_KEY + '&q=' + cityName)
      .done(function(data) {
        $('#form-error').css('display', 'none');
        $('#result-city-name').text(data.name);
        $('#result-temp').text(Math.round(data.main.temp - 273));
        $('#result-weather').text(data.weather[0].main);
        $('#result-datetime').text(Date(data.dt));
        $('#form-result').css('display', 'block');
      })
      .fail(function(data) {
        $('#form-spinner').css('display', 'none');
        alert('Something wrong occurred.');
      });
    e.preventDefault();
  });
});

簡単なところは省いて、新しくでた所だけ解説する。

const API_KEY = '取得したAPI Key';

ここでは天気の情報を取得するWebAPIから、それを利用するための"APIキー"を変数として定義する。

$.ajax('http://api.openweathermap.org/data/2.5/weather?APPID=' + API_KEY + '&q=' + cityName)

$.ajax('URL',オプションのオブジェクト)を使うことでURLにHTTPリクエストを投げかけることができる。cityNameで定義した都市の天気の情報を取得するには、上記のようなURLをとって、GETリクエストを投げかける事で可能となる。また、返り値としてjqXHRオブジェクトを返す

.done(function(data) {
       ~略~
      })
      .fail(function(data) {
      ~略~
      });

.doneメソッド、.failメソッドでそれぞれレスポンスに成功した時、しなかった時の処理をかく。

...

APIを用いた非同期通信の方法をまとめたけど、APIを用いないやり方も気になってきた。今度時間ある時記事にしよう。終わり。