JavaScriptのスプレッド構文入門｜配列・オブジェクトの展開とコピー

const numbers = [1, 2, 3];

// 配列の展開
console.log(...numbers);       // 個別の値として展開
console.log([...numbers]);     // 新しい配列にコピー

// 配列のコピー
const original = [10, 20, 30];
const copy = [...original];
copy.push(40);
console.log('原本:', original);  // 変更されない
console.log('コピー:', copy);

// 配列の結合
const front = [1, 2, 3];
const back = [4, 5, 6];
const merged = [...front, ...back];
console.log('結合:', merged);

// 途中に挿入
const withInsert = [1, 2, ...back, 7, 8];
console.log('挿入:', withInsert);

1 2 3
[1, 2, 3]
原本: [10, 20, 30]
コピー: [10, 20, 30, 40]
結合: [1, 2, 3, 4, 5, 6]
挿入: [1, 2, 4, 5, 6, 7, 8]

// Math.max に配列を渡す
const scores = [85, 92, 78, 95, 88];
console.log('最大値:', Math.max(...scores));
console.log('最小値:', Math.min(...scores));

// 従来の方法（apply）との比較
console.log('最大値(apply):', Math.max.apply(null, scores));

// 複数の配列をまとめて渡す
const group1 = [10, 20, 30];
const group2 = [40, 50, 60];
console.log('全体の最大:', Math.max(...group1, ...group2));

最大値: 95
最小値: 78
最大値(apply): 95
全体の最大: 60

// オブジェクトのコピー
const defaults = { theme: 'light', language: 'ja', fontSize: 14 };
const copy2 = { ...defaults };
console.log(copy2);

// オブジェクトのマージ（後から指定した値が優先）
const userSettings = { theme: 'dark', fontSize: 16 };
const config = { ...defaults, ...userSettings };
console.log('マージ:', config);

// プロパティの上書きと追加
const baseUser = { name: '田中', role: '一般' };
const adminUser = { ...baseUser, role: '管理者', permissions: ['read', 'write'] };
console.log(adminUser);

// 特定のプロパティだけ変更するパターン
const state = { count: 0, loading: false, error: null };
const newState = { ...state, count: state.count + 1, loading: true };
console.log('旧:', state);
console.log('新:', newState);

{ theme: 'light', language: 'ja', fontSize: 14 }
マージ: { theme: 'dark', language: 'ja', fontSize: 16 }
{ name: '田中', role: '管理者', permissions: ['read', 'write'] }
旧: { count: 0, loading: false, error: null }
新: { count: 1, loading: true, error: null }

// 配列の重複除去
const withDuplicates = [1, 2, 2, 3, 3, 3, 4];
const unique = [...new Set(withDuplicates)];
console.log('重複除去:', unique);

// 文字列を1文字ずつ配列にする
const chars = [..."JavaScript"];
console.log(chars);

// 条件付きプロパティの追加
const isAdmin = true;
const user2 = {
  name: '佐藤',
  ...(isAdmin && { role: 'admin', permissions: ['all'] })
};
console.log(user2);

重複除去: [1, 2, 3, 4]
['J', 'a', 'v', 'a', 'S', 'c', 'r', 'i', 'p', 't']
{ name: '佐藤', role: 'admin', permissions: ['all'] }