1. 導入：なぜJSONが重要なのか
Web開発をしていると、必ず耳にするのが「JSON（ジェイソン）」という言葉です。JSONは、サーバーとWebサイトの間でデータをやり取りするための「共通言語」のような存在です。例えば、天気予報アプリで気温の情報を取得したり、SNSで投稿内容を表示したりする際、データはJSON形式で送られてきます。これを正しく理解し扱えるようになることは、フロントエンド開発の第一歩であり、避けては通れない非常に重要なスキルです。
2. 基礎知識：JSONとは何か？
JSONは「JavaScript Object Notation」の略で、JavaScriptのオブジェクトの書き方をベースにしたデータ形式です。人間にも読みやすく、プログラムでも処理しやすいという特徴があります。
JSONのルールはとてもシンプルです。
・データは「キー（名前）」と「値」のペアで構成される
・キーと文字列の値は必ずダブルクォーテーション（”）で囲む
・全体を波括弧（{ }）で囲む
例えば、ユーザー情報を表すと以下のようになります。
{
“name”: “山田太郎”,
“age”: 25,
“isStudent”: false
}
3. 実装/解決策：JSONの変換方法
JavaScriptでJSONを扱う際、現場で最も使うのが「JSONをJavaScriptのデータに変換する」ことと、「JavaScriptのデータをJSON形式の文字列に変換する」ことです。
JSON.parse()：JSON文字列を、JavaScriptで扱える「オブジェクト」に変換します。
JSON.stringify()：JavaScriptのオブジェクトを、サーバーに送るための「JSON文字列」に変換します。
4. サンプルプログラム
以下のコードをブラウザのコンソールや、HTMLファイルにコピー＆ペーストして確認してみてください。
// サーバーから送られてきたと想定したJSON文字列
const jsonString = '{"name": "フロント太郎", "level": 1}';
// 1. JSON文字列をJavaScriptオブジェクトに変換する
const user = JSON.parse(jsonString);
console.log("変換後の名前:", user.name); // コンソールに「フロント太郎」と表示される
// 2. JavaScriptオブジェクトをJSON文字列に戻す
const newObj = { title: "JavaScript入門", pages: 100 };
const newJsonString = JSON.stringify(newObj);
console.log("JSON形式の文字列:", newJsonString); // {"title":"JavaScript入門","pages":100}
5. 応用・注意点：現場で陥りやすいミス
実務でJSONを扱う際、初心者が特につまずきやすいポイントが2つあります。
一つ目は「ダブルクォーテーションの厳守」です。JavaScriptのオブジェクトではキーを囲まなくても動くことがありますが、JSONでは必ずダブルクォーテーションが必要です。シングルクォーテーション（’）を使うとエラーになるため注意しましょう。
二つ目は「パースエラー」です。外部から取得したデータが壊れている場合、JSON.parse()を実行するとプログラムが停止してしまいます。重要なデータを扱う際は、try…catch文を使ってエラーをキャッチし、安全に処理を継続する実装を心がけるのが、プロのエンジニアの作法です。