【ITニュース解説】JS (Mastering the Fetch API: Modern JavaScript for HTTP Requests)

この記事は、JavaScriptでHTTPリクエストを扱うための現代的な方法であるFetch APIについて解説している。Fetch APIは、従来のXMLHttpRequest（AJAX）に比べて、よりシンプルで扱いやすいインターフェースを提供し、Promiseベースで非同期処理を記述できるため、モダンなJavaScript開発において重要な役割を果たす。

まず、従来のXMLHttpRequest（XHR）の問題点を理解しておくと、Fetch APIの利点がより明確になる。XHRは、Webページからサーバーにデータを要求したり、サーバーにデータを送信したりするために長年使われてきた技術だが、そのAPIは複雑で冗長になりがちだった。コード量が多くなり、エラー処理も煩雑になることが多かった。

Fetch APIは、これらの問題を解決するために導入された。最も大きな特徴は、Promiseを使用している点だ。Promiseは、非同期処理の結果（成功または失敗）を表現するオブジェクトであり、then()メソッドやcatch()メソッドを使って、処理が完了した後の動作を定義できる。これにより、コールバック地獄と呼ばれる、非同期処理が複雑にネストした状態を回避し、コードをより読みやすく、管理しやすくすることができる。

Fetch APIの基本的な使い方は、fetch()関数にリクエスト先のURLを渡すことから始まる。fetch()関数は、Promiseを返す。このPromiseは、サーバーからのレスポンスが正常に受信されたときに解決される。レスポンスオブジェクトには、ステータスコード（200 OK、404 Not Foundなど）、ヘッダー、そしてレスポンスボディが含まれている。

レスポンスボディを扱うには、いくつかのメソッドが用意されている。例えば、レスポンスがJSON形式の場合、response.json()メソッドを使用する。このメソッドもPromiseを返し、Promiseが解決されると、JSONデータがJavaScriptのオブジェクトとして利用可能になる。テキスト形式のレスポンスを扱う場合は、response.text()メソッドを使用する。

Fetch APIでは、GETリクエストだけでなく、POST、PUT、DELETEなどのHTTPメソッドもサポートされている。これらのメソッドを使用するには、fetch()関数の第2引数にオプションオブジェクトを渡す。オプションオブジェクトには、methodプロパティでHTTPメソッドを指定し、headersプロパティでHTTPヘッダーを指定し、bodyプロパティでリクエストボディを指定する。

例えば、JSONデータをPOSTリクエストで送信する場合、以下のようなコードになる。

Copy
1const data = { key1: 'value1', key2: 'value2' };
2
3fetch('https://example.com/api', {
4  method: 'POST',
5  headers: {
6    'Content-Type': 'application/json'
7  },
8  body: JSON.stringify(data)
9})
10.then(response => response.json())
11.then(data => {
12  console.log('Success:', data);
13})
14.catch(error => {
15  console.error('Error:', error);
16});

このコードでは、まず送信するJSONデータを作成し、それをJSON.stringify()メソッドで文字列に変換している。そして、fetch()関数のオプションオブジェクトで、methodを'POST'に、Content-Typeヘッダーを'application/json'に設定し、bodyにJSON文字列を渡している。

サーバーからのレスポンスを処理する部分では、response.json()メソッドでレスポンスボディをJSONとして解析し、その結果をconsole.log()で表示している。また、エラーが発生した場合は、catch()メソッドでエラーをキャッチし、console.error()でエラーメッセージを表示している。

Fetch APIは、クロスオリジンリクエスト（異なるドメイン間のリクエスト）もサポートしている。ただし、ブラウザのセキュリティポリシーであるCORS（Cross-Origin Resource Sharing）によって制限される場合がある。CORSを有効にするには、サーバー側で適切なHTTPヘッダーを設定する必要がある。

Fetch APIは、XMLHttpRequestに比べてシンプルで強力なAPIであり、モダンなJavaScript開発においてHTTPリクエストを扱うための標準的な方法となっている。Promiseベースであるため、非同期処理を効率的に記述でき、コードの可読性と保守性を向上させることができる。システムエンジニアを目指す初心者は、Fetch APIの使い方をマスターすることで、Webアプリケーション開発のスキルを大きく向上させることができるだろう。