HTML+JavaScriptでこれから始める、REST APIを利用したアプリ開発
第3回目／Webサービスとブラウザをつなぐ機能「Fetch API」

2020年2月17日　TEXT：ニック

第２回目の記事では、REST API標準的なデータフォーマット「JSON」について書きました。今回は、REST API からデータを取得するための機能「Fetch API」について記述します。

Fetch APIとは

Web API を利用するためには、APIのエンドポイントへリクエストを送り、データの送受信を行う必要があります。

ブラウザからAPIへ通信を行う方法としてよく知られているのは XMLHttpRequest です。また、jQuery やAxios などのJavaScript ライブラリを利用する方法も広く使われています。

近年では、上記に加えて「Fetch API」が利用可能なブラウザが増えています。

Fetch APIは、jQueryのAjaxによく似た書式で通信ができ、XMLHttpRequest よりもシンプルな記述が可能なため、徐々に利用が広まっているAPIの一つです。

「fetch」とは、英語で「取ってくる、持ってくる、呼び出す」などの意味があります。Fetch APIを利用することで、文字通りネットワーク越しにデータを「取ってくる」ことができます。

Fetch API の書式

Fetch APIを利用して、REST APIからデータを取得する書式の例をご紹介します。

  fetch('APIのURL')

      .then(response => {

        return response.json();

      ).then(res => {

      console.log(res);

      }).catch(error => {

        console.log(error);

      });

Fetch APIのリクエストが成功すると、REST APIからレスポンスデータが返ってきます。

Fetch APIで取得したデータには、ステータス、ヘッダ、ボディが含まれます。上記のコードでは、レスポンスデータからボディのデータ＝JSONデータを取得して「res」に格納しています。

Fetch API でREST APIからデータを取得する

実際に、Fetch APIを利用して、REST APIからデータを取得してみましょう。第1回目の記事で紹介したGoogle Books APIから、古川日出男さんの「女たち三百人の裏切りの書」を例にとって、書籍名を取得してみましょう。

fetch('https://www.googleapis.com/books/v1/volumes?q=isbn:9784103060765')

      .then(response =>  {

        return response.json();

      }).then( res => {

console.log(res.items[0].volumeInfo.title);  
//  "女たち三百人の裏切りの書" と表示されます

      }).catch(error => {

        console.log(error);

      });

このコードでは、最初にGoogle Books APIのエンドポイントへリクエストを送り、レスポンスデータを取得します。

レスポンスデータには、ステータスコードやレスポンスヘッダなどの情報が含まれますが、ここではボディに含まれるJSONデータのみを取得しています。

最後に、JSONデータからタイトルが含まれているプロパティを指定して、タイトルをコンソールへ表示しています。

Promiseオブジェクトについて

ここで、JavaScript の Promise オブジェクトについて少しだけ触れます。

REST APIとの通信は、ネットワークの状況やサーバーの処理速度によって、データ受信までの時間が変化します。時には、APIとの通信に何十秒、何分という時間がかかる場合があります。

一方で、JavaScript は非同期で処理を行う言語です。データ取得に時間がかかる場合、REST APIからのデータ受信を待たずに次の処理に進み、正常にデータ処理ができない場合があります。

このような問題を避けるため、ECMAScript2015 から「Promise」という仕組みが実装されました。

Promiseオブジェクトを利用することで、REST APIからデータを取得できるのを待って、次の処理に進む、といった手順を守ることができるのです。

Fetch API は Promiseオブジェクトを返すため、REST API との通信終了を待ってから次の処理に進めることができます。上記のコードで「then」というコードが記述されいてますが、これは、REST API の受信処理終了後に次の処理を行うための記述となります。

ここでは原稿の都合上、紹介だけとなりますが、PromiseオブジェクトはJavaScriptを使いこなす上で、非常に大事な仕組みとなります。ぜひ時間を作って学習することをお勧めします。

参考情報

今回のまとめ

・「Fetch API」は、REST API とのデータのやり取りができる機能
・「Fetch API」で取得したデータを「then」でつなげてJSONデータを取得できる
・「Promise」オブジェクトを使うことで、JavaScriptの処理の順番を整理できる

freee も REST API を公開しています。

freeeと開発者が共同で運営しているユーザーコミュニティ「freee Open Guild」では会員を募集しています。不定期に開催しており、freee、API、そのほかの技術領域について勉強会を開催しています。

https://freee-platform.connpass.com/

登録は無料ですので、ぜひご登録ください！