JavaScriptを使ったWebアプリケーション開発で必須となるのが、サーバーとの通信を行う非同期処理です。この非同期通信を実現するためのAPIの1つに、fetch()メソッドがあります。
fetch()は比較的新しいAPIですが、現在ではすっかり主流となり、Ajaxに代わる標準的な通信手段として広く使われています。しかし、非同期通信自体がよく分からないという方も多いのではないでしょうか。
本記事では、fetch()を使った非同期通信の仕組みをできる限り分かりやすく説明していきます。JavaScriptのfetch()の基本的な使い方から、Promiseを使ったエラーハンドリングまで、具体的なコード例を交えながら丁寧に解説します。
初心者の方でも、これを読めば非同期通信やfetch()への理解が深まるはずです。fetch()マスターへの第一歩を踏み出しましょう！
また、本記事の著者は以下のような経験を持っており、わかりやすくプログラミングを教えるプロですのでご安心ください！
- 現役のフルスタックWebエンジニアとして活躍中
- プログラミングスクールで教材を執筆した経験アリ
- 副業でプログラミングスクール講師をしている教育のプロ
そもそもfetch()とは？非同期通信との関係
fetch()の概要
fetch()とは、JavaScriptでサーバーとの通信を行うためのメソッドです。より具体的には、サーバーに対してHTTPリクエストを送信し、その結果（レスポンス）を受け取るのがfetch()の役割です。
従来はXMLHttpRequestという方法が使われてきましたが、記述が複雑で分かりづらいという問題がありました。一方、fetch()はよりシンプルで直感的な書き方ができるのが特徴です。
非同期通信とは
fetch()を理解するうえで外せないのが、非同期通信の概念です。
一方、同期通信はレスポンスが返ってくるまで他の処理はできずブロックされてしまいます。Webアプリでは通信中も操作を継続できる必要があるため、ほとんどの場合で非同期通信が用いられています。
fetch()の基本的な使い方
それでは、fetch()の具体的な使い方を見ていきましょう。まずは基本形から確認します。
fetch("https://example.com/api/endpoint")
.then(response => {
// レスポンスを処理するコード
})
.catch(error => {
// エラー処理
});fetch()の引数にはアクセスしたいURLを指定します。そしてレスポンスが返ってきたら、then()に記述したコールバック関数で処理を行います。
この時.then()と.catch()がつながっているのは、fetch()が返すのがPromiseオブジェクトだからです。
Promiseによる処理の流れ
fetch()の基本的な流れは以下の通りです。
- fetch()でHTTPリクエストを送信
- Promiseが返される（通信完了まで待機）
-
レスポンスが返ってきたら、
.then()の処理を実行- 成功すれば.then()の引数で結果を受け取る
- 失敗すれば.catch()に処理が移る
Promiseのおかげで、複雑な非同期処理もシンプルに記述できるようになりました。
レスポンスデータの取得
fetch()で得られるレスポンスは、そのままではデータとして扱えません。そこで、レスポンスデータを適切な形式に変換する必要があります。
よく使われるメソッドとしては、以下の4つがあります。
response.text()：レスポンスをテキストとして取得response.json()：レスポンスをJSONとして取得しパースresponse.blob()：レスポンスをBlobデータとして取得response.arrayBuffer()：レスポンスをArrayBufferとして取得
データの形式に合わせて使い分けましょう。例えばJSONデータを取得する場合は以下のようになります。
fetch("https://example.com/api/data")
.then(response => response.json())
.then(data => {
// JSONデータを使った処理
})
.catch(error => {
console.error(error);
});リクエストの設定とエラー処理
リクエストメソッドとヘッダの指定
fetch()は、デフォルトではGETリクエストを送信します。POST等の他のメソッドを使う場合は、fetch()の第2引数にオプションオブジェクトを指定します。
fetch("https://example.com/api/endpoint", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(data)
});このように、methodプロパティでHTTPメソッドを指定し、リクエストボディにはJSONにしたデータを渡しています。
エラーハンドリング
Promiseでは、.catch()を使ってエラー処理を記述します。例としては、以下のようなパターンが考えられます。
fetch("https://example.com/api/data")
.then(response => {
if (!response.ok) {
throw new Error(`${response.status} ${response.statusText}`);
}
return response.json();
})
.then(data => {
console.log(data);
})
.catch(error => {
console.error(error);
});response.okプロパティでレスポンスのHTTPステータスコードが200番台かどうかを判定し、そうでない場合は例外をthrowしています。そうすることで、.catch()に処理が移ります。
ネットワークエラー等、完全に通信が失敗した場合も同様に.catch()で受け取れます。想定されるエラーをきちんとハンドリングしておくのは、堅牢なコードを書くうえで重要なポイントです。
async/awaitを使った書き方
fetch()と非同期処理を扱う上で、Promiseのかわりにasync/awaitを使うこともできます。
async/awaitを使ったfetch()の基本的な書き方は以下のようになります。
async function fetchData() {
try {
const response = await fetch("https://example.com/api/data");
const data = await response.json();
console.log(data);
} catch (error) {
console.error(error);
}
}
fetchData();ポイントは以下の通りです。
- 関数にasyncをつける
-
非同期処理の前にawaitをつける
- fetch()とresponse.json()それぞれに必要
- awaitした処理が完了するまで、次の行には進まない
- try/catch文でエラー処理
async/awaitを使えば、then()の連鎖を使わずにすっきりと非同期コードを書けます。Promiseよりも直感的に理解しやすいでしょう。
まとめ
fetch()を使えば、JavaScriptで手軽にサーバーとの非同期通信を行うことができます。基本的な使い方は以下の通りです。
- fetch()の引数にURLを指定してリクエストを送信
- レスポンスに対して.then()や.catch()で処理
- response.json()等でデータを取得
- リクエストメソッドやヘッダも指定可能
- async/awaitで見やすいコードに
ただし、本記事で紹介したのはあくまで基礎的な内容です。実際のアプリ開発では、もっと複雑な処理が必要になることも多いでしょう。
fetch()は奥が深いAPIですが、基本をマスターすることが何より大切です。まずはシンプルな例からコードを書いて試してみて、理解を深めていきましょう。
JavaScript を挫折せず学習するならプログラミングスクールがおすすめ！
この記事を読んでくれた方は、JavaScript を学習中、もしくは使い始めている人かと思います。
ただ、JavaScript は「知らないと困る知識・コツ」が多く、私も最初は苦労しました…。
そのため確実に就職・転職を目指すのならばプログラミングスクールでの学習を検討してみませんか？
JavaScript はフロントエンドのすべてに通じますので、体系的に学んでおくと給与アップにもつながりますよ。
おすすめのプログラミングスクールについては、別の記事でまとめていますので是非ご覧ください。
現役のエンジニア兼プログラミングスクール講師として、自信を持っておすすめできるスクールだけを紹介しています！
