JavaScriptでFetch APIを扱う方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでFetch APIを扱う方法について現役エンジニアが解説しています。Fetch APIとは、Ajaxなどに使う通信をまとめた機能のことです。JavaScriptのFetch APIを使ってJSONデータを取得する方法についてサンプルコードを使って解説します。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

JavaScriptでFetch APIを扱う方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使って初心者向けに解説します。

JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptでFetch APIを扱う方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

目次

 

Fetch APIとは

Fetchは「取ってくる」という意味の英単語です。APIはApplication Programming Interfaceの略で、平たく言うと「機能の集まり」のことです。

JavaScriptでは、通信などでデータを取ってくる処理をおこなうAPIとしてFetchというインターフェースが用意されています。
今まで通信をおこなう処理としてXMLHttpRequestを使ってものを、Fetch APIを使うことでより簡単に記述できるようになりました。

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

Fetch APIを扱う方法

alertやsetTimeoutなどと同様に直接fetch()と記述するだけで使えます。

第1引数にはURLの文字列かRequestオブジェクトを渡します。fetchは非同期で処理され、戻り値にResponseオブジェクトを取得できるPromiseオブジェクトを返します。

実際に書いてみよう

fetchを使うにあたり、データを取得する先が必要です。今回は、JSONデータを返してくれるサイトのJSON OKIBAからDEMOデータを返す下記のURLを使います。

https://jsondata.okiba.me/v1/json/demo01

Promiseを使った非同期処理や、通信のResponseのオブジェクトも出てきますが、fetchを使った処理はとてもシンプルな記述になっています。

fetch('https://jsondata.okiba.me/v1/json/demo01')
.then( response => response.json())
.then( jsonData => console.log(jsonData));

 

解説

1行目のfetch()では、データを取得するURLを指定しています。2行目では、.thenと記述することでfetchが返すPromiseオブジェクトにより、データ取得が終わった後に実行されます。

ここでは通信結果やURLなども含めたResponseオブジェクトから、取得したデータの中身だけを.json()メソッドで取り出しています。.jsonメソッドもPromiseオブジェクトを返します。

3行目では、.thenと記述することでjsonメソッドが返すPromiseオブジェクトにより、JSONとして解釈が終わった後に実行されます。ここでは、JSONデータをコンソールに表示しています。

まとめ

非同期処理の制御に使うPromiseや通信のResponseも使っていますが、それらを知らなくても使えるほどFetch APIは簡単に記述できるます。

筆者プロフィール

横山茂雄(よこやましげお)

フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。

言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

TechAcademyでは、初心者でも最短4週間で、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。