JavaScript

JavaScript's JSON is a lightweight, text-based format for representing data, utilizing collections of name-value pairs (objects) and ordered lists of values (arrays) to structure data.

JSON (JavaScript Object Notation)

　JSONは JavaScript Object Notationの略で、データを保存または転送するために使用されるテキストベースのデータ形式です。JSONは JavaScript言語に由来していますが、多くのプログラミング言語で使用でき、Web技術で広く採用されています。

　JSONは主に２つの構造を持っています。

名前と値のペアの集合: 他の言葉で言うとオブジェクトです。JavaScriptでは、これは {} で囲まれた中に "キー" : 値の形式で記述されます。
値の順序付けられたリスト（配列）: これは [] で囲まれ、カンマで区切られた値のリストとして表されます。

JSONの例

JSON

{
	"name": "John Doe",
	"age": 30,
	"isEmployed": true,
	"address": {
		"street": "123 Maple Street",
		"city": "Anytown"
	},
	"phoneNumbers": ["123-456-7890", "456-789-0123"]
}

　この例では、name、age、isEmployed、address、phoneNumbersという５つのキーを持つオブジェクトを見ることができます。addressはさらにオブジェクトを含み、phoneNumbersは配列を含みます。

Sample

　Webページ上で JSONを使用し、動的にコンテンツを表示する簡単な例を紹介します。以下のサンプルコードは、Webページにユーザー情報を表示するものです。HTMLと JavaScriptを使用しており、セキュリティを考慮して、ユーザー入力を直接 DOMに挿入するのではなく、テキストとして扱います。

HTML

<div id="userInfo"></div>

JavaScript

document.addEventListener('DOMContentLoaded', function() {
	const userData = {
		"name": "John Doe",
		"email": "john.doe@example.com"
	};
	
	const userInfoDiv = document.getElementById('userInfo');
	userInfoDiv.textContent = `Name: ${userData.name}, Email: ${userData.email}`;
});

　この例では、ページの読み込み完了時にユーザーデータを userInfoという IDを持つ div要素に表示します。userDataオブジェクトは JSON形式で定義されています。

　この例は基本的ですが、JSONを使用して Webページに動的にデータを表示する方法の一例を示しています。セキュリティの観点から、ユーザーからの入力を扱う場合は、常に適切なサニタイズや検証を行う必要があります。