【JavaScript】ajaxの非同期通信で外部APIを利用する方法【実践編】

ajaxの使い方の第二弾で今回は実践編となります。

気象庁の天気予報データを非同期通信で取得し画面に返す処理を例にajaxの実装方法を解説していきます。

気象庁の公表している情報は誰でも利用することができます。実際に利用する場合は利用規約も併せて確認してください。

また、前回の記事はこちらになります。導入方法や基本の使い方についてはこちらを参考にしてみてください。

: 【JavaScript】ajaxの使い方・非同期通信の方法【基本編】
jQueryやaxiosを使って非同期通信をする方法を解説

画面実装

まず画面側の実装をします。

今回は実装を簡略化するためプルダウンを用意し、プルダウンの選択でgetWeather()関数を呼び出し都道府県の天気予報を取得するようにします。

関数の引数に入る値は天気予報取得に使用する地域コードです。

コードは気象庁サイトのURLの末尾area_code=の部分で、各地域のリンクをクリックすることで調べることができます。

HTML

<select id="pref" onchange="getWeather(this.value)">
  <option value="130000">東京</option>
  <option value="011000">北海道</option>
  <option value="270000">大阪</option>
  <option value="400000">福岡</option>
  <option value="471000">沖縄</option>
</select>
<p>天気予報：<span id="weather"></span></p>

処理実装

気象庁サイトからjsonデータを取得します。

jsonファイルへのパスは「https://www.jma.go.jp/bosai/forecast/data/forecast/{code}.json」になります。

{code}の部分には画面側で実装したプルダウンのvalueが代入されます。

また、基本編でも触れましたが、ajax通信の実装方法はいくつか存在します。

この記事ではライブラリを使わない方法、jQueryやaxiosを使う方法をそれぞれ紹介します。

ライブラリを使わない場合

19行目のclient.open()メソッドでリクエストメソッドGETとリクエストURLを指定し、21行目のclient.send()メソッドでサーバー通信を行います。

サーバーから何らかの応答があると5行目のclient.onreadystatechangeプロパティ内の処理が呼ばれ、成功時に画面の要素を更新します。

JavaScript

const getWeather = (value) => {
  // XMLHttpRequestインスタンスを作成
  var client = new XMLHttpRequest();
  // サーバー応答時の処理を定義
  client.onreadystatechange = function() {
    // 通信完了時
    if (client.readyState == 4) {
      if (client.status == 200) {
        // 通信成功時
        // レスポンスデータをeval関数でフォーマット
        var data = eval('(' + client.responseText + ')');
        document.getElementById('weather').innerHTML = data.text;
      } else {
        // 通信失敗時
      }
    }
  }
  // リクエストを初期化
  client.open('GET', 'https://www.jma.go.jp/bosai/forecast/data/overview_forecast/' + value + '.json');
  // リクエストを送信
  client.send(null);
}

実際のサンプルがこちらになります。

See the Pen ajax3 by Usagi (@naniwa_usagi) on CodePen.

jQueryで実装する場合

ライブラリを導入すると、ajax処理をシンプルに記述することができます。

リクエスト成功時の処理はdone句に、失敗時の処理はfail句に記述します。

JavaScript

const getWeather = (value) => {
  $.ajax({
    type: 'GET',
    url: 'https://www.jma.go.jp/bosai/forecast/data/overview_forecast/' + value + '.json'
  })
  .done(function(data) {
    // 通信成功時
    $('#weather').html(data.text);
  })
  .fail(function() {
    // 通信失敗時
  });
}

jQueryで実装した場合のサンプルがこちらになります。

See the Pen ajax1 by Usagi (@naniwa_usagi) on CodePen.

axiosで実装する場合

axiosで実装する場合もjQueryの構造はほとんど同じです。

リクエスト成功時の処理はthen句に、失敗時の処理はcatch句に記述します。

細かい違いですが、jQueryと異なりresponse.dataにレスポンスデータが格納されている点に注意してください。

JavaScript

const getWeather = (value) => {
  axios({
    method: 'GET',
    url: 'https://www.jma.go.jp/bosai/forecast/data/overview_forecast/' + value + '.json'
  })
  .then(function (response) {
    // 通信成功時
    document.getElementById('weather').innerHTML = response.data.text;
  })
  .catch(function (error) {
    // 通信失敗時
  });
}

axiosで実装したサンプルがこちらになります。

See the Pen ajax2 by Usagi (@naniwa_usagi) on CodePen.

まとめ

ajaxを使って外部APIから非同期通信で情報を取得する方法について紹介しました。

実装サンプルでは分かりやすくするために記述しましたが、jQueryやaxiosにおいてGETリクエストの場合、リクエストメソッドの記述を省略することができますので、覚えておくといいでしょう。

今回は以上です。