ブログに戻る
JSON8 min read

JSON完全ガイド：基礎から応用まで

構文、検証、ベストプラクティス、よくある落とし穴をカバーするこの包括的なガイドでJSONをマスター。

JSONとは？

JSON（JavaScript Object Notation）は、軽量でテキストベースのデータ交換フォーマットです。 名前がJavaScriptとの関連を示唆していますが、JSONは言語に依存せず、 ほとんどの現代プログラミング言語で使用できます。

なぜJSONを使用するのか？

  • 人間に読みやすく理解しやすい
  • 最小限の構文で軽量
  • JavaScriptのネイティブサポート
  • プログラミング言語全体で幅幅幅サポート
  • APIや設定ファイルに最適

JSON構文とデータ型

JSON構文は二つの構造に基づいています：名前/値のペアのコレクションと 値の順序付きリストです。JSONは6つの基本データ型をサポートしています：

String

"Hello World", "user@example.com"

常にダブルクォートを使用、シングルクォートは使用しない

Number

42, -17, 3.14159, 1.23e-4

整数または浮動小数点、正または負

Boolean

true, false

小文字のみ、クォートなし

null

null

空の値を表す、小文字のみ

Object

{"name": "John", "age": 30}

中括弧内のキー/値ペアのコレクション

Array

[1, 2, 3]
["apple", "banana", "cherry"]

角括弧内の値の順序付きリスト

JSON構文ルール

  • データは名前/値ペアで表現
  • データはカンマで区切られる
  • オブジェクトは中括弧で囲まれる
  • 配列は角括弧[]で囲まれる
  • 文字列はダブルクォートを使用する必要がある
  • 末尾のカンマは許可されない
  • コメントは許可されない

JavaScriptでのJSONの扱い

JSONのパーシング

JSON文字列をJavaScriptオブジェクトに変換：

// 基本的なパーシング
const jsonString = '{"name": "John", "age": 30}';
const obj = JSON.parse(jsonString);
console.log(obj.name); // "John"

// パーシングエラーの処理
try {
  const data = JSON.parse(invalidJsonString);
} catch (error) {
  console.error('無効なJSON:', error.message);
}

オブジェクトの文字列化

JavaScriptオブジェクトをJSON文字列に変換：

const user = {
  name: 'Alice',
  age: 25,
  hobbies: ['reading', 'coding'],
  isActive: true
};

const jsonString = JSON.stringify(user);
console.log(jsonString);
// {"name":"Alice","age":25,"hobbies":["reading","coding"],"isActive":true}

// インデント付きの見やすい印刷
const prettyJson = JSON.stringify(user, null, 2);
console.log(prettyJson);

高度なJSON.stringifyオプション

const data = {
  name: 'John',
  password: 'secret123',
  age: 30,
  email: 'john@example.com'
};

// 特定のプロパティをフィルター
const filtered = JSON.stringify(data, ['name', 'age']);
// {"name":"John","age":30}

// replacer関数で値を変換
const transformed = JSON.stringify(data, (key, value) => {
  if (key === 'password') return undefined; // パスワードを除外
  if (typeof value === 'string') return value.toUpperCase();
  return value;
});

// カスタムtoJSONメソッド
const customObject = {
  value: 42,
  toJSON() {
    return { customValue: this.value * 2 };
  }
};

JSON検証

JSON検証は、データが正しいフォーマットと構造に従っていることを保証します。

基本的な検証

function isValidJSON(str) {
  try {
    JSON.parse(str);
    return true;
  } catch (e) {
    return false;
  }
}

// 使用方法
console.log(isValidJSON('{"name": "John"}')); // true
console.log(isValidJSON("{'name': 'John'}")); // false (シングルクォート)
console.log(isValidJSON('{"name": "John",}')); // false (末尾カンマ)

スキーマ検証

より堅牢な検証には、JSON Schemaの使用を検討してください：

// JSON Schemaの例
const userSchema = {
  type: "object",
  properties: {
    name: { type: "string", minLength: 1 },
    age: { type: "number", minimum: 0, maximum: 150 },
    email: { type: "string", format: "email" }
  },
  required: ["name", "age"],
  additionalProperties: false
};

ベストプラクティス

一貫した命名を使用

JSON構造全体でcamelCaseまたはsnake_caseを一貫して使用してください。

可能な限りフラットに保つ

パフォーマンスと可読性のために不必要なネストを避けてください。

