JavaScriptでFetch APIを扱う方法を現役エンジニアが解説【初心者向け】
初心者向けにJavaScriptでFetch APIを扱う方法について現役エンジニアが解説しています。Fetch APIとは、Ajaxなどに使う通信をまとめた機能のことです。JavaScriptのFetch APIを使ってJSONデータを取得する方法についてサンプルコードを使って解説します。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
監修してくれたメンター
永井浩平
バックエンド、フロント、クラウドなど幅広く業務を行う。
テックアカデミーでは、フロントエンドコース / Javaコースのメンター。
JavaScriptでFetch APIを扱う方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
目次
そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。
今回は、JavaScriptに関する内容だね！
どういう内容でしょうか？
JavaScriptでFetch APIを扱う方法について詳しく説明していくね！
お願いします！
はじめに
今回はJavaScriptでAPI通信をする際にとても便利なFetch APIについて説明します。
非同期通信を実装するには、jQueryで用意されているajaxが有名ですが、Fetch APIはより簡単にJavaScriptの標準機能のみで実装できます。
こちらの記事を参考に実装できるようになりましょう。
Fetch APIとは
Fetchは「取ってくる」という意味の英単語です。
APIはApplication Programming Interfaceの略で、平たく言うと「機能の集まり」のことです。
JavaScriptでは、通信などでデータを取ってくる処理を行うAPIとしてFetchというインターフェイスが用意されています。
今まで通信を行う処理としてXMLHttpRequestを使っていたところを、Fetch APIを使うことでより簡単に記述できるようになりました。
「外部APIなどから簡単に情報を取ってくる（連携する）機能」と押さえておきましょう。
Fetch APIを扱う方法
alertやsetTimeoutなどと同様に、直接fetch()と記述するだけで使えます。
第1引数にはURLの文字列かRequestオブジェクトを渡します。
fetchは非同期で処理され、戻り値にResponseオブジェクトを取得できるPromiseオブジェクトを返します。
実装は以下の通りです。
fetch('問い合わせ先のAPIなどのURL')
.then(/* 結果を取得した後の処理 */);問い合わせ後の処理は「.then」の()内に定義します。
主にJSONデータが返却される場合は、response.json()でJsonオブジェクトを解析し、後続の処理で値などを取得して処理を行うことが多いです。
参考：MDN
実際に書いてみよう
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データをコンソールに表示しています。
まとめ
非同期のAPI通信となると難しいイメージがあるかと思います。
Fetch APIでもPromiseや通信のResponseも使っていますが、それらを知らなくても使えるほどFetch APIは簡単に記述できます。
ぜひAPI連携の処理など実装できるように、こちらの記事を参考にしてみてくださいね。
内容が分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
JavaScriptを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
プログラミングを学習していて、このように思ったことはありませんか？
テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
