fetch と JSON の基本をつかむ

フォームの回で「入力値を読み取って画面に表示する」パターンを覚えました。実際の Web アプリでは、表示するデータをサーバーから取得するのが一般的です。そのときに使うのが fetch（フェッチ）と JSON（ジェイソン）です。

引き続き VS Code とブラウザを使って確認します。

JSON とは

JSON は JavaScript Object Notation の略で、データをテキストで表す形式です。

{
  "id": 1,
  "name": "田中太郎",
  "email": "[email protected]"
}

波括弧 {} の中にキーと値のペアを並べます。Java の Map でキーと値をセットで持つのと構造は似ています。JSON は JavaScript だけでなく、ほとんどのプログラミング言語で読み書きできる共通フォーマットです。

配列を表すときは角括弧 [] を使います。

[
  { "id": 1, "name": "田中太郎" },
  { "id": 2, "name": "鈴木花子" }
]

Java の ArrayList に複数のオブジェクトを入れたイメージです。

fetch の最小形

fetch はブラウザに組み込まれた関数で、指定した URL からデータを取得します。

fetch('https://jsonplaceholder.typicode.com/users/1')
  .then(function(response) {
    return response.json();
  })
  .then(function(data) {
    console.log(data.name);
  });

処理の順番を整理します。

fetch(URL) — サーバーにリクエストを送る
.then(function(response) { ... }) — レスポンスが返ってきたら JSON に変換する
.then(function(data) { ... }) — 変換されたデータを使う

then は「～が終わったら次に」という意味です。ネットワーク通信には時間がかかるため、完了を待ってから次の処理を実行する仕組みになっています。この「あとで結果を受け取る」仕組みを非同期処理と呼びます。

JSONPlaceholder を使ってみる

練習用の無料 API として JSONPlaceholder を使います。ブラウザのアドレスバーに次の URL を入力すると、JSON データが表示されます。

https://jsonplaceholder.typicode.com/users/1

これは「1番のユーザー情報を JSON で返す」API です。この API を fetch で呼び出し、画面に表示してみます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>fetch の練習</title>
</head>
<body>
  <h1>ユーザー情報</h1>
  <p id="user-info">読み込み中...</p>

  <script>
    const info = document.getElementById('user-info');

    fetch('https://jsonplaceholder.typicode.com/users/1')
      .then(function(response) {
        return response.json();
      })
      .then(function(data) {
        info.textContent = data.name + ' (' + data.email + ')';
      });
  </script>
</body>
</html>

ブラウザで開くと「読み込み中…」が一瞬表示されたあと、ユーザーの名前とメールアドレスに置き換わります。

fetch 前：「読み込み中…」が表示される fetch 前：「読み込み中...」が表示される

fetch 完了後：ユーザー情報に置き換わる

配列データをリストで表示する

複数件のデータを取得してリストに表示するパターンです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ユーザー一覧</title>
</head>
<body>
  <h1>ユーザー一覧</h1>
  <ul id="user-list"></ul>

  <script>
    const list = document.getElementById('user-list');

    fetch('https://jsonplaceholder.typicode.com/users')
      .then(function(response) {
        return response.json();
      })
      .then(function(users) {
        for (let i = 0; i < users.length; i++) {
          const li = document.createElement('li');
          li.textContent = users[i].name;
          list.appendChild(li);
        }
      });
  </script>
</body>
</html>

取得した全ユーザーがリスト表示される

ポイントを整理します。

document.createElement('li') — <li> 要素を新しく作る
list.appendChild(li) — 作った要素を <ul> の子要素として追加する
users[i].name — 配列の i 番目の要素から name プロパティを読む

Java で ArrayList をループして中身を取り出す処理と構造は同じです。「取り出す → 加工する → 画面に追加する」の繰り返しです。

エラーを扱う

ネットワークの問題などで通信が失敗することがあります。前のコードに .catch を追加するとエラーを受け取れます。

fetch('https://jsonplaceholder.typicode.com/users')
  .then(function(response) {
    return response.json();
  })
  .then(function(users) {
    // 表示処理
  })
  .catch(function(error) {
    console.log('通信エラー: ' + error.message);
  });

Java の try-catch と役割は同じです。正常系は then で処理し、異常時は catch で処理します。

フロントエンドの全体像を振り返る

ここまで扱った技術の関係をまとめます。

技術	役割	Java との対応
HTML	画面の構造を作る	—
CSS	見た目を整える	—
DOM 操作	画面の要素を読み書きする	オブジェクトのフィールド操作
イベント	ユーザー操作に反応する	イベントリスナー的な考え方
フォーム + `.value`	入力値を受け取る	`Scanner` で入力を受け取る
fetch + JSON	サーバーからデータを取得する	— （Spring Boot で接続側を作る）

次の回へ

次はサーバー側で扱うデータベースと SQL の基本に入ります。そのあと Spring Boot の回で、今回学んだ fetch と JSON を使ってフロントエンドとサーバーをつなぎます。