JSONとは何かをJavaScriptとAPIで理解する

はじめに: JSONはAPIでよく使うデータ形式

Webアプリでは、ブラウザがサーバーからHTMLを受け取るだけでなく、データだけを受け取る場面があります。たとえば、記事一覧、ユーザー情報、検索結果、ログイン結果などをAPIから取得する場合です。

このようなAPI通信でよく使われるデータ形式がJSONです。JavaScriptから fetch() でAPIを呼び出し、サーバーからJSONを受け取って画面に表示する、という流れは実務でもよく出てきます。

JSONは見た目がJavaScriptのオブジェクトに似ているため、最初は同じものに見えるかもしれません。しかし、JSONは通信で使いやすい文字列形式であり、JavaScriptのオブジェクトそのものではありません。

この記事では、JSONの形、JavaScriptでの変換、API通信、PHPでJSONを返す例までをつなげて理解していきます。

JSONは、Web APIでデータをやり取りするときによく使われる軽量なデータ形式です。

JSONはデータをやり取りするための文字列形式

JSONは、JavaScript Object Notationの略です。名前のとおり、JavaScriptのオブジェクト表記に似た形でデータを書けます。

たとえば、記事データをJSONで表すと次のようになります。

{
  "id": 1,
  "title": "JSON入門",
  "published": true
}

キーと値の組み合わせでデータを表現しています。title は文字列、id は数値、published は真偽値です。

大切なのは、JSONが通信上では文字列として送受信されることです。サーバーからブラウザへ送られるHTTPレスポンスの本文に、JSON形式の文字列が入ります。JavaScriptでは、その文字列をオブジェクトとして扱える形に変換して使います。

JSONは特定の言語だけのものではありません。JavaScript、PHP、Python、Rubyなど、多くの言語で読み書きできます。そのため、ブラウザとサーバー、または外部サービス同士でデータをやり取りする形式として使いやすいのです。

JSONはJavaScriptのオブジェクトに似た見た目ですが、通信では文字列として送受信されます。

JSONの基本的な書き方

JSONでは、オブジェクト、配列、文字列、数値、真偽値、null を使ってデータを表現できます。

配列を含むJSONの例を見てみます。

{
  "user": {
    "name": "Sato",
    "age": 28
  },
  "skills": ["JavaScript", "PHP", "HTTP"],
  "active": true,
  "memo": null
}

user の値はオブジェクトです。skills の値は配列です。このように、JSONでは入れ子の構造を作ることもできます。

注意したいのは、JSONのキーはダブルクォートで囲む必要があることです。JavaScriptのオブジェクトではキーのクォートを省略できる場合がありますが、JSONでは省略できません。

また、JSONにはコメントを書けません。設定ファイルのように使う場面でも、JSONとして扱うならコメントなしで書く必要があります。

JSONでは、キーと値の組み合わせや配列を使って、構造を持ったデータを表現できます。

JavaScriptでJSONを扱う

JavaScriptでは、JSON文字列とオブジェクトを相互に変換できます。

JSON文字列をJavaScriptのオブジェクトへ変換するには、JSON.parse() を使います。

const jsonText = '{"id":1,"title":"JSON入門"}';

const article = JSON.parse(jsonText);

console.log(article.title);

JSON.parse() によって、文字列だったJSONをJavaScriptのオブジェクトとして扱えるようになります。そのため、article.title のようにプロパティへアクセスできます。

反対に、JavaScriptのオブジェクトをJSON文字列へ変換するには、JSON.stringify() を使います。

const article = {
  id: 1,
  title: "JSON入門",
};

const jsonText = JSON.stringify(article);

console.log(jsonText);

APIへJSONを送るときは、JavaScriptのオブジェクトをそのまま送るのではなく、JSON.stringify() でJSON文字列に変換します。

JavaScriptでは、JSON文字列をオブジェクトへ変換したり、オブジェクトをJSON文字列へ変換したりできます。

API通信とJSON

JavaScriptでAPIからJSONを受け取るときは、fetch() と response.json() をよく使います。

fetch("/api/articles")
  .then((response) => response.json())
  .then((articles) => {
    console.log(articles);
  });

response.json() は、レスポンス本文をJSONとして読み取り、JavaScriptで扱える値に変換します。APIが記事一覧を配列で返すなら、articles は配列として扱えます。

JSONを送信する場合は、Content-Type と body を指定します。

fetch("/api/articles", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    title: "JSON入門",
    body: "APIへJSONを送ります。",
  }),
});

