配列の分割代入とは何か
配列の分割代入は、配列の「位置」に合わせて、複数の変数へ一気に値を取り出す書き方です。ここが重要です：左側のパターン [a, b, c] に、右側の配列の先頭から順に対応します。足りない要素は undefined になり、必要なら既定値（デフォルト）で埋められます。
const arr = [10, 20, 30];
const [x, y, z] = arr;
console.log(x, y, z); // 10 20 30
基本構文とよく使うパターン
先頭だけ取りたい／順番に取りたい
最初の要素をすぐ使いたい時に便利です。残りは後述の「スキップ」や「残余要素」を使います。
const [first] = [10, 20, 30]; // 10
const [a, b] = [10, 20, 30]; // a=10, b=20
スキップ（不要な位置を飛ばす）
コンマで位置を飛ばせます。ここが重要です：値の「意味」は位置に依存します。飛ばすことで意図が明確になります。
const [top, , third] = [1, 2, 3]; // top=1, third=3（2はスキップ）
既定値（不足分や undefined を埋める）
既定値は「未指定／undefined」のときにだけ発動します。null は値ありとして扱われ、既定値にはなりません。
const [a = 0, b = 0] = [1]; // a=1, b=0
const [x = 0] = [undefined]; // x=0（発動）
const [y = 0] = [null]; // y=null（発動しない）
残余要素（…rest）とスプレッドの違い
残余要素で「残り全部」をまとめて受ける
最後の位置に ...rest を置くと、余った要素を配列で受け取れます。ここが重要です：残余は「受け取り側」、スプレッドは「展開して渡す側」です。
const [head, ...tail] = [10, 20, 30, 40];
console.log(head); // 10
console.log(tail); // [20, 30, 40]
スプレッドで配列コピーや結合（参考）
分割代入とは逆向きの「渡し側」です。
const a = [1, 2], b = [3];
const c = [...a, ...b]; // [1, 2, 3]
便利テクニック（重要ポイントの深掘り）
変数の入れ替え（スワップ）
一時変数なしで入れ替えできます。ここが重要です：可読性と安全性が高い定石です。
let x = 1, y = 2;
[x, y] = [y, x];
console.log(x, y); // 2 1
関数の戻り値を位置で受ける
配列で複数値を返す関数と相性抜群。意味と位置の対応をドキュメント化しておくと誤用が減ります。
const divmod = n => [Math.floor(n / 10), n % 10];
const [q, r] = divmod(47); // q=4, r=7
ネストした配列・オブジェクトの組み合わせ
必要な階層だけを分解します。ここが重要です：一行で深くやりすぎると読みにくいので、段階的に。
const data = [1, [2, 3], { id: 4, name: "Alice" }];
const [a, [b, c], { id }] = data;
console.log(a, b, c, id); // 1 2 3 4
実務で効く使い方
先頭は意味のある名前、残りは配列で扱う
「先頭が主役、残りをまとめる」ことで、読みやすい API になります。
const handle = ([event, ...payloads]) => {
console.log("event:", event, "count:", payloads.length);
};
handle(["loaded", { id: 1 }, { cache: true }]);
map のコールバックで位置を名前に変える
行の配列を、意味のあるオブジェクトへ変換すると読みやすくなります。
const rows = [
[1, "Apple", 100],
[2, "Banana", 200]
];
const view = rows.map(([id, name, price]) => ({
id,
name: name.trim(),
priceWithTax: Math.round(price * 1.1)
}));
デフォルトとスキップで「欠けても安全」
欠ける可能性があるデータを、既定値で埋めつつ必要箇所だけ抜き取る。
const toPoint = ([x = 0, y = 0] = []) => ({ x, y });
console.log(toPoint([5])); // { x: 5, y: 0 }
console.log(toPoint()); // { x: 0, y: 0 }
よくある落とし穴と回避策
要素不足で undefined（既定値を活用）
右側が短いと不足分は undefined。必要なら既定値で防御する。
const [a = 0, b = 0, c = 0] = [1]; // a=1, b=0, c=0
null は既定値が効かない
null は「値あり」。既定値にしたいなら、関数内で ?? を使う。
const toZero = v => v ?? 0; // null/undefined を 0 に
残余は“最後に1つだけ”
残余要素（...rest）は最後の位置に1つだけ。途中や複数は構文エラー。
// const [a, ...rest, b] = [1, 2, 3]; // 構文エラー
位置と意味のズレ
位置は“意味”と強く結びつきます。可読性を高めたいなら、オブジェクトの分割代入へ切り替える選択も有効です。
// 配列：位置依存
const [id, name, price] = row;
// オブジェクト：名前で依存を解消
const { id: i, name: n, price: p } = { id: 1, name: "Apple", price: 100 };
例題で理解を固める
// 1) 先頭＋残余：ログ整形
const logFirst = ([first, ...rest]) => `first=${first}, rest=${rest.join(",")}`;
console.log(logFirst(["A", "B", "C"])); // first=A, rest=B,C
// 2) 関数戻り値の分解：min/max
const minmax = arr => [Math.min(...arr), Math.max(...arr)];
const [min, max] = minmax([5, 2, 9]);
console.log(min, max); // 2 9
// 3) ネスト分解：座標とメタ
const point = [10, [20, 30], { label: "P1" }];
const [x, [y, z], { label }] = point;
console.log(x, y, z, label); // 10 20 30 P1
// 4) 変数スワップ：アルゴリズムに便利
let a = 1, b = 2;
[a, b] = [b, a];
console.log(a, b); // 2 1
// 5) 欠けても安全：既定値＋関数既定引数
const formatRow = ([id = 0, name = "", price = 0] = []) =>
`${id}:${name.trim()} (${Math.round(price * 1.1)}円)`;
console.log(formatRow([1, " Apple "])); // 1:Apple (0円) → price 既定値が効く
まとめ
配列の分割代入の核心は「位置に基づいて、必要な値だけを素早く取り出し、欠けても既定値で安全にする」ことです。スキップで不要箇所を飛ばし、残余で“残り全部”を受け、スワップや戻り値の分解でコードを簡潔に。null には既定値が効かない点・残余は最後に1つだけ・位置と意味のズレに注意し、必要ならオブジェクト分割へ切り替える。これを押さえれば、初心者でも読みやすく堅牢な ES6+ の配列ハンドリングができます。
