---
title: "JSONとは？データをやり取りする共通フォーマットの基礎"
description: "Webサービス間でデータをやり取りするときに広く使われる共通フォーマットがJSONです。なぜこれほど普及したのか、正しい書き方とJavaScriptでの扱い方、ありがちな間違いまでを初めての人向けにまとめます。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/json-term"
markdown: "https://giga-site.com/articles/json-term/index.md"
category: "用語解説"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# JSONとは？データをやり取りする共通フォーマットの基礎

Webサービスやアプリの裏側では、絶えずデータがやり取りされています。その共通言語として広く使われているのがJSONです。なぜこれほど普及したのか、どう書くのか、扱うときの注意点は何かを、はじめての人にもわかるように整理して解説します。

> Source HTML: https://giga-site.com/articles/json-term
> Article index: https://giga-site.com/articles/index.md

## JSONとは

JSONはJavaScript Object Notationの略で、データを構造化して表現するためのテキスト形式です。名前にJavaScriptとありますが、今では言語を問わず幅広く使われる共通のフォーマットになっています。

人が読んでも意味がわかりやすく、コンピュータでも処理しやすいのが特徴です。サーバーとブラウザの間でデータをやり取りするときや、設定ファイルの記述などに頻繁に登場します。

## キーと値で表す仕組み

JSONの基本は「キー」と「値」の組み合わせです。たとえば名前というキーに対して具体的な名前の文字列を結び付ける、という形でデータを表現します。一つの情報に名札を付けて整理するイメージです。

値には文字列、数値、真偽値のほか、複数の値を並べた配列や、さらに入れ子になった構造を入れられます。これにより、住所や注文一覧のような複雑なデータも木のように表現できます。

## 実務ではどこで関係する？

JSONは言葉の意味だけ覚えても、HTML共有の判断にはつながりません。実務では「表示に関係する話か」「検索に関係する話か」「アクセス制限に関係する話か」を分けて考えると整理しやすくなります。

JSONについて迷ったら、相手が安全に開けるか、検索に出してよいか、ブラウザや環境差で壊れないかを順番に確認します。用語理解は、その判断を早くするための道具として使います。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。

- 表示の話: HTML/CSS/JS、パス、ブラウザ互換性を確認する
- 検索の話: noindex、canonical、sitemap、robots.txtの役割を分ける
- 制限の話: URL共有、パスワード、メール認証、会社ドメイン認証を混同しない
- 運用の話: 期限、差し替え、削除、共有メッセージまで決める

## 書き方のルール

JSONはルールが厳格で、少しの違反でも読み込めなくなります。正しく書くための基本ポイントを押さえておきましょう。

1. 全体を波かっこで囲み、キーと値の組を並べる
2. キーは必ずダブルクォートで囲んだ文字列にする
3. 文字列の値もダブルクォートで囲む
4. 複数の組はカンマで区切り、最後の要素の後ろにカンマを付けない
5. コメントは書けないため、説明は別の場所に残す

## JavaScriptとの相性

JSONはJavaScriptのオブジェクトの書き方によく似ているため、相互に変換しやすいのが利点です。受け取ったJSONの文字列をオブジェクトに変換すれば、プログラムから自由に値を取り出せます。

逆に、オブジェクトをJSONの文字列に変換してサーバーに送ることもできます。この変換は標準の機能として用意されているので、追加の道具なしで扱えます。

## つまずきやすいポイント

初心者がつまずきやすいのは、書式の小さなミスです。シングルクォートを使ってしまう、末尾に余分なカンマを残す、キーをクォートで囲み忘れる、といった点はよくあるエラーの原因です。

JSONはあくまでデータの形式であり、関数や日付そのものを直接表現できない点にも注意が必要です。日付は文字列として表すなど、扱える型の範囲を知っておくと混乱を避けられます。

## JSONを扱うページを共有するとき

