JSON
よみかた：ジェイソン
意味
軽量で人間にも読みやすいデータ交換フォーマット。
JavaScript Object Notation（ジャバスクリプト・オブジェクト・ノーテーション）の略で、異なるシステム間でデータをやりとりする際の標準的な記述形式の一つ。
ポイント
- 人間が読みやすく、機械も処理しやすい構造
- API通信やWeb開発で最も広く使用されている
- テキストベースなので軽量で高速通信が可能
- 多くのプログラミング言語でサポートされている
体験してみよう
実際にJSONデータを編集して、リアルタイムで構造を確認してみましょう。
JSONデータ編集デモ
JavaScriptで実践してみよう
JavaScriptのJSON.parse()とJSON.stringify()を使うと、JSONデータを簡単に操作できます。以下のサンプルコードで、その実装方法を確認してみましょう。
サンプルコードを見る (JavaScript)
// JSONデータの例
const jsonData = {
"name": "田中太郎",
"age": 25,
"hobbies": ["読書", "映画鑑賞", "プログラミング"],
"address": {
"city": "東京",
"prefecture": "東京都"
}
};
// オブジェクトをJSON文字列に変換
const jsonString = JSON.stringify(jsonData, null, 2);
console.log("JSON文字列:", jsonString);
// JSON文字列をオブジェクトに変換
const parsedData = JSON.parse(jsonString);
console.log("パースされたデータ:", parsedData.name); // "田中太郎"HTML/CSS/JS 統合版テンプレート
このページの完全なコードです。以下の内容をコピーしてindex.htmlなどの名前で保存すると、ご自身のPCやブラウザで直接開いて確認できます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSON - IT用語辞典</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<style>
/* styles.cssの内容をここに含める */
</style>
</head>
<body>
<div class="container">
<h1><i class="fas fa-brackets-curly icon"></i>JSON</h1>
<p>軽量で人間にも読みやすいデータ交換フォーマット</p>
<button onclick="startJsonDemo()">JSONを表示・編集する</button>
<div id="demo-message"></div>
</div>
<script>
function startJsonDemo() {
const demoData = {
name: "サンプルユーザー",
age: 30,
skills: ["HTML", "CSS", "JavaScript"]
};
document.getElementById('demo-message').innerHTML = \`
<div style="margin-top: 20px; padding: 20px; background-color: #f9f7ef; border-radius: 8px;">
<pre>\${JSON.stringify(demoData, null, 2)}</pre>
</div>
\`;
}
</script>
</body>
</html>