【DevTools Network入門】fetch通信でPHPから返るJSONを見てみる

今回やること

前回は、JavaScriptの抽選ロジックをPHP側へ移しました。

JavaScriptはおみくじ結果を自分で決めるのではなく、fetch() を使って omikuji.php に結果を取りに行く形にしました。

今回は、その通信をDevToolsのNetworkタブで観察します。

個人的には、このNetworkタブがかなり面白いところです。

なぜなら、画面だけを見ていると見えない「ブラウザとサーバーの会話」が、そのまま見えるからです。

ボタンを押す
↓
JavaScriptがPHPへ通信する
↓
PHPがJSONを返す
↓
JavaScriptが結果を画面に表示する

この流れを、Networkタブで目で見て確認します。

今回のゴール

今回のゴールは、以下です。

• DevToolsのNetworkタブを開ける
• ボタンを押した時の通信を見つける
• omikuji.phpへのリクエストを確認する
• PHPから返ってきたJSONレスポンスを見る
• Status Code 200 の意味を知る
• Headers / Preview / Response の役割をざっくり理解する
• 画面表示の裏で通信が起きていることを体験する

今回も、最初から全部覚える必要はありません。

まずは「ボタンを押したら裏で通信が発生している」という事実を体験できれば十分です。

Networkタブとは何か

Networkタブは、ブラウザが行っている通信を見るための場所です。

Webページを開いた時、ブラウザはHTML、CSS、JavaScript、画像、PHPやAPIなど、いろいろなファイルやデータを取りに行っています。

Networkタブでは、それらの通信を一覧で確認できます。

今回注目するのは、omikuji.php への通信です。

DevToolsでNetworkタブを開く

まず、おみくじアプリをブラウザで開きます。

次に、DevToolsを開きます。

• 右クリックして「検証」
• または F12
• または Ctrl + Shift + I

DevToolsが開いたら、上部のタブから Network を選びます。

Networkタブを開いた状態で、おみくじボタンを押します。

すると、通信一覧に omikuji.php が表示されるはずです。

もし表示されない場合は、Networkタブを開いたままページを再読み込みしてから、もう一度ボタンを押してください。

通信を見る前にログを消しておく

Networkタブには、ページを開いた時のHTML、CSS、JavaScriptなどの通信も表示されます。

そのままだと少し見づらいので、確認前にログを消しておくと見やすくなります。

Networkタブの左上付近にあるクリアボタンを押すと、通信一覧を空にできます。

その状態でおみくじボタンを押すと、今回見たい omikuji.php の通信を見つけやすくなります。

Networkタブを開く
↓
通信ログをクリアする
↓
おみくじボタンを押す
↓
omikuji.php の通信を見る

omikuji.phpへの通信を見つける

おみくじボタンを押すと、Networkタブに omikuji.php が出てくるはずです。

これは、JavaScriptの以下のコードが実行された結果です。

const response = await fetch('omikuji.php');

fetch('omikuji.php') は、ブラウザから omikuji.php に対して通信する命令です。

つまり、Networkタブに omikuji.php が出てきたら、JavaScriptからPHPへの通信が実際に起きている証拠です。

Status Code 200を確認する

omikuji.php の通信をクリックすると、詳細が見られます。

まず見たいのは、Status Codeです。

Status Codeが 200 なら、通信は成功しています。

今回は 200 が出ていればOKです。

もし 404 なら、omikuji.php のファイル名や置き場所が間違っている可能性があります。

もし 500 なら、PHPコードの中でエラーが起きている可能性があります。

Headersを見る

Networkの詳細画面には、Headers というタブがあります。

Headersでは、リクエストやレスポンスの基本情報を確認できます。

最初は難しく見えるかもしれませんが、今回見るポイントは少しだけです。

• Request URL：どこへ通信したか
• Request Method：GETかPOSTか
• Status Code：成功したか
• Content-Type：どんな形式のデータが返ってきたか

今回の通信では、おそらく Request Method: GET になっています。

これは、JavaScriptの fetch('omikuji.php') が、特に指定しない場合はGET通信になるためです。

また、PHP側で以下のヘッダーを指定していました。

header('Content-Type: application/json; charset=UTF-8');

そのため、レスポンスはJSONとして扱われます。

PreviewでJSONを見る

次に、Preview タブを見ます。

Previewでは、返ってきたデータをブラウザが見やすい形で表示してくれます。

今回なら、次のようなデータが見えるはずです。

{
  "fortune": "大吉"
}

この fortune が、PHP側で決めたおみくじ結果です。

JavaScript側では、このデータを受け取って data.fortune として使っています。

【ここに Highlighting Code Block：response.jsonでJSONを読む行（JavaScript）】

const data = await response.json();

Responseで生の返却内容を見る

Response タブでは、PHPから返ってきた生のデータを確認できます。

Previewは見やすく整形された表示、Responseはよりそのままの表示、というイメージです。

今回のようなJSONなら、Responseにも以下のような内容が表示されます。

{"fortune":"大吉"}

ボタンを押すたびに、返ってくる結果が変わることがあります。

