JSONとは

JSON（JavaScript Object Notation）は、軽量なデータ交換フォーマットです。人間にとって読み書きしやすく、マシンにとって解析・生成しやすい構造を持っています。

基本構文

データ型

JSONは6つの基本データ型をサポート：

1. 文字列（String）: "Hello World"
2. 数値（Number）: 42, 3.14
3. 真偽値（Boolean）: true, false
4. null: null
5. オブジェクト（Object）: {"key": "value"}
6. 配列（Array）: [1, 2, 3]

構文ルール

{
  "name": "田中太郎",
  "age": 30,
  "isActive": true,
  "email": null,
  "hobbies": ["読書", "映画鑑賞", "プログラミング"],
  "address": {
    "prefecture": "東京都",
    "city": "渋谷区",
    "postalCode": "150-0001"
  }
}

よくあるエラーと対処法

1. 末尾のカンマ

❌ エラー：

{
  "name": "太郎",
  "age": 30,  // 最後のカンマはNG
}

✅ 正しい：

{
  "name": "太郎",
  "age": 30
}

2. シングルクォート

❌ エラー：

{'name': 'value'}  // シングルクォートはNG

✅ 正しい：

{"name": "value"}

3. コメント

❌ エラー：

{
  "name": "太郎", // コメントは使えない
  /* ブロックコメントもNG */
  "age": 30
}

実践的な使用例

API レスポンスの処理

// APIからのレスポンスを処理
fetch('/api/users')
  .then(response => response.json())
  .then(data => {
    // JSONデータの処理
    data.users.forEach(user => {
      console.log(`${user.name}: ${user.email}`);
    });
  })
  .catch(error => {
    console.error('JSONパースエラー:', error);
  });

設定ファイルとしての利用

// config.json
{
  "app": {
    "name": "My Application",
    "version": "1.0.0",
    "environment": "production"
  },
  "database": {
    "host": "localhost",
    "port": 5432,
    "name": "myapp_db"
  },
  "features": {
    "enableCache": true,
    "maxUploadSize": 10485760,
    "supportedFormats": ["jpg", "png", "webp"]
  }
}

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"]
}

JavaScriptでのバリデーション

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

const validate = ajv.compile(schema);
const valid = validate(data);

if (!valid) {
  console.error('バリデーションエラー:', validate.errors);
}

パフォーマンス最適化

1. データサイズの削減

// 圧縮前
{
  "userInformation": {
    "firstName": "太郎",
    "lastName": "田中",
    "emailAddress": "taro@example.com"
  }
}

// 圧縮後（キー名を短縮）
{
  "user": {
    "fn": "太郎",
    "ln": "田中",
    "email": "taro@example.com"
  }
}

2. ストリーミングパース

// 大きなJSONファイルの処理
const JSONStream = require('JSONStream');
const fs = require('fs');

fs.createReadStream('large-file.json')
  .pipe(JSONStream.parse('users.*'))
  .on('data', (user) => {
    // 各ユーザーを個別に処理
    processUser(user);
  });

JSONツールの活用

オンラインツール

• i4u JSONフォーマッター: 整形・バリデーション機能付き
• JSON to CSV変換: CSVへの変換ツール
• JSONバリデーター: 構文チェックツール

コマンドラインツール

# jqを使った整形
cat data.json | jq '.'

# 特定のフィールドを抽出
cat users.json | jq '.users[].name'

# CSVに変換
cat data.json | jq -r '.[] | [.id, .name, .email] | @csv'

ベストプラクティス

1. 一貫性のある命名規則

// camelCase（推奨）
{
  "firstName": "太郎",
  "lastName": "田中",
  "phoneNumber": "090-1234-5678"
}

2. 適切なデータ型の使用

{
  "id": 123,           // 数値IDは数値型で
  "price": 1980.50,    // 金額は数値型で
  "isActive": true,    // フラグは真偽値で
  "birthDate": "1990-01-01"  // 日付はISO 8601形式
}

3. エラーレスポンスの標準化

{
  "error": {
    "code": "VALIDATION_ERROR",
    "message": "入力値が不正です",
    "details": [
      {
        "field": "email",
        "message": "有効なメールアドレスを入力してください"
      }
    ]
  }
}

まとめ

JSONは現代のWeb開発において欠かせないデータフォーマットです。正しい構文とベストプラクティスを理解することで、より効率的で保守性の高いアプリケーション開発が可能になります。

当サイトのJSONツールを活用して、日々の開発作業を効率化してください。