オブジェクトの分割代入とスプレッド
分割代入でオブジェクトのプロパティを取り出し、スプレッド演算子でオブジェクトを複製・マージし、関数シグネチャで rest パラメーターを使います。
「オブジェクトの分割代入とスプレッド」はCoddyKit上の無料Frontend Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。
分割代入とは
分割代入を使うと、オブジェクトや配列から値を取り出して名前付き変数に代入できます。複数のプロパティアクセス文を短く書くための構文であり、どのプロパティを使用するかを簡潔かつ明確に示せます。
オブジェクトの分割代入の基本
代入の左辺に波括弧を使用して、名前付きプロパティを取り出します。
const user = { name: 'Alice', age: 30, role: 'admin' };
// Without destructuring:
const name = user.name;
const age = user.age;
// With destructuring:
const { name, age, role } = user;
console.log(name); // 'Alice'
console.log(age); // 30分割代入する変数の名前変更
分割代入中にプロパティ名を変更するには、property: newName構文を使用します。プロパティ名が既存の変数名と競合する場合や、プロパティ名だけでは意味が十分に伝わらない場合に便利です。
const { name: userName, age: userAge } = user;
console.log(userName); // 'Alice'分割代入でのデフォルト値
プロパティがundefinedの場合は、デフォルト値が使用されます。名前の変更と組み合わせることもできます。
const { name, role = 'viewer', theme = 'light' } = user;
// role is 'admin' (from object)
// theme is 'light' (default — not in object)ネストしたオブジェクトの分割代入
ネストしたパターンを指定すると、ネストしたオブジェクトを分割代入できます。
const order = {
id: 42,
customer: { name: 'Bob', email: 'bob@example.com' },
total: 99.99
};
const { id, customer: { name, email }, total } = order;
console.log(name); // 'Bob'配列の分割代入
角括弧を使用すると、位置に基づいて配列を分割代入できます。カンマで要素をスキップできます。
const [first, second, , fourth] = [10, 20, 30, 40];
console.log(first); // 10
console.log(second); // 20
console.log(fourth); // 40
// Swap variables:
let a = 1, b = 2;
[a, b] = [b, a];
console.log(a, b); // 2 1関数パラメーターの分割代入
関数のパラメーターで直接分割代入すると、APIがよりすっきりし、コードの内容も自明になります。Reactコンポーネント関数で非常によく使われます。
function greet({ name, greeting = 'Hello' }) {
return `${greeting}, ${name}!`;
}
greet({ name: 'Alice' }); // 'Hello, Alice!'
greet({ name: 'Bob', greeting: 'Hi' }); // 'Hi, Bob!'オブジェクトでのスプレッド演算子
スプレッド演算子{ ...obj }はオブジェクトのシャローコピーを作成し、オブジェクトをマージできます。キーが重複する場合は、後のキーが前のキーを上書きします。
const defaults = { theme: 'light', lang: 'en', debug: false };
const userPrefs = { theme: 'dark', lang: 'fr' };
const settings = { ...defaults, ...userPrefs };
// { theme: 'dark', lang: 'fr', debug: false }配列でのスプレッド演算子
[...arr]は配列のシャローコピーを作成します。スプレッド構文を使うと、配列を連結したり、配列の先頭または末尾に項目を追加したりする処理を、不変性を保ったまま行えます。
const base = [1, 2, 3];
const extended = [...base, 4, 5]; // [1, 2, 3, 4, 5]
const prepended = [0, ...base]; // [0, 1, 2, 3]
const combined = [...base, ...extended]; // [1, 2, 3, 1, 2, 3, 4, 5]分割代入でのRest構文
Rest構文は、残りのプロパティや要素を新しいオブジェクトまたは配列にまとめます。Restはパターンの最後に置く必要があります。
const { name, ...rest } = { name: 'Alice', age: 30, role: 'admin' };
console.log(name); // 'Alice'
console.log(rest); // { age: 30, role: 'admin' }
const [head, ...tail] = [1, 2, 3, 4];
console.log(head); // 1
console.log(tail); // [2, 3, 4]シャローコピーとディープコピー
スプレッド構文と分割代入は、どちらもシャローコピーを作成します。ネストしたオブジェクトや配列は、引き続き同じ参照を共有します。ディープクローンには、structuredClone(obj)（モダン）またはJSON.parse(JSON.stringify(obj))（レガシー）を使用します。
const a = { x: 1, nested: { y: 2 } };
const b = { ...a };
b.x = 99; // a.x is still 1 (shallow copy OK)
b.nested.y = 99; // a.nested.y is now 99! (reference shared)確認問題
const { a, ...rest } = objは何を行いますか。
まとめ：分割代入とスプレッド構文
オブジェクトの分割代入は、名前付きプロパティを取り出します。配列の分割代入は、位置に基づいて要素を取り出します。コロンで名前を変更し、=でデフォルト値を設定します。ネストしたパターンで深い階層のオブジェクトを扱えます。スプレッド構文はシャローコピーを作成し、オブジェクトや配列をマージします。Restは残りのプロパティや要素をまとめます。
よくある質問
「オブジェクトの分割代入とスプレッド」レッスンは無料ですか？
はい。「オブジェクトの分割代入とスプレッド」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。
「オブジェクトの分割代入とスプレッド」で何を学びますか？
分割代入でオブジェクトのプロパティを取り出し、スプレッド演算子でオブジェクトを複製・マージし、関数シグネチャで rest パラメーターを使います。 ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Frontend Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「オブジェクトの分割代入とスプレッド」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このFrontend Academyレッスンでコードを書いて実行できますか？
はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。