JSONとは？初心者でもわかる基礎概念と使い方を解説

Web開発•2025/1/21

JavaScript

JSONとは

皆さんはプログラミングやデータのやり取りで JSON という言葉を耳にしたことがあるでしょうか。

これはウェブ開発をはじめ、多様なシステム間でデータを交換する際によく利用されるデータ形式です。

プログラミング未経験の方や学習を始めたばかりの方にとっては、少し難しく感じられるかもしれません。

ただJSONは構造がシンプルなので、初期の段階から習得しておくと後々とても便利です。

ここでは初心者の皆さんにもわかりやすいように、JSONの概要や特徴、実務での利用例を紹介していきます。

ぜひ自分の開発や学習の参考にしてみてください。

JSONの概要と特徴

JSONは JavaScript Object Notation の頭文字を取った名称です。

元々はJavaScriptのオブジェクト表記法に由来していますが、現在はJavaScript以外の多くの言語でも扱われています。

データをキーと値の組み合わせで表現し、見た目がシンプルなので読み書きがしやすいという特長があります。

ウェブアプリケーションだけでなく、モバイルアプリやAPIのレスポンス、設定ファイルなど、あらゆる場面で使われることが多いです。

JSONには主に以下のような利点があります。

人が読んで理解しやすい
構造がシンプルなため、プログラムで操作しやすい
さまざまなプログラミング言語がサポートしている

これらの特長から、現在はXMLを置き換える形でデータ交換の中心的な形式として使用されることが増えています。

特にウェブ開発ではJavaScriptとの親和性が高いので、フロントエンドとバックエンドの通信に広く活用されています。

XMLから移行するケースもよく見かけますが、JSONの方が文字数が少なく、読み書きがわかりやすい場面が多いです。

JSONの具体的な書き方

JSONはキーと値のペアをで囲み、配列を [ ] で表現します。

文字列はダブルクォートで囲み、要素間はカンマで区切ります。

シンプルな例を見てみましょう。


{
  "name": "Tanaka",
  "age": 30,
  "likes": ["music", "coding", "coffee"],
  "isStudent": false
}

このように文字列、数値、配列、真偽値（true/false）のような要素を混在させて書けます。

キーと値が複雑になっても同じルールに基づいて記述します。

次に、オブジェクトの入れ子構造（ネスト）を含む例を示します。


{
  "user": {
    "id": 123,
    "profile": {
      "username": "tanaka_user",
      "language": "ja"
    }
  },
  "status": "active"
}

この場合、 user の中に別のオブジェクト profile が入っています。

深い階層を扱うときでも、の対応関係を守れば、わかりやすくデータを整理できます。

ただし、次のような形式はエラーとなるので注意しましょう。

文字列をシングルクォートで囲んだ
末尾にカンマが残った
キーをダブルクォートで囲まなかった

プログラミング言語の処理系によっては厳密にチェックされるので、初歩的なミスには気をつけたいところです。

プログラミング初心者にもわかる活用シーン

初心者の皆さんにとっては、JSONをどこで使うのかが気になるところでしょう。

ウェブアプリを例に挙げると、ブラウザ上のJavaScriptがサーバー側にデータを問い合わせるときに多用されます。

サーバー側から返されるレスポンスとしてJSONが送られてきて、ブラウザ側でそれを解析して画面に反映します。

JavaScriptの場合、以下のようなコードを書くことが多いです。


fetch("https://api.example.com/users/123")
  .then(response => response.json())
  .then(data => {
    console.log(data.name); // Tanakaなど
  })
  .catch(error => {
    console.error("通信エラー:", error);
  });

fetch 関数で取得したレスポンスを response.json() でパースすると、JavaScriptのオブジェクトとして扱えるようになります。

こうした仕組みによって、フロントエンドとバックエンドの間でデータをやり取りします。

シンプルに言うと、ウェブページの更新やアプリの動作に必要な情報をJSONで渡すのです。

また、設定ファイルとして利用されるケースもよく見かけます。

アプリ全体の設定をJSONでまとめておいて、それを読み込むと動作環境を切り替えられるようにするイメージです。

このような場面に触れる機会は、学習を進めていくうちに必ず出てくるでしょう。

実務での利用例

実務ではデータベースにJSON形式で情報を保管したり、APIの仕様をJSONでまとめたりすることがあります。

たとえばNoSQLデータベースの中にはJSONをそのまま保存できるものがあり、アプリケーションとの相性もいいです。

また、Back-end for Front-end (BFF) のような設計を行う場合、フロントエンドが受け取るデータの形式をJSONで統一しておくやり方が一般的です。

以下はNode.jsのExpressを使った簡単な例です。


const express = require("express");
const app = express();

app.get("/api/user/:id", (req, res) => {
  const userData = {
    id: req.params.id,
    name: "Tanaka",
    age: 30
  };

  res.json(userData);
});

app.listen(3000, () => {
  console.log("APIサーバーが起動しました");
});

ここでは /api/user/:id のエンドポイントにGETリクエストが来たとき、JSON形式のデータを返しています。

クライアントアプリやブラウザからアクセスすれば、サーバー側で生成されたJSONがレスポンスとして返される仕組みです。

このデータをフロントエンド側で受け取って、画面に表示したり、別の処理に利用したりします。

異なる言語同士でも問題なくやり取りできるのがJSONの大きな魅力です。

実務の場では「REST API」という言葉を耳にする機会が多いですが、そこで交換されるデータもほとんどがJSONとなっています。

そのため、覚えておくとプロジェクトでのコミュニケーションもスムーズになります。

まとめ

JSONはウェブ開発のみならず、広い範囲で使われています。

扱い方がシンプルなので、初心者の皆さんでも理解しやすい構造になっています。

キーと値を指定する書式や、ネスト構造の作り方を一通り押さえておけば、実務や学習において困ることが少ないでしょう。

加えて、JavaScriptやNode.jsだけではなく、PythonやJavaなどでも同じように読み書きが可能です。

データを共有するときにJSONを使うメリットは大きく、開発現場では欠かせない存在です。

無理なく慣れていくことで、今後のプログラミング学習に役立つでしょう。

わかりにくい点があれば、まずは書式の基本をしっかり確かめて、自分のコードが正しいかを確認してみてください。

JSONを理解していると、新しいプロジェクトに参加するときにもスムーズにキャッチアップできます。

これからプログラミングの勉強を深めていく際に、ぜひ活用してみてください。