JavaScriptのfetch API徹底解説：GET・POSTリクエストからエラー処理まで

バニラJavaScript（プレーンなJavaScript）だけでもWebリクエストを送信できることをご存知でしたか？そう、Webリクエストのためにはライブラリをインストールする必要は一切ありません。しかも、古くて複雑なXMLHttpRequestの話ではありません。

fetch APIを使えば、素のJavaScriptだけでAjaxリクエストを実行できます。サーバーからデータを取得したり、サーバー上のデータを更新したりするための便利なツールです。

このガイドでは、fetch APIとは何か、そしてこのAPIを使ってどのようにWebリクエストを送るのかを解説します。GETリクエストとPOSTリクエストの2つの例を通じて、実際の使い方を見ていきましょう。

fetch APIとは？

JavaScriptは昔からネットワークリクエストを送信することができました。かつてはXMLHttpRequestというツールが、サーバーからデータを取得して情報を更新するための手段として提供されていました。

このツールは有効でしたが、記述が冗長で使いこなすのが難しいという課題がありました。その点、fetchはよりシンプルにWebリクエストを実行できる新しい代替手段です。

fetch APIはすべてのモダンブラウザでサポートされています。つまり、一度使い方を覚えてしまえば、Webリクエストを送る際にブラウザ間の互換性を気にする必要はありません。

fetchでGETリクエストを送る方法

fetchの動作を理解する最も良い方法は、実際の例を見ることです。このチュートリアルでは、テスト用のダミーデータがあらかじめ用意されているWebサービス「JSONPlaceholder」を使用します。

次のコードは、JSONPlaceholderから最初の投稿を取得するGETリクエストを作成します。

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => response.json())
  .then(json => console.log(json))

このコードを実行すると、以下のような結果が返されます。

{ body: "quia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto", id: 1, title: "sunt aut facere repellat provident occaecati excepturi optio reprehenderit", userId: 1 }

コードを分解して見てみましょう。1行目ではfetch()メソッドを使って、JSONPlaceholder APIへのWebリクエストを開始しています。続いて.then()メソッドを使い、リクエスト完了後に実行する処理を指定しています。

最初の.then()メソッドでは、APIから返されたレスポンスをJSON形式に変換しています。これによりデータが読み取りやすくなります。さらに別の.then()メソッドで、そのレスポンスをコンソールに出力しています。これで、JSONPlaceholder APIからIDが1の投稿データが表示されるわけです。

POSTリクエストを送る方法

fetch APIで使えるのはGETリクエストだけではありません。POST、PUT、DELETEリクエストにも対応しています。これらの構文は基本的に同じなので、ここではPOSTリクエストの例を1つ見てみましょう。

POST・PUT・DELETEリクエストを送信する際には、通常以下の3つの情報を指定します。

• リクエスト先のURL
• 使用するHTTPメソッド（この場合はPOST）
• サーバーに送信したいデータ

次のコードスニペットは、JSONPlaceholder APIを使って新しいコメントを作成する例です。

const data = {
	name: "Leslie Tudor",
	email: "leslie.tudor@email.com",
	body: "This is an example post by Career Karma!",
	postId: 1
}

const options = {
	method: "POST",
	body: JSON.stringify(data),
	headers: {
		"Content-Type": "application/json"
	}
};

fetch('https://jsonplaceholder.typicode.com/comments', options)
  .then(response => response.json())
  .then(json => console.log(json))

このコードを実行すると、新しく作成された投稿がJSON形式で返されます。

{ body: "This is an example post by Career Karma!", email: "leslie.tudor@email.com", id: 501, name: "Leslie Tudor", postId: 1 }

コードの流れを確認してみましょう。まずdataオブジェクトを宣言し、サーバーに送信したいデータを格納しています。この例では、「Leslie Tudor」というユーザーが投稿したコメントに関するデータを送信しています。

次に、fetchリクエストに関連するオプションをまとめたオブジェクトを宣言します。このオブジェクトには、使用するメソッド（POST）、送信するデータ、そしてヘッダー情報が含まれています。

最後に、fetch()メソッドを使って実際にリクエストを送信します。最初の例と同様に、.then()メソッドでレスポンスを受け取り、JSONに変換してからコンソールに出力しています。

JavaScriptのfetchでエラーを処理する方法

残念ながら、すべてのWebリクエストが意図した通りに動作するとは限りません。データの構造が正しくない場合もあれば、サーバー側に問題がある場合もあります。こうした事態が発生したときに適切に対処できるよう、事前に備えておくことが重要です。

そこで活躍するのが.catch()メソッドです。コード内で発生したエラーを捕捉できます。Promise.reject()メソッドと組み合わせれば、次のようにエラーをハンドリングできます。

fetch('https://jsonplaceholder.typicode.com/comments/999', options)
  .then(response => {
	if (response.ok) {
		console.log(response.json());
		return response.json();
	} else {
		return Promise.reject({ statusText: response.statusText })
	}
})
.catch(error => console.log("ERROR:", error.statusText));

このコードを実行すると、以下の結果が返されます。

"ERROR:", "Not Found"

このコードでは、response.okプロパティを使ってリクエストが成功したかどうかをチェックしています。この例では、存在しないコメント（ID：999）を取得しようとしているため、elseブロックの中身が実行され、拒否されたPromiseが返されます。このPromiseには、JSONPlaceholder APIから返されたエラーメッセージが含まれています。

そして、.catch()ステートメントでそのエラーを受け取り、コンソールに出力しているという仕組みです。

まとめ

fetch APIを使えば、JavaScriptでのWebリクエストがとても簡単になります。fetch APIはバニラJavaScriptの一部なので、ライブラリをインストールしたり参照したりする必要はありません。さらに、GET、POST、PUT、DELETEリクエストにも対応しています。

これであなたも、プロの開発者のようにfetch APIを使ってWebリクエストを送れる準備が整いました！