JavaScriptのJSONでDateを扱う

困ったこと

さて、困りました。
JavaScriptでデータを保存しようとしたらDate型がデータに入っていると
そのままパースできませんでした。
つまり、

let saveData = {
  loginDate: new Date(),
  name: "taro",
};

let json = JSON.stringify(saveData);

// データを取り出したい
let parsedData = JSON.parse(json);
// loginDateが何日か知りたい
console.log(parsedData.loginDate.getDate());

これで最後のconsole.logでloginDateが何日かを知ることができる！と思ったら実際には

Error: parsedData.loginDate.getDate is not a function

というエラーが...
今回はこれを解決したいです。

解決方法

JSON.parseの第2引数(reviver)を利用してパースします。
上の例ではJSON.parse以降を以下のようにします。

// データを取り出したい
let parsedData = JSON.parse(json, (key, value) => {
  if (key === "loginDate") {
    // parseは数値表現にするだけなのでDateコンストラクタに渡す
    return new Date(Date.parse(value));
  }
  return value;
});
// loginDateが何日か知りたい
console.log(parsedData.loginDate.getDate());

これで無事console.logで日付が表示されるようになります。

そもそも何が起こったのか

そもそも、なぜJSON.stringifyで生成しただけの文字列をJSON.parseでパースできなかったのでしょう？
これは

• JSONには日付を表すデータ型が存在しない
  -> Date.toJSON の存在によりISO文字列表現にされる (2024/03/05修正 @juner さんありがとうございます)
• JavaScriptには型の概念がない

という2つが組み合わさった結果発生します。
つまり

1. JSON.parseでDateオブジェクトが日付の文字列として出力される
2. JavaScriptには型の概念がないのでそのまま文字列としてパースされる
3. 文字列なのでDateに存在している関数等が使えない

ということでエラーが発生してしまうのでした。
知っていればなんてことはないですが、稀に忘れて引っかかるので
そのたびにこれを思い出します...

まとめ

JavaScriptでDateをJSONにする時はパース処理に気を付ける！