JavaScript分割代入・スプレッド構文｜早見表とコピペ実例30選

分割代入とは、配列やオブジェクトから値を取り出して、まとめて変数に入れる構文です。 同じ ... を使うスプレッド構文は「中身を展開する」、残余（レスト）構文は「残りをまとめる」という逆向きの働きをします。

この記事では、まず構文と用途の早見表で全体を押さえ、そのあとコピペできる実例30個をすべて Node.js 22.22.2 で実行し、出力を付けて紹介します。さらに、スプレッドによる浅いコピーで内側のオブジェクトが共有される様子を実行で確認し、structuredClone との違い、React の state 更新や API レスポンスの取り出しに使えるスニペット、undefined を分割代入したときなどの実際のエラー文と直し方までまとめました。

分割代入・スプレッド構文の早見表

見分け方は1つだけです。... が = の左側や関数の引数定義にあれば「残余（まとめる）」、右側や関数呼び出しにあれば「スプレッド（展開する）」です。

スプレッド構文と残余引数の違い

function total(...prices) {          // 残余引数：まとめる
  return prices.reduce((s, n) => s + n, 0);
}
const cart = [300, 150, 80];
console.log(total(...cart));          // スプレッド：展開する
// 530

古いコードで見かける arguments オブジェクトは配列ではないため map などが使えず、アロー関数では使えません。新しく書くときは残余引数 ...args を使うと、そのまま配列メソッドが使えます。

配列の分割代入（実例1〜7）

以下の実例はすべて Node.js 22.22.2 で実行した出力です。ファイルを .mjs で保存し node ファイル名.mjs で同じ結果になります。

// 1. 順に取り出す
const [a, b] = [10, 20];
console.log(a, b);
// 10 20

// 2. 途中を飛ばす
const [first, , third] = ['A', 'B', 'C'];
console.log(first, third);
// A C

// 3. 既定値（undefined のときだけ使われる）
const [x = 1, y = 2] = [undefined, null];
console.log(x, y);
// 1 null

// 4. 残りを配列で受け取る
const [head, ...tail] = [1, 2, 3, 4];
console.log(head, tail);
// 1 [ 2, 3, 4 ]

// 5. 値の交換（let で宣言した変数に代入）
let left = 'left', right = 'right';
[left, right] = [right, left];
console.log(left, right);
// right left

// 6. ネストした配列
const [[r, g], [, y2]] = [[255, 128], [0, 64]];
console.log(r, g, y2);
// 255 128 64

// 7. 文字列や Set も分割代入できる（反復可能なら OK）
const [c1, c2] = 'あいう';
console.log(c1, c2);
// あ い
const [k] = new Set(['s1', 's2']);
console.log(k);
// s1

実例3がよくつまずく点です。既定値が使われるのは値が undefined のときだけで、null はそのまま入ります。 null も既定値にしたいときは、取り出したあとに y ?? 2 と書きます。

実例5の交換は、前の行の末尾にセミコロンを書くようにしてください。セミコロンを省くスタイルだと、前の行と [...] がつながって別の式として解釈されることがあります。

オブジェクトの分割代入（実例8〜15）

// 8. プロパティ名で取り出す
const user = { id: 7, name: '佐藤', role: 'admin' };
const { id, name } = user;
console.log(id, name);
// 7 佐藤

// 9. 名前を変えて受け取る（元の名前: 新しい名前）
const { name: userName, id: userId } = { id: 7, name: '佐藤' };
console.log(userName, userId);
// 佐藤 7

// 10. 既定値（null は既定値にならない）
const { stock = 0, unit = '個' } = { stock: null };
console.log(stock, unit);
// null 個

// 11. 名前変更と既定値を同時に
const { title: label = '無題' } = {};
console.log(label);
// 無題

// 12. ネストしたオブジェクト
const order = { id: 1, customer: { name: '田中', address: { city: '札幌' } } };
const { customer: { name: customerName, address: { city } } } = order;
console.log(customerName, city);
// 田中 札幌

// 13. 特定のキーを除いた残り（返す前に機密項目を外す）
const { password, ...safeUser } = { id: 1, email: 'a@example.com', password: 'secret' };
console.log(JSON.stringify(safeUser));
// {"id":1,"email":"a@example.com"}

// 14. 変数で指定したキーを取り出す
const key = 'price';
const { [key]: value } = { price: 1200 };
console.log(value);
// 1200

// 15. 配列もオブジェクトとして分割代入できる
const { length, 0: firstItem } = ['x', 'y', 'z'];
console.log(length, firstItem);
// 3 x

実例12では customer と address という変数は作られません。 コロンの左はたどる道筋で、変数になるのは一番内側の customerName と city だけです。customer 自体も欲しいときは const { customer, customer: { name } } = order と2回書けます。

