カテゴリー
お問い合わせ

【モダンJS】セットで覚えたい！「スプレッド構文」と「分割代入」の便利な使い方

JavaScript
目次

JavaScriptで配列やオブジェクトを扱う際、「配列同士をくっつけたい」「オブジェクトの中の一部だけを取り出したい」といった場面は頻繁に登場します。

ひと昔前であれば、配列を結合するために concat() を使ったり、オブジェクトの値を一つずつ 変数 = オブジェクト.プロパティ名 のように何行もかけて代入したりと、少し冗長なコードを書く必要がありました。

モダンJSの強力な武器！
ES6（ECMAScript 2015）で登場した 「スプレッド構文（...）」 と 「分割代入」 を使うと、これらの操作がたった1行でスッキリと書けるようになります！

この2つは別々の機能ですが、セットで使われることが非常に多い「ベストパートナー」です。
今回は、この2つの便利な構文の使い方を、画面出力デモと一緒に分かりやすく解説します！

デモ動作

See the Pen スプレッド構文と分割代入 by mikanbako (@mikanbako) on CodePen.

全画面でのデモ動作は以下のリンクからご確認下さい！（別タブで開かれます）

実装コードの紹介

【HTML】

<div class="l-wrap">
  <h2>スプレッド構文＆分割代入 デモ</h2>
  
  <div class="p-buttons">
    <button class="p-btn" id="btn-spread-arr">① 配列のスプレッド構文</button>
    <button class="p-btn" id="btn-spread-obj">② オブジェクトのスプレッド構文</button>
    <button class="p-btn" id="btn-destruct">③ 分割代入 (必要な値だけ抽出)</button>
  </div>

  <div class="p-result-box">
    <h3>実行結果</h3>
    <pre id="js-result">ボタンを押して結果を確認してね！</pre>
  </div>
</div>

【CSS】

.l-wrap {
  max-width: 600px;
  margin: 0 auto;
  font-size: 14px;
}

.p-result-box {
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  text-align: left;
}

pre {
  font-family: monospace;
  background-color: #f1f1f1;
  padding: 10px;
  border-radius: 4px;
  overflow-x: auto;
}

.p-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.p-btn {
  background-color: #1bb4d4;
  color: #fff;
  padding: 10px 16px;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
  transition: opacity 0.2s ease-out;
}

.p-btn:hover {
  opacity: 0.8;
}

【JavaScript】

const resultBox = document.getElementById('js-result');

// =========================================
// ① 配列のスプレッド構文
// =========================================
document.getElementById('btn-spread-arr').addEventListener('click', () => {
  const array1 = ["HTML", "CSS"];
  const array2 = ["JavaScript", "Vue.js"];
  
  // 2つの配列を展開して1つにまとめる
  const combinedArray = [...array1, ...array2, "WordPress"];
  
  resultBox.textContent = "// 結合された新しい配列\n" + JSON.stringify(combinedArray, null, 2);
});

// =========================================
// ② オブジェクトのスプレッド構文
// =========================================
document.getElementById('btn-spread-obj').addEventListener('click', () => {
  // デフォルトの設定データ
  const defaultSettings = { theme: "light", lang: "ja", notification: true };
  // ユーザーが変更した設定データ（themeだけ上書きしたい）
  const userSettings = { theme: "dark" };
  
  // 2つのオブジェクトを展開してマージ（後の値で上書きされるのがポイント！）
  const mergedSettings = { ...defaultSettings, ...userSettings };
  
  resultBox.textContent = "// マージされたオブジェクト（themeがdarkに上書きされている！）\n" + JSON.stringify(mergedSettings, null, 2);
});

// =========================================
// ③ 分割代入のデモ
// =========================================
document.getElementById('btn-destruct').addEventListener('click', () => {
  // サンプルのオブジェクト（ユーザー情報）
  const user = { 
    name: "Mikanbako", 
    age: 35, 
    role: "Frontend Engineer" 
  };
  
  // オブジェクトから、nameとroleだけを同名の変数として取り出す！
  const { name, role } = user;

  // 取り出した値を使って新しいオブジェクトを作り、画面に表示
  const result = { 
    extractedName: name, 
    extractedRole: role 
  };
  
  resultBox.textContent = "// 抽出した値\n" + JSON.stringify(result, null, 2);
});

コードの解説・こだわったポイント

スプレッド構文（...）で配列やオブジェクトを展開

スプレッド（spread）とは「広げる・展開する」という意味です。 ...変数名 と書くことで、配列の「[]」やオブジェクトの「{}」の中身だけを取り出すことができます。

【配列の結合】

新しい配列 [] の中で既存の配列を展開すれば、簡単に配列の結合や追加ができます。

const combinedArray = [...array1, ...array2, "WordPress"];

【オブジェクトのマージ（合体）と上書き】

この構文はオブジェクトに対しても非常に強力です。複数のオブジェクトを展開して1つにまとめることができます。

const mergedSettings = { ...defaultSettings, ...userSettings };

ここで非常に重要なポイントは、「同じプロパティ名（キー）があった場合、後から展開された値で上書きされる」という性質です。
デモのように「基本設定を用意しておき、ユーザーが変更した部分だけを上書きして新しい設定データを作る」といった処理が、たった1行で実装できます！

分割代入で必要なプロパティだけを抽出

オブジェクトの中から特定の値を取り出したい時、毎回 user.name、user.role と書くのは面倒ですよね。 分割代入を使うと、オブジェクトのプロパティ名と同じ変数を用意するだけで値を取り出せます。

// これがモダンな書き方！
const { name, role } = user;

// 昔の書き方（何行も書く必要があった）
// const name = user.name;
// const role = user.role;

これにより、後続のコードで user. と何度もタイピングする手間が省け、コードが読みやすくなります。

なぜこの2つは「セット」なのか？

APIから取得した複雑なデータ（オブジェクト）から「分割代入」で必要なデータだけを抽出し、それを「スプレッド構文」で既存のデータと合体させて画面を更新する……といったように、この2つの構文は連携して使われることが非常に多いです。 両方とも「データを無駄なくスマートに扱う」という目的を持った最高のパートナーと言えます！

補足：参考リンク

・MDN: スプレッド構文
・MDN: 分割代入

まとめ

今回は、モダンJavaScriptの強力な武器である「スプレッド構文」と「分割代入」について解説しました。

どちらも最初は見慣れない記号（... や {} の特殊な使い方）に戸惑うかもしれませんが、一度慣れてしまえば「これなしでの開発は考えられない！」と思えるほど、コードの記述量を減らし、可読性を劇的に高めてくれます。

特にVue.jsやReactといったモダンな環境では、データの状態管理（State）を更新する際に「既存のオブジェクトをスプレッド構文でコピーしつつ、一部だけ書き換える」といった操作が息をするように行われます。

「ただ動くコード」から一歩進んで、「モダンでスマートなコード」をスラスラ書けるように、これからもこうした便利な構文を積極的に取り入れていきたいと思います！

最後まで読んでいただき、ありがとうございました！

Prev
Next

関連記事