fetch APIは、JavaScriptで非同期にデータを取得・送信するためのメソッドです。以前は XMLHttpRequestが主流でしたが、fetchの方がシンプルで直感的に使えるため、現在では広く利用されています。fetch APIでは、以下のようなことができます。
- 外部 API からデータを取得する（例：天気情報、ニュース、ブログ記事など）。
- サーバーにデータを送信する（例：フォームデータの送信、ユーザー登録など）。
- JSON 形式のデータをやり取りする。
- 画像やファイルをアップロード・ダウンロードする。
fetch()メソッドを使うと、指定した URL に対してリクエストを送信し、レスポンスを取得できます。
JavaScript
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(response => {
console.log('レスポンスオブジェクト:', response);
return response.json(); // レスポンスを JSON 形式に変換
})
.then(data => {
console.log('取得したデータ:', data); // 取得したデータを出力
})
.catch(error => {
console.error('エラー:', error); // エラーが発生した場合の処理
});fetch(URL)でリクエストを送信。.then(response => response.json())でレスポンスをJSONに変換。.then(data => console.log(data))で取得したデータをコンソールに表示。.catch(error => console.error(...))でエラー処理を実装。
JavaScript
{
"userId": 1,
"id": 1,
"title": "サンプル記事",
"body": "この記事の内容です。"
}fetch()はPromiseを返すため、async/awaitを使うとコードがよりシンプルになります。
JavaScript
async function fetchData() {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
if (!response.ok) {
throw new Error(`HTTPエラー! ステータス: ${response.status}`);
}
const data = await response.json();
console.log('取得したデータ:', data);
} catch (error) {
console.error('エラー:', error);
}
}
fetchData();async function fetchData()を定義。await fetch(URL)でデータを取得。response.okをチェックしてエラー処理。await response.json()で JSON に変換。try...catchでエラーハンドリングを実装。
デフォルトのリクエストメソッドはGETです。
JavaScript
fetch('https://jsonplaceholder.typicode.com/posts')
.then(response => response.json())
.then(data => console.log(data));POSTメソッドでデータを送信するには、fetch()の第2引数に method、headers、bodyを指定します。
JavaScript
async function createPost() {
const newPost = {
title: '新しい記事',
body: '記事の内容',
userId: 1
};
const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(newPost)
});
const data = await response.json();
console.log('送信したデータ:', data);
}
createPost();method: 'POST'でリクエストの種類を指定。headersでContent-Typeをapplication/jsonに設定。bodyにJSON.stringify(newPost)でデータを文字列化して送信。
fetch()はネットワークエラーが発生してもrejectされません。response.okをチェックする必要があります。
JavaScript
async function fetchDataWithErrorHandling() {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/invalid-url');
if (!response.ok) {
throw new Error(`HTTPエラー! ステータス: ${response.status}`);
}
const data = await response.json();
console.log(data);
} catch (error) {
console.error('エラー:', error);
}
}
fetchDataWithErrorHandling();response.okがfalseの場合、エラーを投げる。catchブロックでエラーをキャッチ。- ネットワークエラーが発生した場合も考慮。
fetch APIは、JavaScriptで非同期通信を行う際に非常に便利な機能です。データの取得にはGETメソッド、データの送信にはPOSTメソッドを使用し、必要に応じてヘッダーやボディを適切に設定することが重要です。また、response.okをチェックすることで、ネットワークエラーやHTTPステータスエラーを適切に処理できます。fetch APIを活用すれば、外部 API（WordPress のWP REST APIなど）とのデータのやり取りがスムーズになり、より動的なWebアプリケーションを開発することが可能になります。
WP RESET API とは？ 
