JSON：現代のWeb開発におけるデータ交換フォーマット

JSON（JavaScript Object Notation）は、現代のWeb開発で事実上の標準となっている軽量のテキストデータ交換フォーマットです。「JavaScript」という単語を含む名前にもかかわらず、JSONは言語に依存しない形式であり、ほぼすべての最新のプログラミング言語でサポートされています。

歴史

JSONは、ブラウザとサーバー間のデータ転送のためのXMLの代替として、2000年代初頭にダグラス・クロックフォードによって開発されました。当初、このフォーマットは、クロックフォードがコンサルタントとして働いていたState Softwareのプロジェクトで使用されていました。JSONの公式仕様は2006年にRFC 4627として公開され、その後2013年（RFC 7159）および2017年（RFC 8259）に更新されました。

JSONのシンプルさと読みやすさにより、Web APIの人気の選択肢になりました。今日、JSONはWeb開発だけでなく、構成ファイル、NoSQLデータベース、マイクロサービス間のデータ交換、その他多くの分野で使用されています。

構文の基礎

JSONは、オブジェクト（キーと値のペアのコレクション）と配列（値の順序付きリスト）という2つの汎用データ構造に基づいています。

データの種類

JSONは次のデータ型をサポートしています。

行 - 二重引用符で囲まれたUnicode文字のシーケンス。特殊文字はバックスラッシュでエスケープされます。

数字 — 10進数の整数または分数。JSONは構文レベルで整数と浮動小数点数を区別しません。

ブール値 — true または false。

Null — データがないことを示す特別な値。

オブジェクト - キーが常に文字列である、キーと値のペアの順序が付けられていないコレクション。

配列 — 任意のタイプの値の順序付きリスト。

構造の例

{
  "user": {
    "id": 12345,
    "username": "developer",
    "email": "dev@example.com",
    "isActive": true,
    "roles": ["admin", "editor"],
    "profile": {
      "firstName": "Ivan",
      "lastName": "Petrov",
      "age": 28
    },
    "lastLogin": null
  }
}

JavaScript での JSON の操作

JavaScript には、この形式を処理するための 2 つの主要なメソッドを備えた JSON オブジェクトが組み込まれています。

シリアル化: JSON.stringify ()

メソッド JSON.stringify() は、JavaScriptオブジェクトをJSON行に変換します。

const user = {
  name: "Alexey",
  age: 30,
  skills: ["JavaScript", "Vue.js", "Node.js"]
};

const jsonString = JSON.stringify(user);
// '{"name":"アレクセイ","age":30,"skills":["JavaScript","Vue.js","Node.js"]}'

このメソッドは、書式設定を制御するための追加パラメータをサポートしています。

// インデントによる美しいフォーマット
const formatted = JSON.stringify(user, null, 2);

// フィールドの選択的シリアル化
const filtered = JSON.stringify(user, ['name', 'age']);

// 置換関数の使用
const custom = JSON.stringify(user, (key, value) => {
  if (typeof value === 'string') {
    return value.toUpperCase();
  }
  return value;
});

逆シリアル化: JSON.parse ()

メソッド JSON.parse() は、JSON 文字列を JavaScript オブジェクトに変換します。

const jsonString = '{"name":"Alexey","age":30}'
const user = JSON.parse(jsonString);

console.log(user.name); // 「アレクセイ」

パース時に値を変換するためにリバイバ関数を使用できます。

const jsonWithDate = '{"created":"2024-01-15T10:30:00.000Z"}';

const data = JSON.parse(jsonWithDate, (key, value) => {
  if (key === 'created') {
    return new Date(value);
  }
  return value;
});

console.log(data.created instanceof Date); // true

実用的な使用パターン

オブジェクトのディープコピー

JSONは、オブジェクトの高速なディープコピーに使用できますが、このメソッドには制限があります。

const original = {
  name: "Project",
  data: { items: [1, 2, 3] }
};

const copy = JSON.parse(JSON.stringify(original));
copy.data.items.push(4);

console.log(original.data.items); // [1, 2, 3]
console.log(copy.data.items); // [1, 2, 3, 4]

このメソッドは関数、文字、未定義の値をコピーせず、オブジェクトのプロトタイプを失うことを覚えておくことが重要です。

localStorage にデータを保存する

JSONは、ブラウザストレージに保存する前にデータをシリアル化するのに最適です。

// 保存
const settings = {
  theme: 'dark',
  language: 'ru',
  notifications: true
};
localStorage.setItem('settings', JSON.stringify(settings));

// 読み込み中
const savedSettings = JSON.parse(localStorage.getItem('settings'));

API の操作

最新のAPIは、データ交換の主要な形式としてJSONを使用します。

