クローンとマージ — spreadとObject.assign
spreadとObject.assignを使ってオブジェクトや配列をクローン・マージし、浅いコピーと上書きの順序を理解します。
「クローンとマージ — spreadとObject.assign」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン2/2です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全2レッスンが含まれています。
導入
目標: オブジェクトや配列を安全にコピーし、マージできるようになることです。
- コピーとマージのためのスプレッド
- Object.assign
- 上書きの順序
- シャローコピーの注意点
スプレッド: オブジェクトのコピー
シャローコピーには{...obj}を使用します。コピーを編集しても、元のオブジェクトのトップレベルのフィールドは変わりません。
// Shallow clone with object spread
const user = { name: "Ayla", level: 1 };
const clone = { ...user };
clone.level = 2;
console.log("Original:", user);
console.log("Clone:", clone);
Object.assign: コピー
Object.assign({}, obj)でもシャローコピーを作成できます。空のオブジェクトに代入して、元のデータを変更しないようにします。
// Shallow clone with Object.assign
const settings = { theme: "dark", compact: false };
const copy = Object.assign({}, settings);
copy.compact = true;
console.log("Settings:", settings);
console.log("Copy:", copy);
マージ: 順序が重要
マージでは順序が重要です。後のソースが先のキーを上書きします（ここではbが9になります）。
// Merge: later keys overwrite earlier ones
const base = { a: 1, b: 2 };
const extra = { b: 9, c: 3 };
const mergedSpread = { ...base, ...extra };
const mergedAssign = Object.assign({}, base, extra);
console.log("Spread merged:", mergedSpread);
console.log("Assign merged:", mergedAssign);
配列スプレッド: コピーとマージ
[...arr]で配列をコピーできます。[...a, ...b]を使えば、元の配列を変更せずに配列を結合できます。
// Arrays: clone and merge with spread
const nums = [1, 2, 3];
const cloneNums = [...nums];
const more = [4, 5];
const mergedNums = [...nums, ...more];
console.log("nums:", nums);
console.log("clone:", cloneNums);
console.log("merged:", mergedNums);
シャローコピーとディープコピー
シャローコピーでは、ネストされたオブジェクトや配列が共有されます。深い構造を扱う場合は、内側の各レベルを明示的にコピーします。
// Shallow copy caveat: nested objects are shared
const original = { user: { name: "Mina" }, active: true };
const shallow = { ...original };
// Mutate nested object
shallow.user.name = "Lena";
console.log("Original:", original);
console.log("Shallow:", shallow);
コピー方法のクイズ
クイックチェック: 変更せずにシャローコピーする方法
まとめ
まとめ: 空のオブジェクトにスプレッドまたはObject.assignを使ってコピーし、後のソースを最後に配置してマージしました。これらはシャローコピーであることを覚えておきましょう。
よくある質問
「クローンとマージ — spreadとObject.assign」レッスンは無料ですか？
はい。「クローンとマージ — spreadとObject.assign」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全2レッスンが含まれています。
「クローンとマージ — spreadとObject.assign」で何を学びますか？
spreadとObject.assignを使ってオブジェクトや配列をクローン・マージし、浅いコピーと上書きの順序を理解します。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
JavaScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/2です。
「クローンとマージ — spreadとObject.assign」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJavaScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- ArrayのCRUDとIteration、Objectの基本とAccess
- クローンとマージ — spreadとObject.assign