JSONはどうやって使われる？基本的な仕組みや活用例を解説

JSONはどうやって使われる？基本的な仕組みや活用例を解説 Web制作

JSONは、Webアプリケーションにおいて非常に重要な役割を果たすデータ形式の一つです。

Webアプリケーションでは、サーバーとクライアント間でデータをやり取りする際に、JSONがよく利用されます。
この記事では、JSONの基本的な仕組みや具体的な活用例を解説します。

JSONとは

JSON（JavaScript Object Notation）とは、データ形式の一つで、「JavaScriptのオブジェクトの書き方を元にしたデータを記述するためのルール」のことです。
データの受け渡しを行う際の書き方を定めたもので、”キー”と”値”のペアで構成されています。

＜JSONのファイル形式＞

{ 
    "title": "サービス概要", 
    "description": "このサービスは、ユーザーの利便性を高めるために設計されています。", 
    "features": ["簡単操作", "高いセキュリティ", "柔軟なカスタマイズ"] 
}

一方、JSONファイルの他にXMLファイルもよく出てきます。
XML（Extensible Markup Language）も同様に、データを記述するためのルールを指します。

＜XMLのファイル形式＞

<service>
    <title>サービス概要</title>
    <description>このサービスは、ユーザーの利便性を高めるために設計されています。</description>
    <features>
        <feature>簡単操作</feature>
        <feature>高いセキュリティ</feature>
        <feature>柔軟なカスタマイズ</feature>
    </features>
</service>

JSONはXMLよりもコンパクトで、使用する文字数が少ないです。データ量が軽量化されていることから、処理速度も速いとされています。
また、JavaScriptとの親和性が高く、多くのプログラミング言語でサポートされているため、Webアプリケーションでのデータ交換や保存に適しています。

JSONの特徴まとめ

  • 軽量で効率的：データ通信量が少ない
  • プログラム言語間の互換性：ほとんどのプログラム言語で簡単に扱える
  • 可読性の高さ：構造が単純で、編集や確認がしやすい

フロントエンドとバックエンドの連携

JSONを介してフロントエンドとバックエンドを連携することで、効率的で柔軟なWeb開発が可能になります。

＜JSONを使ったデータ通信の流れ＞

リクエスト送信フロントエンドがAPIを通じてバックエンドにデータを要求します。
レスポンス受信バックエンドはJSON形式でデータを返します。
画面更新フロントエンドは受け取ったJSONを解析し、動的にコンテンツを生成します。

具体例：商品リストの取得
フロントエンドがバックエンドに商品リストを要求した場合、以下のようなJSONが返されます。

{
  "products": [
    {
      "id": 1,
      "name": "プレミアムプラン",
      "price": 1200,
      "features": ["無制限のアクセス", "専用サポート"]
    },
    {
      "id": 2,
      "name": "スタンダードプラン",
      "price": 800,
      "features": ["基本機能", "月次レポート"]
    }
  ]
}

フロントエンド

データを受け取り、動的にHTMLを生成して画面に表示します。

JSONをHTMLに変換

受け取ったJSONを使って、動的にHTMLを生成します。

コード例：商品リストの描画

fetch('/api/products')
  .then(response => response.json())
  .then(data => {
    const productList = document.getElementById('product-list');
    data.products.forEach(product => {
      const item = document.createElement('li');
      item.innerHTML = `
        <h3>${product.name}</h3>
        <p>価格: ¥${product.price}</p>
        <ul>
          ${product.features.map(feature => `<li>${feature}</li>`).join('')}
        </ul>
      `;
      productList.appendChild(item);
    });
  });

動的なUI更新

サーバーからデータを取得し、その内容に応じてリアルタイムでページを更新します。

バックエンド

リクエストに応じてJSONとして返します。

必要なデータのみを提供

バックエンドは、リクエストに応じて必要最低限のデータをJSON形式で返します。
これにより通信量を削減し、処理速度を向上させます。

データ加工の例：リクエストで特定カテゴリの商品を指定した場合

{
  "products": [
    {
      "id": 3,
      "name": "エコノミープラン",
      "price": 500,
      "features": ["基本機能"]
    }
  ]
}

バックエンドでフィルタリング処理を行い、返すデータを絞り込むことで、フロントエンドの負荷を軽減します。
JSONを活用することで、フロントエンドとバックエンドのスムーズな連携が可能になり、効率的なデータ管理が実現します。

静的CMS・動的CMSとJSON

JSONはCMSのタイプによって、活用目的に違いがあります。静的CMSと動的CMSのそれぞれのケースにおける紹介します。

静的CMSの場合

静的CMSでは、サイト構築時にJSONが重要なデータソースとして機能します。以下の活用例があります。

データストア

JSONファイルをデータベースの代わりに使用し、ブログ記事や製品情報、イベントリストなどの構造化データを管理します。

例:

[
  { "title": "記事A", "date": "2025-01-01", "author": "山田太郎" },
  { "title": "記事B", "date": "2025-01-02", "author": "鈴木花子" }
]

テンプレートエンジンとの連携

JSONデータをテンプレートエンジン（例: LiquidやGoテンプレート）に取り込み、静的HTMLを生成します。

