JavascriptのFetch APIを使ってJSONを取得する。

タイトルの通りだが、従来はJavascriptでJSONを取得する際は、XMLHttpRequestというものを使っていたらしい。fetch()メソッドはこのXMLHttpRequestの代替として、よりシンプルで強力な機能を実現してくれるようだ。

とりあえず、これを使ってJSONを取得して、画面に表示してみる。
今回は鉄道遅延情報のjsonというサイトを利用させていただく。

（本当はAppleのRSSジェネレータを使ってappstoreのランキングを取得しようと思ったのだが、CORSによるクロスドメインのエラーによってやる気を削がれてしまった。その件についても、後日書こうと思う。）

さて、遅延情報の取得に戻ろう。fetchを用いたjavascriptは以下の通り。

javascript

window.addEventListener('load', function() {
  getTrainList();
});

function getTrainList() {
  var url = 'https://tetsudo.rti-giken.jp/free/delay.json'; //遅延情報のJSON
  fetch(url)
  .then(function (data) {
    return data.json(); // 読み込むデータをJSONに設定
  })
  .then(function (json) {
    for (var i = 0; i < json.length; i++) {
      var train = json[i].name;
      var company = json[i].company;

      //表形式で遅延路線を表示する
      var row = document.getElementById('train-list').insertRow();
      row.insertCell().textContent = i + 1;
      row.insertCell().textContent = train;
      row.insertCell().textContent = company;
    }
  });
}

シンプルに、これだけ。上記のinsertRow().insertCell().textContentによって、列と行を追加し、JSONの値を詰め込んでいく。

index.html

    <h1>遅延路線</h1>
      <table id="train-list">
      </table>

シンプルに路線名と鉄道会社名のみを表示させた↓

ここにFetch APIの詳しい情報が載っています。
MDN web docs 〜Fetchを使う〜