// サーバーへのデータ送信
async function createUser(userData) {
  const response = await fetch('/api/users', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(userData)
  });
  
  return await response.json();
}

// 使用
const newUser = await createUser({
  name: "Maria",
  email: "maria@example.com"
});

一般的なエラーとその解決策

循環参照

JSON.stringify ()は、循環参照がある場合にエラーをスローします。

const obj = { name: "test" };
obj.self = obj;

// TypeError: Converting circular structure to JSON
// JSON.stringify(obj);

// WeakSet を使用したソリューション
function stringifyWithCircular(obj) {
  const seen = new WeakSet();
  return JSON.stringify(obj, (key, value) => {
    if (typeof value === "object" && value !== null) {
      if (seen.has(value)) {
        return "[Circular]";
      }
      seen.add(value);
    }
    return value;
  });
}

JSONが正しくありません

外部データソースを操作するときは、常にエラー処理を使用してください。

function safeJsonParse(jsonString, fallback = null) {
  try {
    return JSON.parse(jsonString);
  } catch (error) {
    console.error('JSON parsing error:', error.message);
    return fallback;
  }
}

const data = safeJsonParse(userInput, {});

特別なデータ型の喪失

JSONは日付、正規表現、その他の特殊な型をサポートしていません。

const data = {
  created: new Date(),
  pattern: /test/gi
};

const json = JSON.stringify(data);
// {"created":"2024-11-21T10:00:00.000Z","pattern":{}}

// 解決策：カスタム toJSON メソッドを作成する
data.created.toJSON = function() {
  return { _type: 'Date', value: this.toISOString() };
};

JSONスキーマ：データの検証

JSONスキーマは、JSONデータの構造を記述および検証するための辞書です。

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "type": "object",
  "properties": {
    "name": {
      "type": "string",
      "minLength": 1,
      "maxLength": 100
    },
    "age": {
      "type": "integer",
      "minimum": 0,
      "maximum": 150
    },
    "email": {
      "type": "string",
      "format": "email"
    }
  },
  "required": ["name", "email"]
}

JSONスキーマを使用すると、大規模なアプリケーションでデータの整合性を確保し、APIのドキュメントを作成できます。

パフォーマンスと最適化

大量のデータを扱う場合は、JSON 操作のパフォーマンスを考慮することが重要です。

// 複数のパースを避ける
// 悪い
for (let i = 0; i < 1000; i++) {
  const data = JSON.parse(jsonString);
  processData(data);
}

// 良い
const data = JSON.parse(jsonString);
for (let i = 0; i < 1000; i++) {
  processData(data);
}

// 大きなファイルにはストリーミングを使用してください
async function processLargeJsonFile(url) {
  const response = await fetch(url);
  const reader = response.body.getReader();
  const decoder = new TextDecoder();
  
  // パーツごとの処理
  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    const chunk = decoder.decode(value, { stream: true });
    // チャンク処理
  }
}

JSON を使用した作業時の安全性

JSONインジェクションからの保護

ユーザー入力を扱う場合は、文字列の直接連結を避けることが重要です。

// 安全ではありません
const userInput = getUserInput();
const jsonString = '{"data":"' + userInput + '"}';

// 安全
const jsonString = JSON.stringify({ data: userInput });

入力データの検証

外部ソースから取得したデータは常に検証してください。

function validateUserData(data) {
  if (!data || typeof data !== 'object') {
    throw new Error('Incorrect data format');
  }
  
  if (!data.name || typeof data.name !== 'string') {
    throw new Error('Required name field is missing');
  }
  
  if (data.age && (typeof data.age !== 'number' || data.age < 0)) {
    throw new Error('Invalid age value');
  }
  
  return true;
}

結論

JSONは、そのシンプルさ、汎用性、幅広いサポートにより、現代の開発に不可欠なものになりました。このフォーマットの複雑さを理解し、一般的なパターンと潜在的な問題を知ることは、より信頼性が高く生産性の高いアプリケーションを作成するのに役立ちます。API、構成ファイル、またはローカルデータストレージのいずれを使用している場合でも、JSONは構造化された情報交換のための信頼できるツールです。

JavaScript やその他の Web 開発技術の知識を深めたいですか？

教育プラットフォームに参加する コディック、JavaScript、Python、HTML、CSS、その他の人気のあるテクノロジーに関するインタラクティブなコースが見つかります。Kodikは、初心者の開発者が実践的なタスクと構造化されたトレーニングを通じてプログラミングを習得するのに役立ちます。

また、私たちの Telegramチャンネル経験豊富な開発者からサポートを受け、複雑な問題について話し合い、開発の世界の最新ニュースを把握できます。