JSONを理解すると、APIから受け取ったデータを画面に表示したり、設定をファイルで管理したりと、データを軸にした開発がぐっと身近になります。Web開発を学ぶうえで欠かせない基礎です。

JSONを読み込んで表示するデモページをチームに見てもらうとき、HTMLやJavaScriptをまとめて共有URLにできると確認が早く進みます。ギガサイト便はドロップだけで一時公開でき、同じURLのまま中身を差し替えられるので、データ修正のたびにリンクを送り直す必要がありません。

## よくある質問

### JSONとXMLはどう違いますか？

どちらもデータを構造化して表す形式ですが、JSONの方が記述が簡潔で読みやすい傾向があります。XMLはタグで囲む形式で表現力が高い一方、冗長になりがちです。近年のWeb APIではJSONが主流です。

### JSONにコメントは書けますか？

標準のJSONはコメントを書けません。説明を残したい場合は、データとは別のドキュメントにまとめるか、説明用のキーを設けて値として書く方法がとられることがあります。

### JSONが読み込めないときはどう調べますか？

多くは書式エラーです。末尾の余分なカンマ、クォートの種類や閉じ忘れ、対応していない値などを確認します。オンラインの検証ツールや整形ツールを使うと、どこが間違っているか見つけやすくなります。

### JSONはJavaScript専用ですか？

いいえ。名前にJavaScriptが含まれますが、PythonやJava、PHPなど多くの言語で読み書きできます。言語をまたいでデータを交換できることが、JSONが広く使われている理由の一つです。

### 実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？

細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。

## 関連記事

- [DOMとは？HTMLをJavaScriptが操作する仕組みをやさしく解説](https://giga-site.com/articles/dom-term/index.md)
- [イベントリスナーとは？クリックなどに反応する仕組みの基礎](https://giga-site.com/articles/event-listener-term/index.md)
- [async/awaitとは？非同期処理をわかりやすく書くJSの基礎](https://giga-site.com/articles/async-await-term/index.md)
- [Fetch APIとは？JavaScriptでデータを取得する仕組みの基礎](https://giga-site.com/articles/fetch-api-term/index.md)
- [JAMstackとは？静的サイトの新しい作り方](https://giga-site.com/articles/what-is-jamstack/index.md)
- [ヘッドレスCMSとは？従来CMSとの違い](https://giga-site.com/articles/what-is-headless-cms/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "JSONとは？データをやり取りする共通フォーマットの基礎",
  "description": "Webサービス間でデータをやり取りするときに広く使われる共通フォーマットがJSONです。なぜこれほど普及したのか、正しい書き方とJavaScriptでの扱い方、ありがちな間違いまでを初めての人向けにまとめます。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/json-term",
  "url": "https://giga-site.com/articles/json-term",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "用語解説",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "JSONとXMLはどう違いますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "どちらもデータを構造化して表す形式ですが、JSONの方が記述が簡潔で読みやすい傾向があります。XMLはタグで囲む形式で表現力が高い一方、冗長になりがちです。近年のWeb APIではJSONが主流です。"
      }
    },
    {
      "@type": "Question",
      "name": "JSONにコメントは書けますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "標準のJSONはコメントを書けません。説明を残したい場合は、データとは別のドキュメントにまとめるか、説明用のキーを設けて値として書く方法がとられることがあります。"
      }
    },
    {
      "@type": "Question",
      "name": "JSONが読み込めないときはどう調べますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "多くは書式エラーです。末尾の余分なカンマ、クォートの種類や閉じ忘れ、対応していない値などを確認します。オンラインの検証ツールや整形ツールを使うと、どこが間違っているか見つけやすくなります。"
      }
    },
    {
      "@type": "Question",
      "name": "JSONはJavaScript専用ですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "いいえ。名前にJavaScriptが含まれますが、PythonやJava、PHPなど多くの言語で読み書きできます。言語をまたいでデータを交換できることが、JSONが広く使われている理由の一つです。"
      }
    },
    {
      "@type": "Question",
      "name": "実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。"
      }
    }
  ]
}
```