外部APIのデータ活用

APIから取得したデータをJSON形式で保存し、再ビルド時に活用します。たとえば、天気情報や最新の株価データをサイトに埋め込む際に利用されます。

柔軟な更新作業

JSONファイルを直接編集するだけでサイト全体を更新できるため、効率的かつ柔軟です。

動的CMSの場合

動的CMSでは、JSONは主にリアルタイムのデータや外部システムとの連携に活用されます。

REST APIの利用

JSONは動的CMSのREST APIの標準フォーマットとして使用され、フロントエンド（ReactやVue.js）とのデータ通信を支えます。
例:
APIエンドポイント /wp-json/wp/v2/posts がWordPressの投稿データをJSON形式で提供する。

動的データの管理

データベースから取得した情報をリアルタイムでJSONとして出力し、他のシステムやアプリケーションと連携します。

外部サービスとの連携

サードパーティのAPI（例: 決済、配送、マーケティングツール）とのデータのやり取りにJSONを使用します。

リアルタイム更新

WebSocketやAJAXを用いて、JSON形式でデータをクライアントに送信し、リアルタイムにページを更新します。

このように、JSONは、静的CMSでは主にデータストアとして、動的CMSではデータ交換や通信の中心的役割を果たします。

＜静的CMSと動的CMSの違い＞

JSON活用シーン役割
静的CMS主にビルドプロセスでJSONを利用。生成されるHTMLが固定的データソース、テンプレートエンジンとの連携
動的CMSサイト稼働中にJSONを利用し、動的にコンテンツを更新API通信、リアルタイムデータ管理

JSONの活用例

WebサイトにおけるJSON活用の表示例として、以下のような具体的なケースが挙げられます。

APIから取得したデータを表示

例えば、天気予報APIから取得したJSONデータを表示するケースです。

JSONデータの例：

{
  "city": "Tokyo",
  "temperature": 15,
  "condition": "Cloudy"
}

表示例（HTML）：

<div id="weather">
  <h2>東京の天気</h2>
  <p>気温: 15°C</p>
  <p>天気: Cloudy</p>
</div>

JavaScriptでデータを取得・表示するコード例：

fetch('https://api.example.com/weather')
  .then(response => response.json())
  .then(data => {
    document.getElementById('weather').innerHTML = `
      <h2>${data.city}の天気</h2>
      <p>気温: ${data.temperature}°C</p>
      <p>天気: ${data.condition}</p>
    `;
  });

製品情報をJSONで管理して表示

製品リストをJSON形式で管理し、動的にページ上に表示する例です。

JSONデータの例：

[
  { "name": "製品A", "price": 1000, "description": "高品質の商品です。" },
  { "name": "製品B", "price": 2000, "description": "コストパフォーマンスに優れています。" }
]

表示例（HTML）：

<div id="product-list"></div>

JavaScriptでデータを表示するコード例：

const products = [
  { "name": "製品A", "price": 1000, "description": "高品質の商品です。" },
  { "name": "製品B", "price": 2000, "description": "コストパフォーマンスに優れています。" }
];

const productList = document.getElementById('product-list');
products.forEach(product => {
  const productHTML = `
    <div class="product">
      <h3>${product.name}</h3>
      <p>価格: ¥${product.price}</p>
      <p>${product.description}</p>
    </div>
  `;
  productList.innerHTML += productHTML;
});

検索フィルター機能でJSONを活用

JSON形式で商品データを保持し、ユーザーが入力した条件に合うデータをリアルタイムでフィルタリングする例です。

JSONデータの例：

[
  { "id": 1, "name": "商品A", "category": "家電", "price": 5000 },
  { "id": 2, "name": "商品B", "category": "家具", "price": 15000 }
]

JavaScriptでデータを取得・表示するコード例：

const products = [
  { "id": 1, "name": "商品A", "category": "家電", "price": 5000 },
  { "id": 2, "name": "商品B", "category": "家具", "price": 15000 }
];

function filterProducts(category) {
  const filtered = products.filter(product => product.category === category);
  const productList = document.getElementById('product-list');
  productList.innerHTML = '';
  filtered.forEach(product => {
    productList.innerHTML += `
      <div class="product">
        <h3>${product.name}</h3>
        <p>価格: ¥${product.price}</p>
      </div>
    `;
  });
}

// 家電カテゴリの商品を表示
filterProducts("家電");

このように、静的CMSでも、JSONを活用することで動的なデータ管理やコンテンツの表示を行うことができます。

ユーザー体験を向上させるため、JSONとフロントエンド技術（HTML, CSS, JavaScript）を組み合わせて利用することが効果的です。

まとめ

JSONの基本的な仕組みや具体的な活用例について紹介しました。

JSONは、データ交換のための軽量で読みやすいテキストベースのフォーマットとして、Web開発において広く活用されています。

APIを通じてサーバーとクライアント間でデータをやり取りしたり、データベースのデータ形式として採用されたりと、活用の幅は多岐にわたります。

JSONを有効活用し、ユーザー体験の向上につなげていきましょう。

コメント

タイトルとURLをコピーしました