Toolypet
Back to Blog
Dev

JSONフォーマッティングをマスターする:開発者必須のヒント

JSONデータを効果的に扱い、フォーマットする方法とよくある間違いを避けるヒントを学びます。

Toolypet Team2 min read
JSONフォーマッティングをマスターする:開発者必須のヒント

現代ウェブ開発の共通言語、JSON

ウェブ開発者なら一日に何十回もJSONに出会います。APIレスポンスを確認し、設定ファイルを修正し、データベースから取得したデータを加工するあらゆる瞬間にJSONがあります。JSON(JavaScript Object Notation)がこれほど広く使われている理由はシンプルです。人間が読みやすく、マシンがパースしやすく、ほぼすべてのプログラミング言語で基本的にサポートされているからです。

しかし、シンプルに見えるJSONも実際に扱ってみると、予期しない罠にはまりやすいものです。シングルクォートを使ってパースエラーに出会ったり、最後のカンマ一つのために1時間もデバッグしたりする経験、開発者なら一度はあるでしょう。今日はJSONをより効果的に扱う方法と、よくやってしまう間違いを避けるヒントを学びます。

JSONの基本構造を理解する

JSONは2つの構造を基盤としています。名前/値ペアの集まりであるオブジェクト(Object)と、値の順序がある配列(Array)です。この2つの構造だけで、ほぼすべての複雑なデータを表現できるというのがJSONの魅力です。

{
  "user": {
    "name": "山田太郎",
    "age": 28,
    "isActive": true,
    "skills": ["JavaScript", "TypeScript", "React"],
    "address": null
  }
}

JSONがサポートするデータ型は、文字列、数値、ブーリアン、null、配列、オブジェクトの6種類だけです。JavaScriptとは異なり、undefined、関数、Dateオブジェクトなどは直接JSONで表現できません。日付を扱う際はISO 8601形式の文字列("2025-12-26T09:00:00Z")で表現するのが慣例です。

開発者がよく犯すJSONの間違い

経験豊富な開発者もよく間違える部分があります。ほとんどがJavaScriptのオブジェクトリテラル構文と混同して発生する問題です。

最もよくある間違いはシングルクォートの使用です。JavaScriptではシングルクォートとダブルクォートを自由に使えますが、JSONではダブルクォートのみが許可されます。このルールはキー(key)と文字列値の両方に適用されます。

// 間違った例 - パースエラーが発生
{ 'name': 'John' }

// 正しい例
{ "name": "John" }

2番目によくある間違いは末尾のカンマ(trailing comma)です。JavaScriptやTypeScriptでは配列やオブジェクトの最後の要素の後にカンマを残しても問題なく、むしろgit diffをきれいに保つために推奨されることもあります。しかしJSONではこれが構文エラーになります。

// 間違った例
{
  "items": [
    "apple",
    "banana",
  ]
}

// 正しい例
{
  "items": [
    "apple",
    "banana"
  ]
}

コメントを使おうとする試みもよく見られます。JSONは公式にはコメントをサポートしていません。設定ファイルにコメントが必要な場合は、JSON5やJSONC(JSON with Comments)形式を検討してください。VS Codeの設定ファイルがJSONC形式を使用しているのもまさにこのような理由からです。

乱雑なJSONを読みやすくする方法

APIレスポンスやログで出会うJSONは、ほとんど1行に圧縮されています。ネットワーク転送効率を高めるための当然の措置ですが、デバッグする時は目が疲れます。こんな時にJSONフォーマッターが必要です。

// 圧縮された状態 (Minified)
{"users":[{"id":1,"name":"Alice","email":"alice@example.com"},{"id":2,"name":"Bob","email":"bob@example.com"}]}

// フォーマットされた状態 (Beautified)
{
  "users": [
    {
      "id": 1,
      "name": "Alice",
      "email": "alice@example.com"
    },
    {
      "id": 2,
      "name": "Bob",
      "email": "bob@example.com"
    }
  ]
}

インデントが適用されたJSONは、データの構造を一目で把握できるようにします。ネストされたオブジェクトの深さを視覚的に確認でき、配列の各要素がどこで始まりどこで終わるかも明確です。逆に、本番環境にデプロイする時は空白と改行を削除して容量を減らすのが良いでしょう。大きなJSONファイルの場合、圧縮だけでも20-30%の容量を減らすことができます。

APIデバッグのための実践的なヒント

ターミナルでAPIをテストする時、curlとjqの組み合わせは強力な武器になります。jqはJSONを処理するコマンドラインツールで、きれいに出力するのはもちろん、データをフィルタリングして変換することも可能です。

# APIレスポンスをきれいに出力
curl -s https://api.example.com/users | jq '.'

# 最初のユーザーの名前だけを抽出
curl -s https://api.example.com/users | jq '.data[0].name'

# すべてのユーザーのメールリストを抽出
curl -s https://api.example.com/users | jq '.data[].email'

ブラウザの開発者ツールでもJSONを扱うことが多いです。NetworkタブでAPIレスポンスを見る時、ResponseタブではなくPreviewタブを使用すると、自動的にフォーマットされたJSONを見ることができます。しかし、コピーして他の場所で使用するには、依然として外部ツールが必要です。

JSON Pathで複雑なデータを探索する

大規模なJSONデータで特定の値を探す必要がある時、JSON Pathが有用です。XPathがXMLをナビゲートするように、JSON PathはJSONデータをナビゲートするクエリ言語です。

// 複雑なJSON構造
{
  "store": {
    "name": "オンライン書店",
    "books": [
      { "title": "JavaScript完全ガイド", "price": 3500, "inStock": true },
      { "title": "Reactを使いこなす技術", "price": 3200, "inStock": false },
      { "title": "Node.js教科書", "price": 2800, "inStock": true }
    ]
  }
}

// JSON Pathの例
$.store.books[*].title          // すべての本のタイトル
$.store.books[?(@.inStock)].title   // 在庫がある本のタイトルだけ
$.store.books[?(@.price < 3000)]   // 3000円未満の本

このようなクエリはテスト自動化やデータ検証で特に有用です。PostmanのようなAPIテストツールでもJSON Pathをサポートしているので、覚えておくと様々な場所で活用できます。

まとめ

JSONはシンプルな形式ですが、上手に扱えば開発生産性を大きく向上させることができます。適切なツールを使用して可読性を高め、有効性を検証し、必要なデータを素早く抽出してください。ToolypetのJSON Formatterは、フォーマット、圧縮、構文検証を一か所で処理でき、日常的なJSON作業をずっと楽にしてくれます。

次にAPIレスポンスが1行にまとまっていて困った時、またはパースエラーが出たけどどこが問題かわからない時、思い出せるツールになれば嬉しいです。

JSONFormattingDeveloper ToolsAPI
Back to all posts