JSON でオブジェクトを保存する
オブジェクトをシリアライズして保存・復元します。
「JSON でオブジェクトを保存する」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。
ストレージに保存できるのは文字列だけ
Web Storage が保存できるのは文字列なので、オブジェクトを直接保存することはできません。保存すると、役に立たないテキスト "[object Object]" になります。JSON を使って解決します。
localStorage.setItem("user", { name: "Ada" });
console.log(localStorage.getItem("user")); // "[object Object]"JSON.stringify でシリアライズする
保存する前に JSON.stringify でオブジェクトを JSON 文字列に変換します。
const user = { name: "Ada", age: 36 };
localStorage.setItem("user", JSON.stringify(user));JSON.parse でデシリアライズする
読み取るときは、JSON.parse で文字列をオブジェクトに戻します。
const raw = localStorage.getItem("user");
const user = JSON.parse(raw);
console.log(user.name); // "Ada"往復処理
一連のパターンは、保存時に stringify し、読み取り時に parse することです。オブジェクトにも配列にも同じ方法を使えます。
localStorage.setItem("nums", JSON.stringify([1, 2, 3]));
const nums = JSON.parse(localStorage.getItem("nums"));
console.log(nums[0]); // 1null のケースを処理する
JSON.parse(null) は null を返し、例外を throw しません。ただし、データが存在しない場合の解析では予期しない結果になることがあります。デフォルト値を用意してください。
const raw = localStorage.getItem("settings");
const settings = raw ? JSON.parse(raw) : {};データ破損に備える
保存された JSON の形式が不正だと、JSON.parse は SyntaxError を throw します。1 つの不正なエントリでアプリ全体がクラッシュしないよう、try/catch で囲みます。
function readJSON(key, fallback) {
try { return JSON.parse(localStorage.getItem(key)) ?? fallback; }
catch { return fallback; }
}再利用可能な保存ヘルパー
stringify の処理をヘルパーにまとめ、実行し忘れないようにします。
function saveJSON(key, value) {
localStorage.setItem(key, JSON.stringify(value));
}
saveJSON("cart", [{ id: 1, qty: 2 }]);JSON で失われるもの
JSON は関数、undefined、Date オブジェクト（文字列になります）、Map、Set を表現できません。この点を考慮し、日付は ISO 文字列として保存して、読み取り時に再構築します。
const obj = { fn: () => 1, when: new Date() };
console.log(JSON.stringify(obj)); // {"when":"2026-..."}日付を復元する
日付は文字列にシリアライズされるため、Date のメソッドが必要な場合は、解析後に日付へ戻します。
const data = JSON.parse(localStorage.getItem("event"));
data.when = new Date(data.when);ネストしたデータを更新する
保存したオブジェクトの一部を変更するには、読み取り、コピーを変更してから、書き戻します。ストレージには部分更新用の API はありません。
const cart = JSON.parse(localStorage.getItem("cart")) || [];
cart.push({ id: 9, qty: 1 });
localStorage.setItem("cart", JSON.stringify(cart));保存するデータ形式をバージョン管理する
アプリのデータ形式は時間とともに変化します。version フィールドを保存しておくと、形式の変更時に古いデータを移行したり破棄したりできます。
saveJSON("prefs", { version: 2, theme: "dark" });クイックチェック
Web Storage にオブジェクトを保存します。
まとめ
ストレージに保存できるのは文字列なので、保存前にオブジェクトを JSON.stringify し、読み取り時に JSON.parse します。解析は try/catch で保護し、デフォルト値を用意します。JSON では関数と undefined が失われ、日付は文字列になります。ネストしたデータは読み取り、変更、書き戻しの順で更新し、保存するデータ形式のバージョン管理も検討してください。
よくある質問
「JSON でオブジェクトを保存する」レッスンは無料ですか？
はい。「JSON でオブジェクトを保存する」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。
「JSON でオブジェクトを保存する」で何を学びますか？
オブジェクトをシリアライズして保存・復元します。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
JavaScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「JSON でオブジェクトを保存する」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJavaScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- データを保存して読み取る
- localStorage と sessionStorage
- JSON でオブジェクトを保存する
- Storage イベントと容量制限