JavaScriptでAPI通信を学ぶときに、最初によく出てくるのが fetch API です。結論からいうと fetch API は、JavaScriptからサーバーへリクエストを送り、レスポンスを受け取るための仕組み です。
ただ、初心者のうちは「APIとは何か」「GETとPOSTは何が違うのか」「なぜ response.json() が必要なのか」でつまずきやすいです。この記事では、その前提から順番に整理していきます。
結論: fetch API を理解するには「リクエスト」と「レスポンス」を押さえるのが先です
| 用語 | 意味 |
|---|---|
| API | アプリ同士でデータをやり取りするための窓口 |
| リクエスト | 「このデータをください」「このデータを送ります」とお願いすること |
| レスポンス | サーバーから返ってくる結果 |
| JSON | データをやり取りするときによく使う形式 |
まずは「fetch API の書き方」ではなく、「ブラウザからサーバーへお願いをして、その返事を受け取る」という流れをイメージすると理解しやすいです。
1. fetch API とは何か
fetch API は、ブラウザの JavaScript からサーバーへ通信するときに使う機能です。たとえば、ユーザー一覧を取得したり、フォームの内容を送信したりするときに使います。
基本の形はとてもシンプルで、URLを指定して fetch() を呼びます。
fetch("https://example.com/api/users");
ただし、これだけでは「通信を始めた」だけです。返ってきたデータを使うには、そのあとの処理も必要になります。
2. GET は「データを取得する」ときに使います
GET は、サーバーからデータを受け取るときによく使う方法です。たとえば「ユーザー一覧を取得したい」という場面です。
fetch("https://example.com/api/users")
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.log(error);
});
このコードは、次の順番で動いています。
fetch()でサーバーへリクエストを送る- 返ってきたレスポンスを
response.json()で JSON として読む - 読み取ったデータを
dataとして使う
初心者が混乱しやすいのは、response と data が別物だという点です。response は返事全体、data はその中身と考えるとわかりやすいです。
3. POST は「データを送る」ときに使います
POST は、サーバーへ新しいデータを送信したいときによく使います。たとえば、会員登録フォームの内容を送る場面です。
fetch("https://example.com/api/users", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
name: "田中",
age: 30
})
})
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.log(error);
});
POST では、次の3つをよく使います。
method: どんな種類の通信かを指定するheaders: データ形式を伝えるbody: 実際に送るデータを書く
JavaScriptのオブジェクトをそのまま送るのではなく、JSON.stringify() で文字列に変換して送る点も大切です。
4. エラー処理では response.ok も確認しましょう
fetch API では、通信自体は成功していても、HTTPの結果が 404 や 500 になることがあります。そのため、catch だけでなく response.ok も確認するのが安全です。
fetch("https://example.com/api/users")
.then(response => {
if (!response.ok) {
throw new Error("通信に失敗しました");
}
return response.json();
})
.then(data => {
console.log(data);
})
.catch(error => {
console.log(error.message);
});
ここは初心者が見落としやすいポイントです。「fetch が動いた」ことと、「欲しい結果が正しく返った」ことは別 だと覚えておきましょう。
5. async/await で書くとさらに読みやすくなります
fetch API は Promise を返すので、async/await と組み合わせることもできます。実務ではこちらの形で書くことも多いです。
async function loadUsers() {
try {
const response = await fetch("https://example.com/api/users");
if (!response.ok) {
throw new Error("通信に失敗しました");
}
const data = await response.json();
console.log(data);
} catch (error) {
console.log(error.message);
}
}
上から順番に読めるので、初心者でも処理の流れをつかみやすいです。
6. よくあるつまずき
response.json() の結果はその場ですぐ取れるわけではありません
response.json() も Promise を返します。だから then か await で受け取る必要があります。
POST で JSON.stringify() を忘れない
JavaScriptのオブジェクトをそのまま body に入れるのではなく、JSON文字列に変換して送るのが基本です。
catch だけで安心しない
通信エラーだけでなく、HTTPステータスの失敗も考えるなら response.ok の確認が必要です。
関連して読みたい記事
まとめ
fetch API は、JavaScriptでデータのやり取りをするうえでとても基本的な機能です。まずは「取得する」「送る」「エラーを確認する」の3つを丁寧に押さえるところから始めると理解しやすいです。