JSONフォーマット美化ガイド

JavaScriptで読みやすいJSONを生成する方法

JavaScriptでオブジェクトからJSONを生成する際、人間が読みやすい形式にすることが重要です。以下は、その方法について解説します。

JSON.stringify()メソッドの使用

• 2番目の引数にオプションオブジェクトを渡すことで、出力のフォーマットを制御できます。
• JSON.stringify()メソッドは、JavaScriptオブジェクトをJSON文字列に変換します。

const myObject = {
  name: "John Doe",
  age: 30,
  city: "New York"
};

const formattedJSON = JSON.stringify(myObject, null, 2);
console.log(formattedJSON);

• 2は、インデントのスペース数を指定します。この例では、2スペースのインデントが使用されます。
• nullは、オブジェクトのキーをフィルターする関数として使用されます。ここでは、すべてのキーを含めるように設定しています。

ライブラリの活用

• 例えば、pretty-jsonライブラリは、JSONのフォーマットをカスタマイズするためのさまざまなオプションを提供します。
• より高度なフォーマット制御やカスタマイズが必要な場合は、ライブラリを使用することもできます。

const prettyJson = require('pretty-json'); // Node.jsの場合

const formattedJSON = prettyJson.render(myObject, {
  indent: 4,
  keys: {
    quote: false // キーを引用符で囲まない
  }
});
console.log(formattedJSON);

カスタム関数の実装

• 再帰的なアプローチを使用して、オブジェクトのネストを処理できます。
• 特定のフォーマット要件がある場合は、カスタム関数を作成することもできます。

function formatJSON(obj, indent = 2) {
  const formatted = [];
  for (const key in obj) {
    const value = obj[key];
    if (typeof value === 'object' && value !== null) {
      formatted.push(`${key}: ${formatJSON(value, indent + 2)}`);
    } else {
      formatted.push(`${key}: ${JSON.stringify(value)}`);
    }
  }
  return `{\n${formatted.join(`,\n${' '.repeat(indent)}`)}\n${' '.repeat(indent - 2)}}`;
}

const myObject = {
  name: "John Doe",
  age: 30,
  city: "New York"
};

const formattedJSON = JSON.stringify(myObject, null, 2);
console.log(formattedJSON);

ライブラリの活用（pretty-json）

const prettyJson = require('pretty-json'); // Node.jsの場合

const formattedJSON = prettyJson.render(myObject, {
  indent: 4,
  keys: {
    quote: false // キーを引用符で囲まない
  }
});
console.log(formattedJSON);

• indentオプションでインデントのスペース数を指定し、keysオプションでキーの引用符を制御できます。
• pretty-jsonライブラリを使用することで、より高度なフォーマット制御やカスタマイズが可能です。

function formatJSON(obj, indent = 2) {
  const formatted = [];
  for (const key in obj) {
    const value = obj[key];
    if (typeof value === 'object' && value !== null) {
      formatted.push(`${key}: ${formatJSON(value, indent + 2)}`);
    } else {
      formatted.push(`${key}: ${JSON.stringify(value)}`);
    }
  }
  return `{\n${formatted.join(`,\n${' '.repeat(indent)}`)}\n${' '.repeat(indent - 2)}}`;
}

• インデントを指定し、オブジェクトのキーと値を適切なフォーマットで結合します。

JSONフォーマット美化ガイド

• ライブラリ
  適切なライブラリを使用して、フォーマットを自動化し、エラーを防ぎます。
• コメント
  必要に応じてコメントを追加し、コードの意図を説明します。
• 改行
  適切な改行を使用して、読みやすさを向上させます。
• 値の引用符
  文字列値は常に引用符で囲みます。
• キーの引用符
  必要に応じてキーを引用符で囲みます。
• インデント
  適切なインデントを使用し、構造を明確にします。

• JSON.stringify()メソッドの第2引数に、オブジェクトのキーをフィルターする関数や、値をフォーマットする関数を渡すことができます。

const myObject = {
  name: "John Doe",
  age: 30,
  city: "New York"
};

const formattedJSON = JSON.stringify(myObject, (key, value) => {
  if (key === 'age') {
    return value + ' years old'; // 値をフォーマットする
  }
  return value;
}, 2);
console.log(formattedJSON);

ライブラリの活用（prettier）

• prettierは、JavaScriptコードのフォーマットを自動化するツールであり、JSONのフォーマットもサポートしています。

const prettier = require('prettier'); // Node.jsの場合

const formattedJSON = prettier.format(JSON.stringify(myObject), {
  parser: 'json',
  printWidth: 80,
  tabWidth: 2
});
console.log(formattedJSON);

カスタム関数の実装（再帰的なアプローチ）

function formatJSON(obj, indent = 2) {
  const formatted = [];
  for (const key in obj) {
    const value = obj[key];
    if (typeof value === 'object' && value !== null) {
      formatted.push(`${key}: ${formatJSON(value, indent + 2)}`);
    } else {
      formatted.push(`${key}: ${JSON.stringify(value)}`);
    }
  }
  return `{\n${formatted.join(`,\n${' '.repeat(indent)}`)}\n${' '.repeat(indent - 2)}}`;
}