fetchを書く前に理解したい API通信の基本
〜ブラウザとサーバーの通信の流れを整理する〜
Web開発を勉強していると、ReactやJavaScriptでこんなコードをよく見かけます。
fetch('/api/products')
でも最初の頃は、
- APIって何？
- なんで通信してるの？
- fetchって何をしてるの？
- request / responseって何？
と混乱しませんか？
自分も最初は「とりあえず書いてる」状態でした。
この記事では、
- API通信とは何か
- ブラウザとサーバーがどうやって通信しているのか
- fetchが何をしているのか
を初心者向けに整理していきます。
API通信って何？
簡単に言うと、
「ブラウザとサーバーがデータをやり取りすること」
です。
例えば、
- YouTubeで動画一覧を取得する
- ECサイトで商品を表示する
- SNSで投稿を取得する
- 天気情報を取得する
こういった処理は、ほとんどAPI通信で行われています。
なぜAPI通信が必要なの？
例えばECサイトを考えてみます。
ブラウザ側だけでは、
- 商品一覧
- 在庫情報
- ユーザー情報
などを持っていません。
そこで、
「商品データください！」
とサーバーにお願いする必要があります。
その時に使われるのがAPI通信です。
API通信の全体の流れ
まずは全体像を見てみます。
ブラウザ
↓ request（お願い）
サーバー
↓ response（返答）
ブラウザに表示
流れとしてはかなりシンプルです。
requestとは？
request（リクエスト）は、
「サーバーへのお願い」
です。
例えば、
「商品一覧をください」
というメッセージを送ります。
ブラウザは、
- どこのサーバーに送るのか
- 何が欲しいのか
- どんなデータを送るのか
をまとめて送信します。
responseとは？
response（レスポンス）は、
「サーバーからの返答」
です。
例えばサーバーは、
[
{
"name": "りんご",
"price": 100
},
{
"name": "みかん",
"price": 150
}
]
のようなデータを返します。
このデータを使って、画面に商品一覧を表示します。
JSONって何？
API通信では、JSONという形式がよく使われます。
JSONは、
「データをやり取りするための書き方」
です。
例えば：
{
"name": "りんご",
"price": 100
}
これは、
- name → 商品名
- price → 値段
を表しています。
JavaScriptと相性が良いため、Web開発では非常によく使われます。
fetchは何をしているの？
ここでようやく fetch が登場します。
例えば：
fetch('/api/products')
これは簡単に言うと、
「/api/products に通信してください」
という意味です。
つまりfetchは、
「API通信を行うための機能」
です。
fetchの流れ
実際にはこんな流れになります。
React
↓
fetch()
↓
APIサーバー
↓
JSONが返ってくる
↓
画面を更新
Reactアプリでは、この流れが非常によく使われます。
なぜ非同期なの？
API通信はすぐ終わるとは限りません。
例えば：
- サーバーが遠い
- 通信が混雑している
- データ量が多い
などの場合、時間がかかります。
もし通信が終わるまで画面を完全停止してしまうと、ユーザー体験が悪くなります。
そこでJavaScriptでは、
「通信を待っている間も画面を動かせる仕組み」
として非同期処理が使われます。
そのため、
- Promise
- async / await
などが登場します。
API通信で初心者がつまずきやすいポイント
URL間違い
fetch('/api/product')
と
fetch('/api/products')
では別物です。
通信失敗
サーバーが止まっていると取得できません。
JSONの扱い
レスポンスをそのまま使えず、
response.json()
が必要だったりします。
データ取得前に画面が表示される
非同期なので、
data.name
を書いた瞬間には、まだデータが存在しない場合があります。
そのため、
- loading管理
- nullチェック
などが必要になります。
まとめ
API通信は最初難しく感じますが、流れは意外とシンプルです。
ブラウザ
↓ request
サーバー
↓ response
ブラウザに表示
まずはこの全体像を理解すると、fetchのコードもかなり読みやすくなります。
最初は「とりあえずfetchを書く」状態でも大丈夫です。
少しずつ、
- request
- response
- JSON
- 非同期処理
の役割が分かってくると、一気に理解が進むと思います。