JavaScriptスプレッド演算子の実務活用法｜業務で頻出するパターン集

JavaScriptのスプレッド演算子（…）は、モダンなWeb開発では欠かせない機能です。しかし、教科書的な使い方だけでは実務では十分ではありません。この記事では、実際のプロジェクトで頻出するスプレッド演算子の活用パターンを、具体的なコード例とともに解説します。

スプレッド演算子とは｜簡易解説

スプレッド演算子（…）は、配列やオブジェクトを「展開」する機能です。3つのドット記号で表現され、ES2015（ES6）以降で使用できます。

基本的な役割：

• 配列の要素を個別の値として展開
• オブジェクトのプロパティを別のオブジェクトにマージ
• 関数の引数として配列を渡す
• イミュータブルな更新を実現

配列の展開例：

const arr = [1, 2, 3];
const newArr = [...arr, 4, 5];
console.log(newArr); // [1, 2, 3, 4, 5]

オブジェクトのマージ例：

const obj1 = { name: '太郎', age: 25 };
const obj2 = { city: '東京', age: 26 };
const merged = { ...obj1, ...obj2 };
console.log(merged); // { name: '太郎', age: 26, city: '東京' }

業務でのユースケース｜実務で本当に使う場面

ユースケース1：APIレスポンスの差分更新

実務で最も頻繁に使う場面が、APIから取得したデータの部分更新です。バックエンドから返されたレスポンスに対して、フロントエンドで追加のメタデータを付与したり、特定フィールドを上書きしたりすることがあります。

例えば、ユーザー情報APIから取得したデータに対して、ローカルタイムゾーンの情報を追加する場合：

// APIから取得したユーザーデータ
const apiResponse = {
  id: 1001,
  name: '田中太郎',
  email: 'tanaka@example.com',
  createdAt: '2024-01-15T10:00:00Z',
  role: 'user'
};

// ローカルで追加情報を付与
const userWithLocalInfo = {
  ...apiResponse,
  timezone: 'Asia/Tokyo',
  lastFetched: new Date(),
  isLoaded: true,
  role: 'admin' // roleを上書き
};

console.log(userWithLocalInfo);
// {
//   id: 1001,
//   name: '田中太郎',
//   email: 'tanaka@example.com',
//   createdAt: '2024-01-15T10:00:00Z',
//   role: 'admin',
//   timezone: 'Asia/Tokyo',
//   lastFetched: 2024-01-20T...,
//   isLoaded: true
// }

ユースケース2：フォーム状態の管理

React等のフレームワークを使う場合、フォームの状態更新はスプレッド演算子で行います。イミュータブルな更新は、React のレンダリング最適化に必須です。

// フォーム状態の初期値
const formState = {
  firstName: '',
  lastName: '',
  email: '',
  phone: '',
  address: {
    zip: '',
    prefecture: '',
    city: ''
  }
};

// ユーザーが一つのフィールドを入力した場合
function updateFormField(fieldName, value) {
  return {
    ...formState,
    [fieldName]: value
  };
}

// ネストされたオブジェクトの更新
function updateAddressField(fieldName, value) {
  return {
    ...formState,
    address: {
      ...formState.address,
      [fieldName]: value
    }
  };
}

const updated = updateAddressField('prefecture', '東京都');
console.log(updated.address); // { zip: '', prefecture: '東京都', city: '' }

ユースケース3：配列のフィルタリングと変換の組み合わせ

複数の配列操作をスプレッド演算子で効率的に表現できます。

// 商品リストからカテゴリー別に取得
const products = [
  { id: 1, name: '商品A', category: 'electronics', price: 5000 },
  { id: 2, name: '商品B', category: 'clothing', price: 3000 },
  { id: 3, name: '商品C', category: 'electronics', price: 8000 },
  { id: 4, name: '商品D', category: 'clothing', price: 4000 }
];

