イミュータブルな更新パターン
新しいコピーを作成してデータを更新します。
「イミュータブルな更新パターン」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。
変更せずに更新する
不変更新では、変更を適用した新しいコピーを作成し、元のデータはそのまま残します。これは、現代的な JavaScript で予測しやすい状態管理を実現する中心的な考え方です。
主なツールはスプレッド演算子 ... です。
スプレッドでオブジェクトをコピーする
オブジェクトを新しいオブジェクトに展開してから、プロパティを上書きします。元のオブジェクトの値は以前のままです。
const user = { name: 'Ada', age: 36 };
const older = { ...user, age: 37 };
console.log(user.age);
console.log(older.age);異なるオブジェクトである
コピーは同じ参照ではなく、まったく新しいオブジェクトです。恒等比較で確認できます。
const original = { x: 1 };
const copy = { ...original };
console.log(original === copy);
console.log(original.x === copy.x);不変的にプロパティを追加する
フィールドを追加するには、古いオブジェクトを展開し、新しいキーを含めます。元のオブジェクトには何も追加されません。
const point = { x: 1, y: 2 };
const point3d = { ...point, z: 3 };
console.log(point);
console.log(point3d);不変的にプロパティを削除する
分割代入を使って不要なキーを取り出し、残りを受け取ります。残りのオブジェクトには、そのキーが含まれません。
const user = { id: 1, name: 'Ada', secret: 'x' };
const { secret, ...safe } = user;
console.log(safe);
console.log(user.secret);スプレッドで配列をコピーする
配列を展開してコピーします。map や filter などのメソッドも、元の配列を変更せずに新しい配列を返します。
const nums = [1, 2, 3];
const copy = [...nums];
const doubled = nums.map(n => n * 2);
console.log(nums);
console.log(doubled);不変的に配列へ追加する
変更を加える push の代わりに、スプレッドを使って新しい配列を作成します。元の配列の長さは変わりません。
const list = ['a', 'b'];
const added = [...list, 'c'];
const prepended = ['z', ...list];
console.log(list);
console.log(added);
console.log(prepended);不変的に配列から削除する
filter を使って不要な項目を含まない新しい配列を作成し、元の配列はそのまま残します。
const nums = [1, 2, 3, 4];
const withoutThree = nums.filter(n => n !== 3);
console.log(nums);
console.log(withoutThree);ネストされたオブジェクトを更新する
ネストされた更新では、変更する各レベルでスプレッドを使う必要があります。変更した分岐だけが再作成され、それ以外は参照によって共有されます。
const state = { user: { name: 'Ada', age: 36 }, theme: 'dark' };
const updated = {
...state,
user: { ...state.user, age: 37 }
};
console.log(state.user.age);
console.log(updated.user.age);
console.log(state.theme === updated.theme);配列内の項目を更新する
map を使い、一致する項目については変更したコピーを返し、それ以外については元の項目を返します。要素は一切変更されません。
const todos = [
{ id: 1, done: false },
{ id: 2, done: false }
];
const updated = todos.map(t =>
t.id === 2 ? { ...t, done: true } : t
);
console.log(todos[1].done);
console.log(updated[1].done);不変更新が重要な理由
共有状態を決して変更しないようにすると、変更検出が低コストになり（参照を比較するだけで済みます）、取り消しとやり直しが可能になり、遠く離れた場所で影響が現れるバグを防げます。パターンは、コピーしてからコピーを変更することです。ディープコピーについては、次のレッスンで structuredClone を扱います。
function setName(state, name) {
return { ...state, name };
}
const s1 = { name: 'old', count: 0 };
const s2 = setName(s1, 'new');
console.log(s1.name, s2.name);クイックチェック
user にすでに age がある場合、{ ...user, age: 37 } は何を生成しますか。
まとめ: 不変更新パターン
変更せずに更新する方法を学びました。
{ ...obj, key: value }のようにスプレッドを使い、コピーして上書きします。- rest の分割代入を使って、プロパティを不変的に削除します。
push/spliceの代わりに、map、filter、配列のスプレッドを使います。- ネストされた更新では各レベルでスプレッドを使い、それ以外の部分は参照によって共有します。
よくある質問
「イミュータブルな更新パターン」レッスンは無料ですか？
はい。「イミュータブルな更新パターン」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。
「イミュータブルな更新パターン」で何を学びますか？
新しいコピーを作成してデータを更新します。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
JavaScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「イミュータブルな更新パターン」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJavaScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- Object.freeze と seal
- 浅い凍結と深い凍結
- イミュータブルな更新パターン
- 深いコピーのための structuredClone