JSONがよくわからない?データのやり取りを「メモ帳」に例えて理解しよう

💻その他

こんにちは、とまだです。

みなさん、プログラミングを学んでいて「JSON」という言葉に出会って困ったことはありませんか?

「なんか難しそう」「よくわからない」と思ってしまいますよね。

実は私も最初はそうでした。 でも、JSONを「メモ帳」に例えて考えると、すごくシンプルなんです。

今回は現役のエンジニア、そして元プログラミングスクール講師としての経験から、JSONについて初心者でもわかるように解説します。

JSONとは?身近な「メモ帳」で理解する

JSONを簡単に言うと、データをメモする方法の一つです。

例えば、友達の連絡先をメモするとき。 こんな風に書きますよね。

名前:田中さん
年齢:30歳
好きなもの:音楽、プログラミング、コーヒー
学生かどうか:いいえ

これがまさにJSONの考え方なんです。

JSONでは、このメモをコンピュータが理解しやすい形で書きます。

{
  "name": "田中さん",
  "age": 30,
  "likes": ["音楽", "プログラミング", "コーヒー"],
  "isStudent": false
}

ちょっと記号が増えましたが、基本は同じです。 「項目名」と「内容」をセットで書いているだけ。

なぜJSONが必要なの?

プログラムとプログラムがお話しするとき。 データを渡す必要があります。

でも、プログラムごとに言語が違うんです。 まるで日本語と英語みたいに。

そこでJSONの出番です。 JSONは「世界共通のメモ帳」みたいなもの。

どんなプログラミング言語でも読めるんです。

JSONの書き方:3つの基本ルール

JSONには守るべきルールがあります。 でも、たったの3つだけです。

ルール1:文字は「"」で囲む

文字を書くときは必ずダブルクォート(")で囲みます。

"名前": "田中"  // 正しい
'名前': '田中'  // 間違い(シングルクォートはNG)

ルール2:最後のカンマは書かない

リストの最後にカンマを付けると怒られます。

{
  "name": "田中",
  "age": 30  // 最後はカンマなし
}

ルール3:入れ子にできる

メモの中にメモを書けます。 まるでフォルダの中にフォルダがあるように。

{
  "user": {
    "profile": {
      "name": "田中"
    }
  }
}

実際にJSONを使ってみよう

ここで実際のコードを見てみましょう。 JavaScriptでWebサイトからデータを取得する例です。

// サーバーにデータをお願いする
fetch("https://api.example.com/users/123")
  .then(response => response.json())  // JSONを読み込む
  .then(data => {
    console.log(data.name);  // 名前を表示
  });

このコードは「APIというデータの倉庫」から情報を取ってきています。 返ってくるデータがJSON形式なんです。

よくある使い方

実務では主に3つの場面で使います。

1. API通信 フロントエンドとバックエンドの会話で使います。 まるで手紙のやり取りのように。

2. 設定ファイル アプリの設定をJSONで書きます。 設定をメモ帳に書いておくイメージです。

3. データベース 最近のデータベースはJSONをそのまま保存できます。 メモ帳をそのまま引き出しにしまう感じです。

JSONでつまずきやすいポイント

初心者がよく間違えるポイントがあります。

エラーになる書き方

{
  "name": "田中",  // カンマが余計
}
{
  name: "田中"  // キーにダブルクォートがない
}

これらはエラーになります。 ブラウザの開発者ツールで確認すると、エラーメッセージが出ます。

デバッグのコツ

JSONが正しいか確認したいとき。 オンラインのJSONバリデーターを使うと便利です。

コピペするだけでエラーを教えてくれます。

Node.jsでAPIを作ってみる

簡単なAPIサーバーを作ってみましょう。 JSONを返すだけのシンプルなものです。

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

// ユーザー情報を返すAPI
app.get("/api/user/:id", (req, res) => {
  const userData = {
    id: req.params.id,
    name: "田中",
    age: 30
  };

  // JSONで返す
  res.json(userData);
});

app.listen(3000);

このコードを実行すると、APIサーバーが立ち上がります。 ブラウザでアクセスすると、JSON形式でデータが返ってきます。

よくある質問

Q: XMLとJSONの違いは?

XMLは昔よく使われていたデータ形式です。 JSONの方がシンプルで読みやすいので、今はJSONが主流です。

Q: JSONはJavaScript専用?

名前にJavaScriptと付いていますが、専用ではありません。 Python、Ruby、Javaなど、ほとんどの言語で使えます。

Q: 大きなデータも扱える?

扱えますが、あまりに大きいと処理が重くなります。 数MB程度なら問題ありません。

まとめ

JSONは「世界共通のメモ帳」です。

最初は記号が多くて難しく見えるかもしれません。 でも、基本は「項目名」と「内容」をセットで書くだけ。

3つのルールを守れば、誰でも書けます。

まずは小さなJSONファイルを作ってみてください。 自分の情報をJSON形式で書いてみるのもいいですね。

慣れてくると、APIやデータベースの扱いが楽になります。 プログラミングの幅がぐっと広がりますよ。

JSONは避けて通れない技術です。 でも、怖がる必要はありません。

一緒に少しずつ理解を深めていきましょう。

共有:

著者について

とまだ

とまだ

フルスタックエンジニア

Learning Next の創設者。Ruby on Rails と React を中心に、プログラミング教育に情熱を注いでいます。初心者が楽しく学べる環境作りを目指しています。

著者の詳細を見る →