// 価格が5000円以上の電化製品を取得し、税金を追加
const selectedProducts = products
  .filter(p => p.category === 'electronics' && p.price >= 5000)
  .map(p => ({
    ...p,
    taxIncluded: Math.round(p.price * 1.1),
    discountedPrice: p.price * 0.9
  }));

console.log(selectedProducts);
// [
//   { id: 1, name: '商品A', category: 'electronics', price: 5000, taxIncluded: 5500, discountedPrice: 4500 },
//   { id: 3, name: '商品C', category: 'electronics', price: 8000, taxIncluded: 8800, discountedPrice: 7200 }
// ]

実装コード｜実務で使えるコード集

パターン1：複数APIレスポンスのマージ

複数のAPIから取得したデータを統合する場面は頻繁にあります。

// ユーザー情報API
const fetchUserInfo = async (userId) => {
  const response = await fetch(`/api/users/${userId}`);
  return response.json(); // { id, name, email }
};

// ユーザーの購入履歴API
const fetchUserPurchaseHistory = async (userId) => {
  const response = await fetch(`/api/users/${userId}/purchases`);
  return response.json(); // { purchaseCount, totalSpent, lastPurchaseDate }
};

// ユーザーの設定情報API
const fetchUserSettings = async (userId) => {
  const response = await fetch(`/api/users/${userId}/settings`);
  return response.json(); // { newsletter, notifications, language }
};

// 全ての情報を統合する関数
async function fetchCompleteUserProfile(userId) {
  const [userInfo, purchaseHistory, settings] = await Promise.all([
    fetchUserInfo(userId),
    fetchUserPurchaseHistory(userId),
    fetchUserSettings(userId)
  ]);

  return {
    ...userInfo,
    ...purchaseHistory,
    settings,
    fetchedAt: new Date().toISOString()
  };
}

// 使用例
const profile = await fetchCompleteUserProfile(123);
// {
//   id: 123,
//   name: '田中太郎',
//   email: 'tanaka@example.com',
//   purchaseCount: 15,
//   totalSpent: 250000,
//   lastPurchaseDate: '2024-01-10',
//   settings: { newsletter: true, notifications: false, language: 'ja' },
//   fetchedAt: '2024-01-20T...'
// }

パターン2：配列の条件付き要素追加

条件によって配列に要素を追加するかどうかを判断するパターンです。

// 注文情報の組み立て
function createOrder(items, hasGiftCard = false, isPremiumUser = false) {
  const baseOrder = {
    items,
    subtotal: items.reduce((sum, item) => sum + item.price, 0),
    timestamp: new Date()
  };

  const orderWithOptionals = {
    ...baseOrder,
    // 条件付き要素追加
    ...(hasGiftCard && { giftWrapFee: 500, giftMessage: '' }),
    ...(isPremiumUser && { freeShipping: true, loyaltyPoints: Math.floor(baseOrder.subtotal * 0.01) })
  };

  return orderWithOptionals;
}

// 使用例
const order1 = createOrder([{ name: 'Item1', price: 1000 }], false, false);
// { items: [...], subtotal: 1000, timestamp: ... }

const order2 = createOrder(
  [{ name: 'Item1', price: 1000 }],
  true,
  true
);
// {
//   items: [...],
//   subtotal: 1000,
//   timestamp: ...,
//   giftWrapFee: 500,
//   giftMessage: '',
//   freeShipping: true,
//   loyaltyPoints: 10
// }

パターン3：TypeScriptでの型安全な使用

TypeScriptを使う場合、スプレッド演算子の型安全性を確保することが重要です。

interface UserBase {
  id: number;
  name: string;
  email: string;
}

interface UserProfile extends UserBase {
  bio?: string;
  avatar?: string;
  createdAt: Date;
}

interface UserWithMetadata extends UserProfile {
  isActive: boolean;
  lastLoginAt: Date;
}

// ベースユーザー情報から完全なユーザープロファイルを作成
function createUserProfile(baseUser: UserBase): UserProfile {
  return {
    ...baseUser,
    createdAt: new Date(),
    bio: undefined,
    avatar: undefined
  };
}

