概要

実際のWebアプリでは、JSONファイルを直接読み込むのではなく、
APIエンドポイントからHTTPレスポンスとしてJSONを受け取り、
それをJavaScriptオブジェクトとして利用するケースがほとんどです。
UI描画やフロントエンドロジックに使われるJSONは、
最終的に必ずFE（フロントエンド）に入ります。

この記事では、

API経由でJSONを取得するとはどういうことか
HTTPレスポンスとJSONデータの違い
fetch / axios を使った基本的な取得方法
JSONデータをJavaScriptオブジェクトとして扱う流れ

を整理します。

目次

APIではJSONはファイルではない
HTTPレスポンスとJSONデータの違い
APIでJSONを取得する基本形
- fetchを使う場合
- axiosを使う場合
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で扱える状態になります。

参考リンク