導入
フロントエンド開発において、APIから取得した日付文字列をDateオブジェクトに変換したり、特定の数値フォーマットを変換したりする作業は頻繁に発生します。これらをパース後に毎回ループ処理で変換していませんか？JSON.parseの第二引数である「reviver」関数を活用すれば、JSONの解析と同時にデータ変換を完了させることができ、コードの可読性と保守性を大幅に向上させることが可能です。
基礎知識
JSON.parse(text, reviver)は、JSON文字列をJavaScriptのオブジェクトに変換する標準メソッドです。第二引数のreviverは、パースの過程で「各プロパティ」に対して呼び出される変換関数です。この関数は、キー（key）と値（value）を引数に受け取り、返り値がそのプロパティの最終的な値として採用されます。再帰的にツリー構造の末端から順に処理されるため、複雑なネスト構造を持つデータでも一括で変換できるのが特徴です。
実装/解決策
reviver関数内で、現在の値が期待する形式（例えば、日付形式の文字列）であるかを判定し、該当すれば変換、そうでなければ元の値をそのまま返すロジックを組みます。これにより、サーバーから受け取った生データをアプリケーションで扱いやすい型に変換する工程を、パース処理の中に統合できます。
サンプルプログラム
以下のコードは、APIから受け取ったJSON文字列に含まれる「ISO 8601形式の日付文字列」を、自動的にDateオブジェクトに変換する実用例です。
// APIから取得したと想定されるJSON文字列
const jsonString = '{"id": 1, "name": "Project Alpha", "createdAt": "2023-10-27T10:00:00Z"}';
// reviver関数：日付文字列をDateオブジェクトに変換する
const data = JSON.parse(jsonString, (key, value) => {
// ISO 8601形式の日付文字列を簡易的に判定（正規表現などを使用）
const dateRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}/;
// 文字列であり、かつ日付形式にマッチする場合のみ変換
if (typeof value === 'string' && dateRegex.test(value)) {
return new Date(value);
}
// それ以外は元の値をそのまま返す
return value;
});
console.log(data.createdAt instanceof Date); // true
console.log(data.createdAt.getFullYear()); // 2023
応用・注意点
reviverを使用する際は、以下の点に注意してください。
1. 変換ロジックの肥大化
reviver関数内に複雑な条件分岐を詰め込みすぎると、パース処理全体のパフォーマンスが低下します。特定の型変換に特化させるか、あるいは共通の変換関数を呼び出す形に整理しましょう。
2. 再帰的な実行
reviverはオブジェクトの階層を深く掘り下げて実行されます。ルートノードの処理も最後に行われるため、関数が意図せず全体を上書きしないよう、返り値の制御には注意が必要です。
3. 型安全性の確保
TypeScriptを使用している場合、JSON.parseの結果はany型になりがちです。reviverで変換をかけた後は、適切にインターフェースを定義し、型アサーションを行うか、Zodなどのバリデーションライブラリと組み合わせてデータの整合性を担保することを推奨します。
シンプルなデータ変換であれば、reviverは非常に強力な武器になります。ぜひ次回のプロジェクトで活用してみてください。