// ユーザープロファイルにメタデータを追加
function addMetadata(profile: UserProfile): UserWithMetadata {
  return {
    ...profile,
    isActive: true,
    lastLoginAt: new Date()
  };
}

// 使用例
const user: UserBase = {
  id: 1,
  name: '太郎',
  email: 'taro@example.com'
};

const profile = createUserProfile(user);
const userWithMeta = addMetadata(profile);

パターン4：配列のディープマージ

ネストされた配列を含むデータを扱う場合のパターンです。

// 購入カートの状態管理
const initialCart = {
  items: [
    { id: 1, quantity: 2, price: 1000 },
    { id: 2, quantity: 1, price: 5000 }
  ],
  discounts: []
};

// 新しい割引コードを適用
function applyDiscount(cart, discountCode) {
  return {
    ...cart,
    discounts: [
      ...cart.discounts,
      { code: discountCode, appliedAt: new Date() }
    ]
  };
}

// カートにアイテムを追加（既存アイテムの場合は数量を増加）
function addToCart(cart, newItem) {
  const existingItem = cart.items.find(item => item.id === newItem.id);

  if (existingItem) {
    return {
      ...cart,
      items: cart.items.map(item =>
        item.id === newItem.id
          ? { ...item, quantity: item.quantity + newItem.quantity }
          : item
      )
    };
  }

  return {
    ...cart,
    items: [...cart.items, newItem]
  };
}

// 使用例
let cart = initialCart;
cart = applyDiscount(cart, 'SUMMER2024');
cart = addToCart(cart, { id: 3, quantity: 1, price: 2000 });
cart = addToCart(cart, { id: 1, quantity: 1, price: 1000 }); // 既存アイテムなので数量を増加

よくある応用パターン｜実務で役立つテクニック

応用1：デフォルト値とのマージ

ユーザーが指定した設定とデフォルト設定をマージするパターンです。

// デフォルト設定
const defaultConfig = {
  timeout: 5000,
  retries: 3,
  cacheEnabled: true,
  cacheTimeout: 3600,
  debug: false,
  logLevel: 'warn'
};

// ユーザーが指定した設定
const userConfig = {
  timeout: 10000,
  retries: 5,
  debug: true
};

// マージ（ユーザー設定がデフォルトを上書き）
const finalConfig = {
  ...defaultConfig,
  ...userConfig
};

console.log(finalConfig);
// {
//   timeout: 10000,
//   retries: 5,
//   cacheEnabled: true,
//   cacheTimeout: 3600,
//   debug: true,
//   logLevel: 'warn'
// }

応用2：配列の重複排除と統合

複数の配列から重複を除いて統合するパターンです。

// 複数のタグリストから重複を排除
const tagsFromUser = ['javascript', 'react', 'typescript'];
const tagsFromAPI = ['react', 'nodejs', 'javascript', 'mongodb'];
const recentlyUsedTags = ['typescript', 'graphql'];

// Setを使って重複を排除
const allTags = [
  ...tagsFromUser,
  ...tagsFromAPI,
  ...recentlyUsedTags
];

const uniqueTags = [...new Set(allTags)];
console.log(uniqueTags);
// ['javascript', 'react', 'typescript', 'nodejs', 'mongodb', 'graphql']

// または、より詳細な処理が必要な場合
function mergeTags(...tagArrays) {
  const tagMap = new Map();
  
  tagArrays.forEach((tags, index) => {
    tags.forEach(tag => {
      if (!tagMap.has(tag)) {
        tagMap.set(tag, { name: tag, source: index });
      }
    });
  });

  return [...tagMap.values()];
}

応用3：オブジェクトプロパティの除外

特定のプロパティを除いたオブジェクトを作成するパターンです。

// APIレスポンスから機密情報を除外
const userDataFromAPI = {
  id: 1,
  name: '田中太郎',
  email: 'tanaka@example.com',
  password: 'hashed_password_123', // 除外したい
  internalId: 'internal_12345',    // 除外したい
  createdAt: '2024-01-15',
  updatedAt: '2024-01-20'
};

