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 を中心に、プログラミング教育に情熱を注いでいます。初心者が楽しく学べる環境作りを目指しています。
著者の詳細を見る →