これは、PHP側で毎回ランダム抽選しているからです。

画面表示と通信結果をつなげる

ここで、画面表示と通信結果をつなげて考えます。

NetworkでPHPから返ってきたJSONが、たとえば以下だったとします。

{"fortune":"中吉"}

その場合、JavaScriptは data.fortune から 中吉 を取り出し、画面に表示します。

PHPから返るJSON
↓
JavaScriptが読む
↓
画面に表示する

つまり、画面に表示されている結果は、PHPから返ってきたレスポンスをもとに作られています。

ここが見えると、Webアプリの理解が一気に進みます。

JavaScript側の処理をもう一度見る

今回のJavaScriptは、以下の流れで動いています。

const resultText = document.getElementById('result');
const drawButton = document.getElementById('draw-button');

/**
 * PHP側におみくじ結果を取りに行き、画面へ表示する
 *
 * @returns {Promise<void>}
 */
async function drawFortune() {
  resultText.textContent = '抽選中...';

  try {
    const response = await fetch('omikuji.php');

    if (!response.ok) {
      resultText.textContent = '通信に失敗しました';
      return;
    }

    const data = await response.json();

    resultText.textContent = data.fortune;
  } catch (error) {
    resultText.textContent = 'エラーが発生しました';
    console.error(error);
  }
}

drawButton.addEventListener('click', drawFortune);

この中で、通信の中心になるのは以下です。

const response = await fetch('omikuji.php');

そして、返ってきたJSONを読むのが以下です。

const data = await response.json();

最後に、画面へ表示しています。

resultText.textContent = data.fortune;

Networkタブを見ることで、このJavaScriptの処理がただの文字ではなく、実際にブラウザとサーバーの通信として動いていることがわかります。

PHP側の処理ももう一度見る

PHP側では、おみくじ結果を決めてJSONを返しています。

<?php

/**
 * omikuji.php
 *
 * 役割：
 * - サーバー側でおみくじ結果をランダムに決める
 * - 結果をJSON形式でブラウザへ返す
 */

$fortunes = ['大吉', '中吉', '小吉', '吉', '凶'];

$random_index = array_rand($fortunes);
$selected_fortune = $fortunes[$random_index];

$response = [
    'fortune' => $selected_fortune,
];

header('Content-Type: application/json; charset=UTF-8');

echo json_encode($response, JSON_UNESCAPED_UNICODE);

特に重要なのは、この部分です。

header('Content-Type: application/json; charset=UTF-8');

echo json_encode($response, JSON_UNESCAPED_UNICODE);

これは、PHPがブラウザに対して「これはJSON形式のデータです」と伝えたうえで、結果を返しているということです。

JavaScriptはそのJSONを受け取り、画面表示に使っています。

GET通信とは何か

今回の fetch('omikuji.php') は、GET通信です。

GET通信は、ざっくり言うと「データを取りに行く通信」です。

今回のおみくじは、ブラウザからPHPに「結果をください」と取りに行っているのでGETで十分です。

次のフォーム編に入ると、ユーザーが入力した内容をサーバーに送るため、POST通信が出てきます。

Networkタブで見ると理解しやすいこと

Networkタブを見ると、Webアプリがどのように動いているかがかなり見えます。

• どのファイルに通信しているか
• GETなのかPOSTなのか
• 通信が成功しているか
• どんなデータが返ってきたか
• JavaScriptがどのレスポンスを使って画面を変えているか

画面だけを見ていると、何となくボタンを押したら結果が出たように見えます。

しかしNetworkを見ると、裏側でブラウザとサーバーが会話していることがわかります。

個人的には、このNetworkタブが一番好きです。

理由は、Webアプリの裏側の流れが一気に見えるからです。

今回よくあるエラー

今回つまずきやすいポイントも整理しておきます。

エラーが出た時は、画面だけを見るのではなく、ConsoleとNetworkを両方見るのが大事です。

今回わかったこと

今回は、DevToolsのNetworkタブを使って、JavaScriptからPHPへの通信を確認しました。

学んだことは以下です。

• Networkタブではブラウザの通信を確認できる
• fetchを実行するとNetworkに通信が表示される
• omikuji.phpへの通信を見ればPHPとのやり取りがわかる
• Status Code 200は通信成功を表す
• Headersでは通信の基本情報を確認できる
• PreviewやResponseではPHPから返ってきたJSONを確認できる
• GET通信はデータを取りに行く通信である
• 画面表示の裏ではブラウザとサーバーが会話している

ここまで理解できると、Webアプリの見え方が変わります。

画面だけでなく、通信を見る。

これができると、フロントエンドとバックエンドのつながりがかなり理解しやすくなります。

次回予告

次回は、ここまでのおみくじ編を一度整理します。

JavaScriptだけで作ったおみくじ、DevToolsで見えた危険、PHPへ移した抽選処理、Networkで見た通信をまとめます。

次回のテーマは、以下です。

【まとめ】なぜ重要な処理はサーバー側に置くべきなのか

作る、壊す、覗く、守る。

この流れを一度整理してから、次のフォーム編へ進みます。