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

JavaScriptでFetch APIを扱う方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

目次

• はじめに
• Fetch APIとは
• Fetch APIを扱う方法
• 実際に書いてみよう
• まとめ
• JavaScriptを学習中の方へ

そもそも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などから簡単に情報を取ってくる（連携する）機能」と押さえておきましょう。

[PR] コーディングで副業する方法とは

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サービス開発を学べます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！