はじめに
Webアプリを開発する上で、APIとの通信・連携は高頻度で発生します。JavaScriptでは、今までは「XMLHttpRequest 」が使われていましたが、現在ではよりシンプルな「fetch API」が主流です。
今回は、JavaScriptのfetchでAPI通信方法についてログとして記載していきたいと思います。
他にも、体系的にJavaScriptを学びたい方には以下の教材がおすすめです：
👉1冊ですべて身につくJavaScript入門講座（Amason）
👉 スラスラわかるJavaScript（Amazon）
fetchとは
fetchは、HTTPリクエストを行いレスポンスを受け取るための組み込み関数で外部とのAPI通信を簡単に行えます。従来は「XMLHttpRequest」を使用されていましたが、コードが冗長になりがちでした。
fetchをを使えば、シンプルな構文で非同期処理とも組み合わせやすく、GET/POST などのメソッドやヘッダー指定も簡単にできるため、fetchさえ覚えておけばOKです。
fetchの基本構文
fetchの基本形は以下になります。
fetch("https://selifemorizo.com/data.json")
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error("通信エラー:", error));- fetch(url)：指定したURLにリクエストを送信します
- response.json()：レスポンスをJSON形式に変換します（他に .text() や .blob() などもあり）
- .catch()：通信に失敗したときのエラーハンドリングを行います
GETリクエスト
GetリクエストをJSONPlaceholderへ投げてテストしていきたいと思います。
JSONPlaceholderはJsonデータを扱うテスト用のAPIサービスです。
async function getData() {
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);
}
}
getData();- response.ok：404や500などは通信自体は成功扱いになるので、明示的にエラー判定を入れます
- try…catch：エラーのハンドリングを実施します
POSTリクエスト
次は、PostリクエストをJSONPlaceholderへ投げてテストしていきたいと思います。
サーバへPostを実施する場合は、「method」と「body」を指定します。
async function postData() {
try {
const response = await fetch("https://jsonplaceholder.typicode.com/posts", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
title: "テスト投稿",
body: "テストの本文",
userId: 1
})
});
const result = await response.json();
console.log("送信結果:", result);
} catch (error) {
console.error("送信失敗:", error);
}
}
postData();- response.ok：404や500などは通信自体は成功扱いになるので、明示的にエラー判定を入れます
- try…catch：エラーのハンドリングを実施します
送信結果
{title: 'テスト投稿', body: 'これはテストの本文です', userId: 1, id: 101}
HTMLと組み合わせた例
APIから取得したデータをHTMLに組み込む例です。
ここでは「ユーザー一覧」を取得してリスト表示します。
html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<h2>ユーザー一覧</h2>
<script src="js/fetch.js" defer></script>
</head>
<body class="chapter-10"></body>
<ul id="userList"></ul>
</body>
</html>
JavaScript
async function loadUsers() {
try {
const response = await fetch("https://jsonplaceholder.typicode.com/users");
if (!response.ok) throw new Error("取得失敗");
const users = await response.json();
const list = document.getElementById("userList");
users.forEach(user => {
const li = document.createElement("li");
li.textContent = `${user.name} (${user.email})`;
list.appendChild(li);
});
} catch (error) {
console.error(error);
document.getElementById("userList").textContent = "データ取得に失敗しました";
}
}
loadUsers();
実行
最後に
JavaScriptの環境構築は、この記事を参照してみてください。
【JavaScript】VSCodeでJavaScriptを使用するための環境構築を実施する – SEもりのLog JavaScript
以上、ログになります。
これからも継続していきましょう！！
コメント