【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ファイルを使ってテーブルのように一覧表示します。

Javascript

1:基本的なfatchメソッドの書き方

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

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

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

2: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を勉強したほうがいいかも。