Content-Type: application/json は、送信する本文がJSON形式であることをサーバーへ伝えるヘッダーです。body には、JSON.stringify() で文字列化したデータを入れます。

API通信では、JSONを受け取るだけでなく、JavaScriptからJSONとして送信する場面もあります。

PHPでJSONレスポンスを返す

PHPでは、配列を json_encode() でJSON文字列に変換できます。APIレスポンスとしてJSONを返す例を見てみます。

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

$article = [
    'id' => 1,
    'title' => 'JSON入門',
    'published' => true,
];

echo json_encode($article, JSON_UNESCAPED_UNICODE);

Content-Type: application/json; charset=UTF-8 は、このレスポンス本文がJSONであることをブラウザやクライアントへ伝えます。

json_encode() は、PHPの配列をJSON文字列へ変換します。JSON_UNESCAPED_UNICODE を指定すると、日本語が読みやすい形で出力されます。

JavaScript側では、このレスポンスを response.json() で受け取れます。つまり、PHPで作った配列がJSON文字列として送られ、ブラウザ側でJavaScriptの値として使えるようになります。

PHPでは、配列を json_encode() でJSON文字列に変換して、APIレスポンスとして返せます。

JSONで気をつけたいこと

JSONは扱いやすい形式ですが、いくつか注意点があります。

まず、JSONとJavaScriptオブジェクトは同じではありません。JSONは文字列として表現されるデータ形式です。JavaScriptで扱うには JSON.parse()、送るには JSON.stringify() が必要になる場面があります。

次に、JSONは構文に厳密です。キーをダブルクォートで囲まない、末尾に余分なカンマを付ける、コメントを書く、といったことをするとJSONとして読み込めません。

また、JSONには日付型のような専用の型はありません。日時は文字列として表現し、受け取った側で必要に応じて日付として解釈することが多いです。

APIで受け取ったJSONをそのまま信用しないことも大切です。想定した型か、必要な項目があるか、不正な値が入っていないかを確認してから使います。

JSONは扱いやすい形式ですが、構文の厳密さや受け取ったデータの検証には注意が必要です。

試験ではどう問われるか

基本情報技術者試験では、JSONはデータ交換形式として出てくることがあります。

押さえたいのは、JSONが構造化されたデータを表す形式だという点です。キーと値、配列、文字列、数値、真偽値などを使って、プログラムで扱いやすいデータを表現します。

XMLとの比較で出ることもあります。どちらもデータを表現する形式ですが、JSONはWeb APIで広く使われ、JavaScriptとの相性がよい形式として理解するとよいでしょう。

HTTPやAPIの文脈では、リクエストボディやレスポンスボディにJSONが入ることがあります。メソッドやステータスコードだけでなく、本文の形式にも注目すると問題文を読みやすくなります。

試験では、JSONを「構造化されたデータをやり取りするための形式」として理解することが基本です。

実務ではどう使われるか

実務では、JSONはAPI通信の中心的な形式としてよく使われます。

たとえば、JavaScriptで画面を表示しながら、APIから記事一覧やユーザー情報を取得する場面があります。サーバーはJSONを返し、ブラウザはそのJSONを読み取って画面に反映します。

フォーム送信でも、JSONを使うことがあります。従来のフォーム送信ではなく、JavaScriptからAPIへJSONをPOSTし、結果をJSONで受け取る作りです。

開発者ツールのNetworkタブでは、API通信のResponseやPayloadを確認できます。JSONの形を読めると、サーバーが何を返しているのか、JavaScriptが何を送っているのかを調べやすくなります。

設定ファイルや外部サービス連携でもJSONを見ることがあります。Webエンジニアにとって、JSONは読めるだけで調査や実装がかなり楽になる形式です。

実務では、JSONを読めると、API通信の中身やサーバーから返るデータを確認しやすくなります。

まとめ: JSONを理解するとAPI通信の中身が読める

JSONは、Web APIでよく使われる軽量なデータ形式です。JavaScriptのオブジェクトに似た見た目ですが、通信では文字列として送受信されます。

JavaScriptでは、JSON.parse() でJSON文字列をオブジェクトへ変換し、JSON.stringify() でオブジェクトをJSON文字列へ変換します。API通信では、response.json() や Content-Type: application/json もよく使います。

PHPでは、json_encode() を使って配列をJSON文字列に変換し、APIレスポンスとして返せます。ブラウザ側はそれをJavaScriptの値として扱えます。

JSONを理解すると、JavaScriptとサーバーがどのようなデータをやり取りしているのかを読み取りやすくなります。