「配列のコピーって毎回slice(0)…」 「オブジェクトのマージがごちゃごちゃする」
最近のJavaScriptプロジェクト、特にReactやVueのコードベースでは当たり前のように使われているスプレッド構文（...）。しかし、シャローコピーの問題や、パフォーマンスへの影響など、使いこなせていない部分もあるのではないでしょうか。
この記事では、現場でよく遭遇する「困った」シチュエーションに焦点を当て、実践的な解決方法をお伝えします。特に配列やオブジェクトの操作、Reactでのstate更新でよく使うパターンを中心に、明日から使える知識を解説していきます。
実践的なユースケースと解決策
配列の操作
配列の操作では、スプレッド構文を使うことで、より直感的なコードが書けるようになります。以下の例を見てみましょう：
javascript
// 従来の配列結合
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = arr1.concat(arr2);
// スプレッド構文による結合
const combined = [...arr1, ...arr2];
// 配列の途中に要素を挿入
const numbers = [1, 2, 5, 6];
const insertAt = 2;
const newNumbers = [
...numbers.slice(0, insertAt),
3, 4,
...numbers.slice(insertAt)
]; // [1, 2, 3, 4, 5, 6]オブジェクトの操作
オブジェクトのマージや特定のプロパティの更新は、Reactの状態管理でも頻繁に使用されるパターンです：
javascript
// 従来のオブジェクトマージ
const defaults = { theme: 'light', lang: 'ja' };
const userPrefs = { theme: 'dark' };
const settings = Object.assign({}, defaults, userPrefs);
// スプレッド構文によるマージ
const settings = { ...defaults, ...userPrefs };
// 特定のプロパティの更新
const user = {
id: 1,
name: '田中',
email: 'tanaka@example.com'
};
// 特定のプロパティのみ更新
const updatedUser = {
...user,
name: '鈴木',
age: 25 // 新しいプロパティの追加も可能
};ReactでのState更新
Reactでは、状態の不変性を保つためにスプレッド構文が頻繁に使用されます：
javascript
const [state, setState] = useState({
users: [],
loading: false,
error: null
});
// BAD: 直接の更新
const updateLoadingStatus = () => {
state.loading = true; // これは動作しない
setState(state);
};
// GOOD: スプレッド構文による更新
const updateLoadingStatus = () => {
setState({
...state,
loading: true
});
};
// 配列の更新
const addUser = (newUser) => {
setState({
...state,
users: [...state.users, newUser]
});
};よくある落とし穴と対処法
シャローコピーの問題
スプレッド構文はシャローコピーを作成するため、ネストされたオブジェクトや配列では注意が必要です：
javascript
// シャローコピーの問題
const original = {
name: '田中',
address: {
city: '東京',
street: '新宿'
}
};
// シャローコピー
const copied = { ...original };
copied.address.city = '大阪'; // originalのaddress.cityも変更される
// 深いコピーが必要な場合の対処法
const deepCopied = {
...original,
address: { ...original.address }
};
// または構造化クローンを使用
const fullyCopied = structuredClone(original); // 完全なディープコピーパフォーマンスへの影響
大量のデータを扱う場合、スプレッド構文の使用は慎重に検討する必要があります：
javascript
// BAD: 大量のデータに対する不必要なコピー
const hugeArray = Array.from({ length: 10000 });
const newArray = [...hugeArray, newItem]; // 全要素をコピー
// GOOD: 必要な場合のみスプレッド構文を使用
const addItem = (array, item) => {
if (array.length < 1000) {
return [...array, item]; // 小さい配列ならスプレッド構文でOK
}
// 大きい配列は別の方法を検討
array.push(item);
return array;
};実務でのベストプラクティス
レビュー時のチェックポイント
コードレビューでは、以下の点に特に注意を払いましょう：
- ネストされたデータ構造の扱い
- シャローコピーで十分か
- 必要に応じて深いコピーを検討
- パフォーマンスの考慮
- データサイズは適切か
- 不必要なコピーが発生していないか
- TypeScriptでの型定義
typescript
// 型定義の例
interface User {
id: number;
name: string;
settings?: UserSettings;
}
// スプレッド構文を使用する関数の型定義
const updateUser = (user: User, updates: Partial<User>): User => {
return { ...user, ...updates };
};スプレッド構文は、適切に使用することでコードの可読性と保守性を大きく向上させることができます。特にReactやVueなどのモダンなフレームワークでは、状態管理の基本的な手法として定着しています。一方で、シャローコピーの特性やパフォーマンスへの影響には注意が必要です。本記事で紹介したパターンを参考に、プロジェクトに適した使い方を見つけてください。
