【JavaScript】Fetch APIでJSONデータの取得してみよう

javascript

さて、先日はFile APIを使ってCSVのファイルを読み込んで見ましたが、今度はJavascriptでFetch APIを使って JSONデータを読み込んでみようかと思います。
JSONデータは最近、実務でもちょくちょく出てくるんですよね。
で、JSONデータを読み込む時にFetch APIというのをネットでよく見ていたんですが、実際に使ったことがないので練習がてら実際に簡単なJSONデータを使って表示させてみようかと思います。
ただクロスドメインなどの問題もあるので自分のサーバーで試しました。

Fetch APIについて

そもそもFetch APIってなんだろう？て人もいるかと思うのでそこから調べてみました。

Fetch APIとは

ネットで調べればいくらでも情報はでてきますが、外部ファイルなど読みこむことができるWebブラウザの標準APIでXMLHttpRequestより強力なAPIという認識です。

Fetch API には (ネットワーク越しの通信を含む) リソース取得のためのインターフェイスが定義されています。XMLHttpRequest と似たものではありますが、より強力で柔軟な操作が可能です。

https://developer.mozilla.org/ja/docs/Web/API/Fetch_API

Fetch APIが対応しているブラウザは？

まさかのIEは全く対応していません。しかもモバイル版もです。IEは嫌いなのでいい加減滅びてほしいです。それ以外では大抵のブラウザでは対応している模様です。下記を参考にしてください。

Fetch APIが対応しているブラウザ

Fetch APIでJSONファイルを読み込んでみよう

それではさっそくJavascriptでFetch APIを使ってJSONファイルを読み込んでみます。一応今回のサンプルは下記になります。

Fetch APIでJSONデータの取得する

JSONファイル

一応、用意した簡易的なJSONファイル。このJSONファイルを使ってテーブルのように一覧表示します。

[[
  {
    "id": "1",
    "name": "青木優位",
    "email": "sthompson0@spotify.com",
    "gender": "男性"
  },
  {
    "id": "2",
    "name": "霧島隆",
    "email": "kirisima@usgs.gov",
    "gender": "男性"
  },
  {
    "id": "3",
    "name": "中島智子",
    "email": "nakajima@usgs.gov",
    "gender": "女性"
  },
  {
    "id": "4",
    "name": "鈴木洋子",
    "email": "suzuki@usgs.gov",
    "gender": "女性"
  },
  {
    "id": "5",
    "name": "佐藤隆",
    "email": "satou@usgs.gov",
    "gender": "男性"
  }
]

Javascript


//1: 基本的な書き方
fetch("sample.json")
.then(function (response) {

//2 : jsonメソッドでJSON形式にして返す
  return response.json();
}).then(function (myjson) {

//3:json形式のデータをWebページに出力する
  makeTable(myjson);
});

function makeTable(jsonlist) {
  var table_wrap = document.getElementById("json_disp");
  var table = "";
  table += "";
  //------------
  for (var i = 0; i < jsonlist.length; i++) {
    var linedata = jsonlist[0];
    table += "";
    table += "" + "" + "" + "";
    table += "";
  }
  //-----------
  table += "
ID名前性別EMAIL
" + jsonlist[i].id + "" + jsonlist[i].name + "" + jsonlist[i].gender + "" + jsonlist[i].email + "
";
  //要素に追加
  table_wrap.innerHTML = table;
}

１：基本的なfatchメソッドの書き方

上記のJavascriptを見ていただくと分かるかと思いますが、JSONファイルを取得するまでは下記のような流れが基本です。functionを使った場合とアロー関数を使った場合です。
*いろいろ細かく説明するととてつもない長くなってしまうので、あくまでJSONファイルを読み込んで表示することに焦点を当てています。


 //通常のバージョン
 fetch('URL', {
   method: 'GET'
 }).then(function (response) {
   return response.json();
 }).then(function (myjson) {
   consol.log(myjson);
 }).catch(function (error) {
   console.log(error);
 });
 //アロー関数の場合    
 fetch("URL", {
   method: 'GET'
 }).then((response) => {
   return response.json();
 }).then((myjson) => {
   console.log(myjson);
 }).catch((err) => {
   console.error(err);
 });

まずは fetchメソッドを呼び出して、第１引数にURL、第2引数に実はオプションが付けられています。上記の例だと「method」プロパティに「GET」としていますが、他にも「POST」などあります。ただ「GET」はデフォルトの状態なので、省略することができます。

またfetchメソッドは非同期処理が可能で 戻り値をPromiseオブジェクトとして返します。詳しくは「javascript promise」などと検索すれば出てきます。

２：jsonメソッドでJSON形式にして返す

fecthメソッドは Promiseの為、Promiseオブジェクトにあるthenメソッドで繋げて処理ができます。
*Promiseのthenメソッドについてはこちら

fetchメソッド実行した後はその結果をResponse オブジェクトとして受け取れます。その為thenメソッドでResponseオブジェクトを受け取っています。
変数は「response」としていますが、「res」とかでも大丈夫です。

このResponseオブジェクトにはデータを読み取る関数としてjsonメソッドがあります。jsonメソッドを使用することでResponseオブジェクトとして受け取ったデータをJSON形式として返す事ができます。
またJSONファイルをJavascriptJavascriptで扱う場合はparseメソッドでパースするのですが、どうやらResponseオブジェクトのjsonメソッドでは内部的にパースされてるようです。

ちなみに今回はJSONファイルだったのでjsonメソッドを使用しましたが、テキストを読み込みたい場合はtextメソッドもあります。
それ以外は、「 Response – Web API | MDN 」を参照してみてください。

3：JSON形式のデータをWebページに出力する

jsonメソッドを実行した後のthenメソッドでは、すでにパースされたJSONデータが取得できます。あとはこのデータをwebページに表として出力する為に関数にJSONデータを渡して処理しています。

まとめ

今回は、 XMLHttpRequest に変わると言われている？ Fetch APIを使ってJSONファイルを読みこんでみました。ただFecth APIは他にもたくさんの機能がるので一度では、勉強しきれませんね。あと深く理解するにはPromiseを勉強したほうがいいかも。