JavaScript で JSON をオブジェクトに変換する

JSON.parse() を使うと、JSON形式の文字列をJavaScriptの値に変換できます。オブジェクト形式のJSON文書なら、解析結果はプロパティを読み取って利用できるJavaScriptオブジェクトです。解析だけでは、アプリケーション独自のルールは検証されず、日付文字列が Date オブジェクトに変わることも、信頼できない値がHTMLで安全に使えるようになることもありません。以下の例では、基本的な変換、不正な入力への対処、入れ子になったプロパティへのアクセス、日付変換を説明します。

JSONの解析結果

JSONは、オブジェクト、配列、文字列、数値、真偽値、null などの値を表すテキスト形式です。JSON文字列はテキストであり、解析するとJavaScriptは対応する値を返します。オブジェクト形式の文書からはオブジェクトが、JSON配列からは配列が生成されます。解析結果が必ずオブジェクトになるとは限らないため、入力にどのような形を期待するかを踏まえてコードを書く必要があります。

JSONの構文はJavaScriptのオブジェクトリテラルより厳密です。オブジェクトのキーと文字列値には二重引用符が必要で、JSONではコメント、関数、末尾のカンマは使えません。たとえば、{"name":"Ari","active":true} はJSONテキストですが、{name: 'Ari', active: true} はJSONではありません。このため、JavaScriptのオブジェクトリテラルをそのままパーサーに渡せるとは限りません。

JSON文字列を JSON.parse() で変換する

文字列を JSON.parse() に渡し、返された値をほかのJavaScriptデータと同じように使います。次の例では人物のレコードを解析し、2つのプロパティを読み取ります。

この例を実行してください。

このセクションのコードと表示されるラベルや出力は英語のままです。

const jsonText = '{"name":"Ari","age":30}';
const person = JSON.parse(jsonText);

console.log(person.name);
console.log(person.age);

最初のログには名前、2番目には数値の年齢が表示されます。JSON文書がオブジェクトを表すため、プロパティにアクセスできます。入力がすでにJavaScriptオブジェクトなら、再解析するためだけに文字列化する必要はありません。JSON.parse() が受け取るのはJSONテキストです。

不正なJSONを処理する

文字列の形式が不正で、有効なJSON構文になっていない場合、JSON.parse() は SyntaxError をスローします。ファイルやリクエストなど、想定した形式に従わない可能性のある入力を扱うときは、このエラーを捕捉してください。呼び出し元が次の処理を選べるよう、解析処理の近くでエラーを処理します。

このセクションのコードと表示されるラベルや出力は英語のままです。

const jsonText = '{"name":"Ari",}';
let person;

try {
  person = JSON.parse(jsonText);
  console.log(person.name);
} catch (error) {
  console.log("Could not parse JSON");
}

この例では、末尾にカンマがある不正な入力に対し、「Could not parse JSON」という英語のアプリケーション向けメッセージを出力します。本番コードでは、アプリケーションのログにエラーを記録したり、役に立つ検証メッセージを表示したりできます。機密性の高い入力をログに記録したり、内部エラーの詳細をユーザーに公開したりしないでください。解析に成功しても、テキストがJSON構文に従っていることしか確認できません。値を使う前に、必須プロパティや値の型を別途検証してください。

入れ子になった値を読み取る

入れ子になったオブジェクトや配列は、解析後も入れ子のJavaScript値として扱えます。通常のプロパティ記法やインデックス記法でアクセスしてください。次の例では、住所オブジェクトから市区町村を読み取り、配列の最初の要素を取得します。

このセクションのコードと表示されるラベルや出力は英語のままです。

const jsonText = '{"person":{"name":"Ari","address":{"city":"Oslo"}},"scores":[8,9]}';
const data = JSON.parse(jsonText);

console.log(data.person.address.city);
console.log(data.scores[0]);

想定する構造が重要です。person、address、scores が存在しない場合や型が異なる場合、プロパティへ直接アクセスしても、アプリケーションが必要とする値が得られないことがあります。スキーマのあるデータでは、深い階層のプロパティを使う前に解析結果を検証してください。解析によってオブジェクトがマージされたり、プロパティ名が変換されたりすることもありません。JSONテキストに表現された値が再現されます。

解析後に日付文字列を変換する

JSONには日付型がないため、日付は文字列として表されます。解析しても、その文字列は変わりません。既知の日付プロパティは解析後に new Date() で明示的に変換してください。特定の時点を表す値を扱う場合は、タイムゾーン指定子を含む標準的なISO形式を使います。

このセクションのコードと表示されるラベルや出力は英語のままです。

const jsonText = '{"createdAt":"2024-01-15T12:30:00Z"}';
const data = JSON.parse(jsonText);
const createdAt = new Date(data.createdAt);

console.log(createdAt instanceof Date);

new Date() は文字列からJavaScriptの Date を作成します。一方、new を付けない Date() は文字列を返します。日付の解析結果は入力形式によって変わることがあるため、データを受け取る境界で形式を統一し、信頼できない入力では生成された日付が有効か確認してください。アプリケーションで日付として扱うフィールドだけを変換します。JSONパーサーが日付を自動判定することはありません。