意味のあるプロパティ名を使用

データの目的を明確に示す説明的な名前を選んでください。

適切な場合はメタデータを含める

APIレスポンスにタイムスタンプ、バージョン、またはステータスフィールドを追加してください。

大きな数値を注意深く扱う

非常に大きな整数に対するJavaScriptの数値精度制限に注意してください。

よくある間違いとその回避方法

末尾カンマ

JSONはJavaScriptオブジェクトとは異なり、末尾カンマを許可しません。

❌ 無効

{
  "name": "John",
  "age": 30,
}

✅ 有効

{
  "name": "John",
  "age": 30
}

シングルクォート

JSONは文字列とプロパティ名にダブルクォートが必要です。

❌ 無効

{'name': 'John'}

✅ 有効

{"name": "John"}

undefinedと関数

JSONはundefined値や関数を表現できません。

// これらはJSON.stringify()時に省略されます
const obj = {
  name: "John",
  undefinedValue: undefined,
  func: function() { return "hello"; }
};

日付の扱い

JSONにはネイティブな日付型がありません。ISO 8601文字列を使用してください。

// 推奨される日付フォーマット
{
  "createdAt": "2024-01-15T10:30:00.000Z",
  "updatedAt": "2024-01-15T14:45:30.000Z"
}

高度なトピック

JSONストリーミング

大きなデータセットの場合、パフォーマンス向上のためにJSONストリーミングパーシングを検討してください：

// ストリーミングパーサーを使用した例（概念的）
const streamParser = new JSONStreamParser();

streamParser.on('object', (obj) => {
  // パーシングされた各オブジェクトを処理
  processObject(obj);
});

streamParser.on('error', (error) => {
  console.error('Parsing error:', error);
});

// データをチャンク単位で供給
chunks.forEach(chunk => streamParser.write(chunk));

JSON Schema検証

本番アプリケーションでの包括的な検証にはJSON Schemaを使用してください：

const Ajv = require('ajv');
const ajv = new Ajv();

const schema = {
  type: "object",
  properties: {
    productId: { type: "string", pattern: "^[A-Z0-9]{5,10}$" },
    name: { type: "string", minLength: 1, maxLength: 100 },
    price: { type: "number", minimum: 0, multipleOf: 0.01 },
    categories: {
      type: "array",
      items: { type: "string" },
      minItems: 1,
      uniqueItems: true
    }
  },
  required: ["productId", "name", "price"],
  additionalProperties: false
};

パフォーマンスの考慮事項

最適化のヒント

  • 頻繁に送信されるデータにはより短いプロパティ名を使用
  • 大きなデータセットにはバイナリフォーマット（MessagePack、Protocol Buffers）を検討
  • APIレスポンスに圧縮（gzip）を実装
  • 可能な限りパーシングしたJSONオブジェクトをキャッシュ
  • データ変換にJSON.parse()のreviver関数を使用

実世界の例

APIレスポンス構造

{
  "status": "success",
  "data": {
    "users": [
      {
        "id": "usr_123",
        "name": "Alice Johnson",
        "email": "alice@example.com",
        "profile": {
          "avatar": "https://example.com/avatars/alice.jpg",
          "bio": "Software developer passionate about clean code"
        },
        "settings": {
          "theme": "dark",
          "notifications": true,
          "language": "en"
        },
        "createdAt": "2024-01-15T10:30:00.000Z",
        "lastActive": "2024-01-15T14:45:30.000Z"
      }
    ]
  },
  "pagination": {
    "page": 1,
    "limit": 20,
    "total": 156,
    "hasNext": true
  },
  "meta": {
    "requestId": "req_abc123",
    "timestamp": "2024-01-15T14:45:30.000Z",
    "version": "1.0"
  }
}

まとめ

JSONは現代の開発者にとって不可欠なスキルです。その構文を理解し、 ベストプラクティスに従い、よくある落とし穴を避けることで、 アプリケーションでのデータ交換、設定、保存にJSONを効果的に使用できます。 JSONを検証し、エラーを適切に処理し、大きなデータセットのパフォーマンスへの影響を考慮することを忘れないでください。

JSONフォーマッターを試す

無料のオンラインJSONフォーマッターとバリデーターツールでJSONの知識を実践してください。

JSONフォーマッターを開く

前の記事

SQLクエリ最適化：パフォーマンスベストプラクティスガイド

15 min read

次の記事

初心者のための正規表現チュートリアル

12 min read