JavaScriptの分割代入とは？スプレッド構文の使い方を解説

PR JavaScript

JavaScriptの分割代入とは？スプレッド構文の使い方を解説

💡 この記事でわかること

  • 分割代入とは何か
  • 配列・オブジェクトそれぞれの分割代入の書き方
  • スプレッド構文とは何か
  • 配列・オブジェクトのコピーや結合への活用方法
  • 初心者がつまずきやすいポイント

1. 分割代入とは？

分割代入とは、
👉 配列やオブジェクトの中身を、まとめて複数の変数に一気に取り出す書き方です。

👉 JavaScriptの配列についての記事はこちら

👉 JavaScriptのオブジェクトについての記事はこちら

💡 配列の要素やオブジェクトのプロパティを1つずつ変数に代入するコードは長くなりがちですが、分割代入を使うと1行で簡潔に書けます。

2. 配列の分割代入

従来の書き方と、分割代入を使った書き方を比べてみましょう。

// 従来の書き方
const fruits = ["りんご", "バナナ", "みかん"];
const first = fruits[0];
const second = fruits[1];

// 分割代入を使った書き方
const [a, b] = fruits;
console.log(a); // "りんご"
console.log(b); // "バナナ"

変数名は自由に付けられますが、並び順が配列のインデックス(0番目、1番目…)に対応します。

👉 途中の要素だけ不要な場合は、カンマだけを書いて読み飛ばせます。

const [first, , third] = ["りんご", "バナナ", "みかん"];
console.log(third); // "みかん"

値が存在しない場合に備えて、デフォルト値を指定することもできます。

const [x = 10, y = 20] = [1];
console.log(x); // 1(配列の値が使われる)
console.log(y); // 20(配列に値がないのでデフォルト値が使われる)

3. オブジェクトの分割代入

オブジェクトの場合は、波かっこ{}を使い、プロパティ名を変数名として指定します。

const user = { name: "田中", age: 25 };
const { name, age } = user;
console.log(name); // "田中"
console.log(age);  // 25

💡 配列と違い、オブジェクトの分割代入は「並び順」ではなく「プロパティ名」で対応が決まります。順番を入れ替えても問題ありません。

別の変数名を付けたい場合はコロンで指定し、デフォルト値も組み合わせられます。

const { name: userName, job = "未設定" } = user;
console.log(userName); // "田中"
console.log(job);      // "未設定"(userにjobプロパティがないため)

4. 関数の引数での分割代入

分割代入は、関数の引数を受け取る場所でもよく使われます。オブジェクトを渡すだけで、必要なプロパティだけを直接取り出せます。

function showProfile({ name, age }) {
  console.log(`${name}さん(${age}歳)`);
}

showProfile({ name: "佐藤", age: 30 }); // "佐藤さん(30歳)"

👉 設定オブジェクトを引数として渡す関数(例: オプションが多数あるライブラリの関数)では、この書き方が頻繁に使われます。

5. スプレッド構文とは？

スプレッド構文とは、
👉 配列やオブジェクトの中身を「展開」して並べるための...という書き方です。

分割代入が「取り出す」ためのものだとすると、スプレッド構文は「展開して広げる」ためのものとイメージすると区別しやすくなります。

配列のコピー・結合

const fruits = ["りんご", "バナナ"];
const fruitsCopy = [...fruits]; // コピー
const moreFruits = [...fruits, "みかん"]; // 要素を追加して結合

console.log(moreFruits); // ["りんご", "バナナ", "みかん"]

オブジェクトのコピー・マージ

const user = { name: "田中", age: 25 };
const updatedUser = { ...user, age: 26 }; // ageだけ上書き

console.log(updatedUser); // { name: "田中", age: 26 }

👉 「元のオブジェクトを直接変更せず、一部だけ書き換えた新しいオブジェクトを作る」という場面で非常によく使われる書き方です。

関数呼び出しでの展開

配列の中身を、複数の引数としてそのまま展開して渡すこともできます。

function add(a, b, c) {
  return a + b + c;
}

const numbers = [1, 2, 3];
console.log(add(...numbers)); // 6

6. 初心者がつまずきやすいポイント

配列は順番、オブジェクトは名前で対応することを忘れる

配列の分割代入は書いた順番どおりに値が入りますが、オブジェクトの分割代入はプロパティ名が一致していないと値が取れません(undefinedになります)。これを混同すると意図しない結果になります。

スプレッド構文によるコピーは「浅いコピー」

スプレッド構文でオブジェクトをコピーしても、そのプロパティの値がさらにオブジェクトや配列の場合、内部までは複製されず参照が共有されたままになります(浅いコピー)。ネストが深いデータを完全に複製したい場合は、別の方法が必要になります。

残余引数(レスト構文)と見た目が同じで混同する

同じ...という記号が、分割代入の左側で「残りをまとめて受け取る」ためにも使われます(レスト構文)。見た目は同じですが、使う場所によって「展開する(スプレッド)」のか「まとめる(レスト)」のか意味が変わる点は覚えておきましょう。

const [first, ...rest] = ["りんご", "バナナ", "みかん"];
console.log(rest); // ["バナナ", "みかん"](まとめる=レスト構文)

まとめ

この記事では、JavaScriptの分割代入とスプレッド構文の使い方について解説しました。

  • 分割代入は、配列・オブジェクトの中身を変数に取り出すための書き方
  • 配列は並び順、オブジェクトはプロパティ名で対応が決まる
  • スプレッド構文(...)は、配列・オブジェクトの中身を展開するための書き方
  • コピーや結合、関数への引数展開などによく使われる
  • スプレッド構文によるコピーは浅いコピーである点に注意

どちらも最初は記号の見た目に戸惑うかもしれませんが、実際のコードを書きながら少しずつ慣れていきましょう。

-JavaScript
-, ,