// 方法1：Destructuring + Rest Pattern
const { password, internalId, ...safeUserData } = userDataFromAPI;
console.log(safeUserData);
// { id: 1, name: '田中太郎', email: 'tanaka@example.com', createdAt: '2024-01-15', updatedAt: '2024-01-20' }

// 方法2：関数で汎用化
function excludeKeys(obj, keysToExclude) {
  const { [keysToExclude[0]]: _, [keysToExclude[1]]: __, ...rest } = obj;
  return rest;
}

// 方法3：より柔軟な関数
function sanitizeUser(userData) {
  const { password, internalId, ...safeData } = userData;
  return safeData;
}

const safe = sanitizeUser(userDataFromAPI);

応用4：複数のフィルタリング条件をもつ配列操作

// 複雑な検索条件に基づいてデータを抽出
const products = [
  { id: 1, name: '商品A', category: 'electronics', price: 5000, inStock: true, rating: 4.5 },
  { id: 2, name: '商品B', category: 'clothing', price: 3000, inStock: false, rating: 3.8 },
  { id: 3, name: '商品C', category: 'electronics', price: 8000, inStock: true, rating: 4.2 },
  { id: 4, name: '商品D', category: 'clothing', price: 4000, inStock: true, rating: 4.7 }
];

// 検索条件
const searchCriteria = {
  minPrice: 3000,
  maxPrice: 6000,
  categories: ['electronics'],
  inStockOnly: true,
  minRating: 4.0
};

// フィルタリング関数
function searchProducts(products, criteria) {
  return products
    .filter(p => {
      const priceMatch = p.price >= criteria.minPrice && p.price <= criteria.maxPrice;
      const categoryMatch = criteria.categories.includes(p.category);
      const stockMatch = !criteria.inStockOnly || p.inStock;
      const ratingMatch = p.rating >= criteria.minRating;
      
      return priceMatch && categoryMatch && stockMatch && ratingMatch;
    })
    .map(p => ({
      ...p,
      priceAfterTax: Math.round(p.price * 1.1),
      isPopular: p.rating >= 4.5,
      discount: p.price * 0.1
    }));
}

const results = searchProducts(products, searchCriteria);

TypeScriptでの活用例

TypeScriptを使う場合、型の安全性を保ちながらスプレッド演算子を使用することが重要です。

// APIレスポンスの型定義
interface ApiUserResponse {
  id: number;
  name: string;
  email: string;
  role: 'user' | 'admin' | 'moderator';
}

interface UserState extends ApiUserResponse {
  isLoading: boolean;
  error: string | null;
  lastFetched: Date;
}

// API層
async function fetchUser(id: number): Promise {
  const response = await fetch(`/api/users/${id}`);
  return response.json();
}

// 状態管理
class UserStore {
  private user: UserState | null = null;

  async loadUser(id: number): Promise {
    const apiUser = await fetchUser(id);
    this.user = {
      ...apiUser,
      isLoading: false,
      error: null,
      lastFetched: new Date()
    };
  }

  updateUserField(
    field: K,
    value: ApiUserResponse[K]
  ): void {
    if (this.user) {
      this.user = {
        ...this.user,
        [field]: value
      };
    }
  }

  getUser(): Readonly {
    return this.user;
  }
}

Pythonでの類似パターン

JavaScriptのスプレッド演算子に相当する操作をPythonで実装する例です。

from typing import TypedDict
from datetime import datetime
from dataclasses import dataclass, asdict

# ユーザー情報の型定義
@dataclass
class User:
    id: int
    name: str
    email: str
    role: str = 'user'

# APIレスポンスをマージ
def merge_user_data(api_response: dict, local_data: dict) -> dict:
    \"\"\"JavaScriptの {...api_response, ...local_data} に相当\"\"\"
    return {**api_response, **local_data}

# 使用例
api_user = {
    'id': 1,
    'name': '田中太郎',
    'email': 'tanaka@example.com'
}

