はじめに
Reactでアプリを作成していますが、データの保存先に localStorage を考えています。
保存したデータをlocalStorageから取得した際に、以下のようなエラーが発生しました
date.getFullYear is not a function
解決策
JavaScriptの Date オブジェクトとして扱いたい場合、復元時に new Date() で変換する必要があります。
// データを取得・オブジェクトに変換
const stored = localStorage.getItem("localData");
const parsed = JSON.parse(stored || "[]");
// Dateオブジェクトに変換
+ return parsed.map((data: any) => ({
+ ...data,
+ date: new Date(data.date),
+ }));
JSONデータの扱い方
これは、localStorage に保存された Date オブジェクトが、文字列として保存・復元されるために起きるエラーです。
このような違いが起きるのには理由があります。
ReactはJavaScriptのオブジェクト
Reactの状態管理などで扱う Date は、JavaScriptの Date オブジェクトです。
type Task = {
title: string;
date: Date;
};
localStorageは文字列しか保存できない
localStorage に Date を保存する場合は、ISO形式の文字列に変換されます。
const task = {
title: "サンプルタスク",
date: new Date(),
};
localStorage.setItem("task", JSON.stringify(task));
ReactでJSONデータを扱う
データを正しく扱うためには、保存と読み出しのタイミングで適切な変換が必要です。
保存するとき
const saveTasks = (tasks: Task[]) => {
localStorage.setItem("ganttTasks", JSON.stringify(tasks));
};
呼び出すとき
const stored = localStorage.getItem("ganttTasks");
const parsed = JSON.parse(stored || "[]");
const tasks = parsed.map((task: any) => ({
...task,
date: new Date(task.date),
}));
Dateはどうなっているのか
それぞれのタイミングで date の中身を console.log で確認しました。
タスクの追加時（React内）
date: Fri Jun 06 2025 18:14:11 GMT+0900 (日本標準時)
JSON化されたとき
date: "2025-06-06T09:14:11.000Z"
JSON.parseしたとき
文字列のままになっている
date: "2025-06-06T09:14:11.000Z"
new Date() で変換
タスクの追加時と同じ形になる
date: Fri Jun 06 2025 18:14:11 GMT+0900 (日本標準時)
おわりに
localStorageとReactでDateを扱う際は、文字列とオブジェクトの変換に注意が必要です。
今回は new Date() を使って変換することで、getFullYear() のエラーを解消できました。
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてくださ！
▼▼▼