概要
実際のWebアプリでは、JSONファイルを直接読み込むのではなく、
APIエンドポイントからHTTPレスポンスとしてJSONを受け取り、
それをJavaScriptオブジェクトとして利用するケースがほとんどです。
UI描画やフロントエンドロジックに使われるJSONは、
最終的に必ずFE（フロントエンド）に入ります。
この記事では、
- API経由でJSONを取得するとはどういうことか
- HTTPレスポンスとJSONデータの違い
-
fetch/axiosを使った基本的な取得方法 - JSONデータをJavaScriptオブジェクトとして扱う流れ
を整理します。
目次
- APIではJSONはファイルではない
- HTTPレスポンスとJSONデータの違い
- APIでJSONを取得する基本形
- FE / BE分離構成での基本フロー
- APIレスポンスを扱う際の注意点
- 全体の流れ
- 参考リンク
APIではJSONはファイルではない
次のようなJSONを見たことがあると思います。
{
"name": "Alice",
"age": 25
}
しかし、実際のWebアプリではこのようなJSONを
ファイルとして直接読み込むことはほとんどありません。
多くの場合、JSONは
/api/user/api/profile/api/settings
といった APIエンドポイントのHTTPレスポンスとして返されます。
つまり、
APIにおけるJSONは「ファイル」ではなく
「通信によって届くデータ」
という位置付けになります。
HTTPレスポンスとJSONデータの違い
APIからJSONを取得する際、
データは次の段階を経て扱われます。
HTTPレスポンス（JSON文字列）
↓
JSONデータ
↓
JavaScriptオブジェクト
| 段階 | 内容 |
|---|---|
| HTTPレスポンス | 通信結果（ステータス・ヘッダ・本文） |
| JSONデータ | アプリが扱うデータ形式 |
| JavaScriptオブジェクト | プロパティアクセス可能な状態 |
重要なのは、
HTTPレスポンスそのものと、
アプリが扱うJSONデータは同一ではない
という点です。
APIでJSONを取得する基本形
APIからJSONを取得する場合、基本的な流れは次の通りです。
- HTTPリクエストを送る
- HTTPレスポンスを受け取る
- JSONデータに変換する
この「JSONデータに変換する」役割を担うのが
fetch や axios です。
fetchを使う場合
const res = await fetch("/api/user"); // HTTPレスポンス
const data = await res.json(); // JSONデータ
console.log(data.name);
-
fetchはHTTP通信を行う -
res.json()により、レスポンスからJSONデータを取得する - 取得後は通常のJavaScriptオブジェクトとして扱える
axiosを使う場合
import axios from "axios";
const response = await axios.get("/api/user"); // HTTPレスポンス
const data = response.data; // JSONデータ
console.log(data.name);
-
responseはHTTPレスポンス全体 -
response.dataがJSONデータ部分 - 以降の扱いは
fetchと同じ
FE / BE分離構成での基本フロー
FE / BE を分離した構成では、
UIに使われるJSONは必ずFEに入ります。
基本的な流れは次の通りです。
[ Backend API ]
↓ HTTPレスポンス（JSON文字列）
[ Frontend ]
↓ JSONデータ
JavaScriptオブジェクト
↓
UI描画 / ロジック処理
- JSON文字列を生成するのはBE
- JSONデータに変換して使うのはFE
この分担を理解しておくことが重要です。
APIレスポンスを扱う際の注意点
HTTPエラーはJSON以前に処理する
if (!res.ok) {
throw new Error("API error");
}
- ステータスコードエラー
- 通信失敗
などは、JSON変換の前に確認します。
JSON構造は常に保証されているとは限らない
data.profile.address.city;
途中のプロパティが存在しない場合、
エラーになることがあります。
data.profile?.address?.city;
Optional Chaining を使うと安全です。
全体の流れ
最後に、この記事で扱った流れをまとめます。
APIエンドポイント
↓
HTTPレスポンス（JSON文字列）
↓
JSONデータ
↓
JavaScriptオブジェクト
↓
UI描画 / ロジック処理
この流れを押さえておけば、
API経由のJSONを正しく取得し、FEで扱える状態になります。