【JavaScript】fetch APIで非同期通信を行う

非同期通信は、現代のウェブアプリケーション開発において欠かせないスキルの一つです。JavaScriptには非同期通信を行うためのいくつかの方法がありますが、今回はその中でも特に人気で使いやすいfetch APIに焦点を当てます。

fetch APIとは？
基本的な使い方
オプションと設定
エラーハンドリング
注意点と制限
まとめ

fetch APIとは？

fetch APIは、JavaScriptで非同期通信を行うためのモダンな方法です。このAPIを使用すると、リモートのサーバーからデータを取得したり、データを送信したりすることができます。fetchはPromiseベースのAPIであり、非常に読みやすく、使いやすいコードを書くことができます。

基本的な使い方

fetchの基本的な構文は非常にシンプルです。

fetch(url)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('エラー:', error));

fetch(url): 指定されたURLからリソースを非同期に取得します。
.then(response => response.json()): ネットワークリクエストが成功すると、Promiseが解決され、responseオブジェクトが返されます。このresponseオブジェクトから、.json()メソッドを使ってJSONデータを取り出します。
.then(data => console.log(data)): JSONデータが取得できたら、このデータを処理します。この例では、コンソールに出力しています。

オプションと設定

fetch APIは非常に柔軟であり、多くのオプションを設定することができます。

fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ key: 'value' })
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('エラー:', error));

ここではHTTPメソッドをPOSTに設定し、リクエストヘッダーとしてContent-Typeをapplication/jsonに設定しています。また、bodyには送信するデータをJSON形式で指定しています。

エラーハンドリング

何らかのエラー（ネットワークエラー、非存在のURLなど）が発生した場合には、.catch()ブロックが実行されます。

fetch(url)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('エラー:', error));

注意点と制限

fetchはブラウザの同一オリジンポリシーに従います。つまり、異なるオリジンへのリクエストを行う場合、そのサーバーがCORS（Cross-Origin Resource Sharing）をサポートしている必要があります。
旧式のブラウザではfetchがサポートされていない場合があります。その場合は、polyfillを使用するか、XMLHttpRequestを使用する必要があります。

まとめ

fetch APIは、非同期通信を行うための強力なツールです。その柔軟性と使いやすさから、多くの開発者に愛用されています。この記事で紹介した基本的な使い方と設定方法をマスターすれば、あなたも非同期通信のプロに一歩近づくでしょう。