【jQuery】JSONデータを取得・表示する完全ガイド｜$.getJSON・REST API・エラー処理・ローカルJSON・fetch比較まで

jQueryの $.getJSON() を使うと、REST APIや外部サービスからJSONデータを簡単に取得できます。この記事では$.getJSONの基本・REST APIからのデータ取得・DOM描画・エラー処理・ローカルJSONファイルの読み込み・fetchとの比較まで解説します。

$.getJSON() の基本的な使い方

// $.getJSON(url, callback) → レスポンスを自動でJSONパース
$.getJSON('/api/users', function (data) {
  console.log('取得データ:', data);
  console.log('件数:', data.length);    // 配列の場合
  console.log('名前:', data[0].name);   // オブジェクトのプロパティ
});

// Promiseチェーンで書く（推奨: エラーも処理できる）
$.getJSON('/api/users')
  .done(function (data) {
    console.log('成功:', data);
  })
  .fail(function (jqXHR, textStatus, errorThrown) {
    console.error('失敗:', jqXHR.status, errorThrown);
  });

REST APIからデータを取得してDOMに表示する

<ul id="user-list"><li id="loading">読み込み中...</li></ul>

$(function () {
  $.getJSON('https://jsonplaceholder.typicode.com/users')
    .done(function (users) {
      var $list = $('#user-list').empty();

      $.each(users, function (i, user) {
        var $li = $('<li>')
          .append($('<strong>').text(user.name))
          .append(' — ')
          .append($('<span>').text(user.email));
        $list.append($li);
      });
    })
    .fail(function () {
      $('#user-list').html('<li>データの取得に失敗しました</li>');
    });
});

ネストされたJSONデータの扱い

// 例: { "user": { "name": "山田", "address": { "city": "東京" } }, "posts": [...] }
$.getJSON('/api/profile')
  .done(function (data) {
    var user    = data.user;
    var city    = data.user.address.city;
    var posts   = data.posts; // 配列

    console.log(user.name, city);

    // 配列はeachで処理
    $.each(posts, function (i, post) {
      console.log(i, post.title);
    });

    // または JavaScript のmap/filter
    var titles = posts.map(function (p) { return p.title; });
    console.log('タイトル一覧:', titles);
  });

ローカルのJSONファイルを読み込む

Webサーバー経由でJSONファイルを読み込む方法です（file:// プロトコルでは動作しません）。

// サーバー上の /data/config.json を読み込む
$.getJSON('/data/config.json')
  .done(function (config) {
    console.log('設定値:', config.theme, config.language);
    applyConfig(config);
  })
  .fail(function (jqXHR) {
    if (jqXHR.status === 404) {
      console.error('設定ファイルが見つかりません');
    }
  });

$.getJSON / $.ajax / fetch の使い分け

まとめ

jQueryでJSONデータを取得する際のポイントをまとめます。

• 基本: $.getJSON(url) → .done()/.fail()
• DOM挿入: .text() を使ってXSSを防ぐ
• 配列データ: $.each() または .map() で処理
• ローカルJSONはサーバー経由で読み込む（file://は非対応）

関連記事: GETリクエストを送信する方法 / POSTリクエストを送信する方法 / 検索サジェスト機能の完全ガイド

よくある質問（FAQ）