local_data = {
    'timezone': 'Asia/Tokyo',
    'fetched_at': datetime.now().isoformat()
}

merged = merge_user_data(api_user, local_data)
# {'id': 1, 'name': '田中太郎', 'email': 'tanaka@example.com', 'timezone': 'Asia/Tokyo', 'fetched_at': '...'}

# リストの展開
items = [1, 2, 3]
extended_items = [*items, 4, 5]  # [1, 2, 3, 4, 5]

# 条件付き要素追加（JavaScriptの {...obj, ...(condition && value)} に相当）
def create_user_with_optional(user_id: int, is_admin: bool = False) -> dict:
    base_user = {'id': user_id, 'name': f'User{user_id}'}
    
    optional_fields = {'role': 'admin'} if is_admin else {}
    
    return {**base_user, **optional_fields}

print(create_user_with_optional(1, is_admin=True))
# {'id': 1, 'name': 'User1', 'role': 'admin'}

注意点｜実務で気をつけるべきこと

注意1：シャローコピーであることを理解する

スプレッド演算子はシャローコピーを行います。ネストされたオブジェクトや配列は参照がコピーされるだけなので、内部の値を変更すると元のオブジェクトにも影響します。

const original = {
  user: { name: '太郎', age: 25 },
  tags: ['javascript', 'react']
};

const copied = { ...original };

// ネストされたオブジェクトを変更
copied.user.age = 30;
console.log(original.user.age); // 30（元のオブジェクトも変更されている）

// ネストされた配列を変更
copied.tags.push('typescript');
console.log(original.tags); // ['javascript', 'react', 'typescript']

// 正しい方法：深いコピー
const deepCopied = {
  ...original,
  user: { ...original.user },
  tags: [...original.tags]
};

deepCopied.user.age = 30;
deepCopied.tags.push('typescript');
console.log(original.user.age); // 25（変更されていない）
console.log(original.tags); // ['javascript', 'react']

注意2：大規模な配列やオブジェクトのパフォーマンス

数千個の要素を持つ大規模な配列やオブジェクトで何度もスプレッド演算子を使用すると、パフォーマンスが低下する可能性があります。

// 悪い例：ループ内でスプレッド演算子を使用
let items = [];
for (let i = 0; i < 10000; i++) {
  items = [...items, { id: i, value: Math.random() }];
}

// 良い例：pushを使用してから最後に一度だけスプレッド
let items = [];
const tempItems = [];
for (let i = 0; i < 10000; i++) {
  tempItems.push({ id: i, value: Math.random() });
}
items = [...tempItems];

// またはunspreadableなメソッドを使用
let items = [];
for (let i = 0; i < 10000; i++) {
  items.push({ id: i, value: Math.random() });
}

注意3：型安全性の確保（TypeScript）

TypeScriptでスプレッド演算子を使う際は、型推論が期待通りに動作するか確認が必要です。

interface User {
  id: number;
  name: string;
  email: string;
}

interface Admin extends User {
  role: 'admin';
  permissions: string[];
}

const user: User = { id: 1, name: '太郎', email: 'taro@example.com' };

// これはコンパイルエラー（Adminにはroleが必須）
// const admin: Admin = { ...user, role: 'admin' };

// 正しい方法
const admin: Admin = {
  ...user,
  role: 'admin',
  permissions: ['read', 'write', 'delete']
};

注意4：オブジェクトのプロパティ順序

JavaScriptのオブジェクトはプロパティの順序が保証されていますが、スプレッド演算子を使う際は後ろのプロパティが前のものを上書きすることに注意しましょう。

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };

const merged1 = { ...obj1, ...obj2 };
console.log(merged1); // { a: 1, b: 3, c: 4 }

const merged2 = { ...obj2, ...obj1 };
console.log(merged2); // { b: 2, c: 4, a: 1 }

注意5：Rest パターンとの混同

関数の引数で使用される場合、スプレッド演算子は「Rest パターン」と呼ばれます。これは逆の操作を行うため、混同しないよう注意が必要です。