実例13の ...safeUser は新しいオブジェクトです。 元の user から password を消す（delete）のではなく、除いたコピーを作るので、元データを変えずに済みます。

宣言済みの変数にオブジェクトを分割代入する

let で宣言した変数にあとから代入するときは、文全体をかっこで囲みます。

let a, b;
({ a, b } = { a: 1, b: 2 });
console.log(a, b);
// 1 2

かっこを付けないと { がブロックの始まりと解釈され、SyntaxError: Unexpected token '=' になります（後述のエラー一覧を参照）。

関数の引数とループでの使い方（実例16〜20）

// 16. 引数をオブジェクトで受け取る（順番を気にしなくてよい）
function greet({ name, honorific = 'さん' }) {
  return `${name}${honorific}`;
}
console.log(greet({ name: '鈴木' }));
// 鈴木さん

// 17. 引数全体にも既定値 {} を付けると、引数なしで呼べる
function fetchTasks({ page = 1, limit = 20 } = {}) {
  return { page, limit };
}
console.log(JSON.stringify(fetchTasks()));
// {"page":1,"limit":20}
console.log(JSON.stringify(fetchTasks({ limit: 50 })));
// {"page":1,"limit":50}

// 18. コールバックの引数で取り出す
const items = [{ id: 1, name: 'ペン', qty: 3 }, { id: 2, name: 'ノート', qty: 0 }];
console.log(items.filter(({ qty }) => qty > 0).map(({ name }) => name));
// [ 'ペン' ]

// 19. Object.entries と for...of
const stockMap = { pen: 3, note: 5 };
for (const [item, qty] of Object.entries(stockMap)) console.log(item, qty);
// pen 3
// note 5

// 20. 複数の値を配列で返して受け取る
function minMax(nums) {
  return [Math.min(...nums), Math.max(...nums)];
}
const [min, max] = minMax([4, 9, 1]);
console.log(min, max);
// 1 9

実例17の = {} を付けないと、fetchTasks() を呼んだ瞬間に TypeError になります。 引数をオブジェクトで受け取る関数には、引数全体の既定値 = {} をセットで書いておくと安心です。

戻り値を配列で返すか、オブジェクトで返すかの目安は次のとおりです。

スプレッド構文：配列（実例21〜24）

// 21. 配列のコピー（浅いコピー）
const arr = [1, 2];
const copy = [...arr];
copy.push(3);
console.log(arr, copy);
// [ 1, 2 ] [ 1, 2, 3 ]

// 22. 結合（間に値も入れられる）
const merged = [...[1, 2], 0, ...[3, 4]];
console.log(merged);
// [ 1, 2, 0, 3, 4 ]

// 23. 配列を関数の引数に展開
console.log(Math.max(...[5, 12, 8]));
// 12

// 24. 文字列を1文字ずつ（絵文字も1文字）、Set で重複を除く
console.log([...'ねこ🐈'], [...new Set([1, 1, 2, 3, 3])]);
// [ 'ね', 'こ', '🐈' ] [ 1, 2, 3 ]

実例24の [...'ねこ🐈'] は、'ねこ🐈'.split('') と違って絵文字を1文字として扱います。 文字列は「コードポイント」単位で反復されるためです（家族の絵文字のような結合文字は複数に分かれます）。

スプレッド構文：オブジェクトと Map（実例25〜27）

// 25. コピーして一部を上書き（後に書いたほうが勝つ）
const base = { theme: 'light', lang: 'ja' };
console.log(JSON.stringify({ ...base, lang: 'en' }));
// {"theme":"light","lang":"en"}
console.log(JSON.stringify({ lang: 'en', ...base }));
// {"lang":"ja","theme":"light"}

// 26. 条件を満たすときだけキーを足す
const isAdmin = false;
const query = { status: 'open', ...(isAdmin && { all: true }), ...(1 && { page: 1 }) };
console.log(JSON.stringify(query));
// {"status":"open","page":1}

// 27. Map を配列に展開して変換し、オブジェクトに戻す
const m = new Map([['a', 1], ['b', 2]]);
console.log([...m], [...m.keys()]);
// [ [ 'a', 1 ], [ 'b', 2 ] ] [ 'a', 'b' ]
console.log(JSON.stringify(Object.fromEntries([...m].map(([k, v]) => [k, v * 10]))));
// {"a":10,"b":20}

実例25は「既定値を先、上書きしたい値を後」と覚えると迷いません。 { ...defaults, ...userOptions } の形がよく使われます。

実例26は、false や undefined をオブジェクトに展開しても何も追加されない性質を使っています。読みやすさを優先するなら ...(isAdmin ? { all: true } : {}) と書いても同じ結果です。

残余引数と配列の不変な更新（実例28〜30）

// 28. 可変長の引数を配列で受け取る
function sum(...nums) {
  return nums.reduce((s, n) => s + n, 0);
}
console.log(sum(1, 2, 3), sum());
// 6 0

// 29. 先頭の引数だけ別に受け取る
function log(level, ...messages) {
  console.log(`[${level}]`, messages.join(' '));
}
log('INFO', '在庫', '更新', '完了');
// [INFO] 在庫 更新 完了

// 30. 1件だけ書き換えた新しい配列を作る（元の配列はそのまま）
const tasks = [{ id: 1, done: false }, { id: 2, done: false }];
const next = tasks.map((t) => (t.id === 2 ? { ...t, done: true } : t));
console.log(JSON.stringify(next));
// [{"id":1,"done":false},{"id":2,"done":true}]
console.log(tasks[1].done, next[0] === tasks[0]);
// false true

実例30の2行目に注目してください。 変更しなかった id: 1 の要素は、新旧の配列で同じオブジェクトを指したまま（true）です。これが次の「浅いコピー」の話につながります。

浅いコピーの落とし穴と structuredClone

スプレッドでのコピーは「浅いコピー」で、複製されるのは1段目だけです。 2段目以降のオブジェクトや配列は、コピー元と同じものを共有します。

const original = { id: 1, name: '備品A', tags: ['文具'], stock: { warehouse: 10 } };

const copy = { ...original };
copy.name = '備品B';             // 1段目：別々
copy.stock.warehouse = 0;        // 2段目：共有されている
copy.tags.push('消耗品');

console.log(original.name, original.stock.warehouse, original.tags);
console.log(copy.stock === original.stock, copy.tags === original.tags);

備品A 0 [ '文具', '消耗品' ]
true true

copy を変えたつもりが、original の在庫数（0）とタグも変わっています。 図にすると次のとおりです。

flowchart LR
    subgraph original
        O1[id: 1]
        O2[name: 備品A]
        O3[stock]
    end
    subgraph copy
        C1[id: 1]
        C2[name: 備品B]
        C3[stock]
    end
    O3 --> S[(warehouse: 10 → 0<br>共有されている1つのオブジェクト)]
    C3 --> S

直し方は2つあります。

const original2 = { id: 1, stock: { warehouse: 10 }, createdAt: new Date('2026-10-01T00:00:00Z') };

// 方法1：structuredClone で丸ごと深いコピー
const deep = structuredClone(original2);
deep.stock.warehouse = 0;
console.log(original2.stock.warehouse, deep.stock === original2.stock, deep.createdAt instanceof Date);
// 10 false true

// 方法2：変える階層だけスプレッドを重ねる
const nested = { ...original2, stock: { ...original2.stock, warehouse: 5 } };
console.log(original2.stock.warehouse, nested.stock.warehouse, nested.createdAt === original2.createdAt);
// 10 5 true

// structuredClone は関数を複製できない
try { structuredClone({ fn() {} }); } catch (e) { console.log(`${e.name}: ${e.message}`); }
// DataCloneError: fn() {} could not be cloned.

// JSON 経由のコピーは Date が文字列になる
const json = JSON.parse(JSON.stringify(original2));
console.log(typeof json.createdAt, json.createdAt);
// string 2026-10-01T00:00:00.000Z

「変える部分だけ新しく作り、変えない部分は共有する」のが方法2の考え方で、React などの状態管理と相性がよい書き方です。 オブジェクトのコピー方法や Object.assign との比較は「JavaScriptオブジェクト操作まとめ」の記事で一覧にしています。

コピペで使えるスニペット集

以下も Node.js 22.22.2 で実行しています（React は使わず、state に渡す値の作り方だけを確認しています）。

API レスポンスから必要な値だけ取り出す

// fetch(...).then(r => r.json()) の結果を想定した固定データ
const response = {
  data: { items: [{ id: 1, title: '議事録' }, { id: 2, title: '週報' }], total: 2 },
  meta: { page: 1, nextCursor: null },
};
const { data: { items = [], total = 0 } = {}, meta: { nextCursor = null } = {} } = response;
console.log(items.length, total, nextCursor);
// 2 2 null

ネストの各段に = {} を付けておくと、data や meta が欠けたレスポンスでも TypeError になりません。

React の state 更新（配列の追加・更新・削除）

let todos = [{ id: 1, text: '発注', done: false }];
todos = [...todos, { id: 2, text: '検品', done: false }];            // 追加
todos = todos.map((t) => (t.id === 1 ? { ...t, done: true } : t));    // 更新
todos = todos.filter((t) => t.id !== 2);                              // 削除
console.log(JSON.stringify(todos));
// [{"id":1,"text":"発注","done":true}]

React では setTodos(prev => [...prev, newTodo]) のように、右辺の式をそのまま set 関数に渡します。push や t.done = true で元の配列を書き換えると、参照が変わらないため再描画されないことがあります。 新しい配列・オブジェクトを作る形にすると確実に反映されます。

ネストした state の一部だけ更新する

let form = { user: { name: '山田', address: { city: '仙台', zip: '980-0000' } }, agreed: false };
const prev = form;
form = { ...form, user: { ...form.user, address: { ...form.user.address, city: '盛岡' } } };
console.log(form.user.address.city, prev.user.address.city, form.agreed, prev.user === form.user);
// 盛岡 仙台 false false

変更した経路（form → user → address）だけが新しいオブジェクトになり、元の prev は仙台のままです。ネストが深くなる場合は、state の形を平らにするか Immer などのライブラリを検討すると読みやすくなります。

既定の設定とオプションをマージする

const defaults = { timeout: 5000, retries: 2, headers: { Accept: 'application/json' } };
function request(url, options = {}) {
  return { ...defaults, ...options, headers: { ...defaults.headers, ...options.headers } };
}
console.log(JSON.stringify(request('/tasks', { retries: 0, headers: { 'X-Trace': 'abc' } })));
// {"timeout":5000,"retries":0,"headers":{"Accept":"application/json","X-Trace":"abc"}}

headers のように中にオブジェクトを持つ項目は、その段もスプレッドでマージします。 1段だけだと options.headers が既定の Accept を丸ごと置き換えます。

props から使うものだけ取り出して残りを渡す

function Button({ label, variant = 'primary', ...rest }) {
  return { label, className: `btn btn-${variant}`, ...rest };
}
console.log(JSON.stringify(Button({ label: '保存', disabled: true, 'aria-label': '保存する' })));
// {"label":"保存","className":"btn btn-primary","disabled":true,"aria-label":"保存する"}

JSX では <button className={...} {...rest}>{label}</button> のように、残りの属性をそのまま渡せます。

よくあるエラー文と直し方

Node.js 22.22.2 で実際に出たエラー文です。 検索するときはこの文言で調べるとすぐ見つかります。

配列へのスプレッド [...null] はエラー、オブジェクトへのスプレッド { ...null } はエラーにならない、という違いは覚えておくと役立ちます。

直す前と後

// 直す前：API が data を返さなかったときに TypeError
function render(response) {
  const { data: { items } } = response;
  return items.length;
}

// 直した後：各段に既定値を置く
function renderSafe(response) {
  const { data: { items = [] } = {} } = response ?? {};
  return items.length;
}
console.log(renderSafe({}), renderSafe(undefined), renderSafe({ data: { items: [1, 2] } }));
// 0 0 2

よくある質問

Q. スプレッド構文と残余引数はどう見分けますか？ A. 値を受け取る側（= の左、関数の引数定義）なら残余、値を渡す側（= の右、関数呼び出し、配列・オブジェクトリテラル）ならスプレッドです。残余は「まとめる」、スプレッドは「ばらす」と覚えると整理しやすくなります。

Q. スプレッドでコピーしたのに元のデータが変わります。なぜですか？ A. スプレッドは浅いコピーで、2段目以降のオブジェクトは共有されるためです。丸ごと複製するなら structuredClone(obj)、一部だけ変えるなら変える階層にもスプレッドを重ねます。

Q. 既定値を書いたのに null が入ってしまいます。 A. 分割代入の既定値は undefined のときだけ使われます。 API が null を返す場合は、取り出したあとに value ?? 既定値 と書いてください。

Q. 大きな配列で Math.max(...arr) を使っても大丈夫ですか？ A. スプレッドは要素を1つずつ関数の引数にするため、要素数が非常に多いと引数の上限を超えて RangeError になることがあります。数万件以上を扱う場合は arr.reduce((m, n) => Math.max(m, n), -Infinity) のようにループで求めると安心です（本記事ではこの上限は計測していません）。

まとめ

• 分割代入は「取り出して変数に入れる」構文。配列は位置、オブジェクトはプロパティ名で対応する
• ... は左側（受け取る側）なら残余、右側（渡す側）ならスプレッド。残余は最後に1つだけ
• 既定値は undefined のときだけ。null は ?? で補う
• 関数の引数は ({ page = 1 } = {}) の形にすると、引数なしでも安全に呼べる
• スプレッドのコピーは浅い。ネストは共有されるので、structuredClone か階層ごとのスプレッドを使う
• { ...null } は {}、[...null] は TypeError。エラー文で原因を見分けられる

株式会社RJCでは、JavaScript の構文や書き方の工夫を仲間と学び合っています。こうした知識を共有しながら、日々技術を磨いています。

株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。