TypeScriptでJSONパース解説

TypeScriptでJSON文字列をパースする方法

JSONとは何か

JSON (JavaScript Object Notation) は、データ交換のための軽量のデータ交換フォーマットです。キーと値のペアで構成されており、人間が読みやすく、機械が簡単に解析することができます。

• JSONをパースすることで、JavaScriptオブジェクトに変換し、アプリケーション内で操作することができます。
• JSONは多くのAPIやデータストアで使用されているため、TypeScriptのアプリケーションでJSONデータを扱うことが一般的です。

JSON文字列をパースする方法

JSON.parse()メソッドを使用する 最も一般的な方法は、JSON.parse()メソッドを使用することです。このメソッドはJSON文字列を受け取り、JavaScriptオブジェクトに変換します。

const jsonString = '{ "name": "John", "age": 30 }';
const jsonObject = JSON.parse(jsonString);

console.log(jsonObject.name); // Output: John

JSON.parse()メソッドとインターフェースを使用する JSON文字列の構造が事前にわかっている場合は、インターフェースを使用して型安全なパースを行うことができます。

interface Person {
    name: string;
    age: number;
}

const jsonString = '{ "name": "John", "age": 30 }';
const jsonObject: Person = JSON.parse(jsonString);

console.log(jsonObject.name); // Output: John

第三者ライブラリを使用する より複雑なJSONの処理や検証が必要な場合は、第三者ライブラリを使用することもできます。例えば、io-tsライブラリは、JSONの型チェックと検証を提供します。

注意点

• JSON文字列に無限ループが発生する可能性がある場合は、適切な処理が必要です。
• JSON文字列に循環参照が含まれている場合、JSON.parse()メソッドはエラーを投げます。

基本的な例

const jsonString = '{ "name": "John", "age": 30 }';
const jsonObject = JSON.parse(jsonString);

console.log(jsonObject.name); // Output: John

• jsonObject変数にパースされたオブジェクトを格納し、プロパティにアクセスしています。
• JSON.parse()メソッドを使用して、JSON文字列をJavaScriptオブジェクトに変換しています。

インターフェースを使用した例

interface Person {
    name: string;
    age: number;
}

const jsonString = '{ "name": "John", "age": 30 }';
const jsonObject: Person = JSON.parse(jsonString);

console.log(jsonObject.name); // Output: John

• jsonObject変数の型をPersonインターフェースに指定することで、型安全なパースを行っています。
• Personインターフェースを定義し、JSON文字列の構造を表現しています。

第三者ライブラリを使用した例 (io-ts)

import * as t from 'io-ts';

const Person = t.type({
    name: t.string,
    age: t.number,
});

const jsonString = '{ "name": "John", "age": 30 }';
const result = Person.decode(JSON.parse(jsonString));

if (result.isRight()) {
    const jsonObject = result.right;
    console.log(jsonObject.name); // Output: John
} else {
    console.error('JSON parsing error:', result.left);
}

• 検証が失敗した場合、エラーメッセージを出力します。
• 検証が成功した場合、パースされたオブジェクトにアクセスできます。
• Person.decode()メソッドを使用して、JSON文字列をパースし、結果を検証しています。
• io-tsライブラリを使用して、JSONの型チェックと検証を行っています。

JSON.parse()メソッドの第二引数を使用する

JSON.parse()メソッドの第二引数に、リバイバー関数（reviver function）を指定することができます。リバイバー関数は、パースされた値とキーを受け取り、新しい値を返す関数です。これにより、パース後の値をカスタマイズすることができます。

const jsonString = '{ "name": "John", "age": 30, "date": "2023-12-31" }';

function reviver(key: string, value: any): any {
    if (key === 'date' && typeof value === 'string') {
        return new Date(value);
    }
    return value;
}

const jsonObject = JSON.parse(jsonString, reviver);

console.log(jsonObject.date instanceof Date); // Output: true

第三者ライブラリを使用する

より高度なJSONの処理や検証が必要な場合は、第三者ライブラリを使用することができます。例えば、io-tsライブラリは、JSONの型チェックと検証を提供し、fp-tsライブラリは関数型プログラミングの概念を使用してJSONの処理を簡潔に記述することができます。

手動パース