JavaScript配列の結合方法 - concat/スプレッド構文を基礎から

みなさん、JavaScriptで配列をつなげる時に困ったことはありませんか？

「2つのリストを1つにまとめたいけど、どうやるの？」 「concatって何？スプレッド構文って何？」 こんな疑問を抱いている方、きっと多いですよね。

安心してください！ この記事では、配列をつなげる方法を基礎からわかりやすく解説します。 初心者でも必ず理解できるよう、丁寧に説明していきますね。

配列結合って何？基本を理解しよう

配列結合とは

配列結合とは、複数の配列を一つの新しい配列にまとめる処理です。

簡単に言うと、「複数のリストを一つの大きなリストにする」操作ですね。 例えば、午前のタスクリストと午後のタスクリストを一日のタスクリストにまとめる感じです。

どんなときに使うの？

配列結合が必要な場面は、こんなときです。

• データの統合: 複数のAPIから取得したデータをまとめる
• リストの結合: カテゴリ別のリストを全体リストにする
• ページネーション: 複数ページのデータを一つにまとめる
• フィルタ結果の結合: 条件別に取得したデータを結合
• 配列の拡張: 既存の配列に新しい要素を追加

これらの場面で適切な結合方法を選択することが重要です。

方法1: concatメソッドを使おう

concatメソッドの基本的な使い方

concatメソッドは、元の配列を変更せずに新しい配列を作成する安全な結合方法です。

// 基本的な使い方
let array1 = [1, 2, 3];
let array2 = [4, 5, 6];
let combined = array1.concat(array2);

console.log(combined); // [1, 2, 3, 4, 5, 6]
console.log(array1);   // [1, 2, 3]（元の配列は変更されない）
console.log(array2);   // [4, 5, 6]（元の配列は変更されない）

この方法は元の配列を保持したい場合に特に有効です。 安心して使えますね！

複数の配列を一度に結合

concatメソッドは複数の配列を一度に結合できます。

let fruits = ['りんご', 'みかん'];
let vegetables = ['にんじん', 'きゃべつ'];
let grains = ['米', '小麦'];

let allFoods = fruits.concat(vegetables, grains);
console.log(allFoods);
// ['りんご', 'みかん', 'にんじん', 'きゃべつ', '米', '小麦']

// チェーンして結合することも可能
let result = fruits.concat(vegetables).concat(grains);
console.log(result);
// ['りんご', 'みかん', 'にんじん', 'きゃべつ', '米', '小麦']

どちらの方法でも同じ結果になります。

配列と要素を混ぜて結合

concatメソッドは配列だけでなく、個別の要素も結合できます。

let numbers = [1, 2, 3];
let moreNumbers = numbers.concat(4, 5, [6, 7], 8);
console.log(moreNumbers); // [1, 2, 3, 4, 5, 6, 7, 8]

// 文字列との結合
let items = ['アイテム1', 'アイテム2'];
let updatedItems = items.concat('アイテム3', '特別アイテム');
console.log(updatedItems); // ['アイテム1', 'アイテム2', 'アイテム3', '特別アイテム']

とても柔軟に使えますね！

方法2: スプレッド構文（...）を使おう

スプレッド構文の基本的な使い方

スプレッド構文は、ES6で導入されたモダンな配列結合方法です。

let array1 = [1, 2, 3];
let array2 = [4, 5, 6];
let combined = [...array1, ...array2];

console.log(combined); // [1, 2, 3, 4, 5, 6]

この構文は直感的で読みやすく、現代のJavaScript開発で広く使用されています。 まるで配列を「展開」してるみたいですね。

複数配列のスプレッド結合

複数の配列を柔軟に結合できます。

let morning = ['朝食', '散歩'];
let afternoon = ['昼食', '仕事'];
let evening = ['夕食', '読書'];

let dailyActivities = [...morning, ...afternoon, ...evening];
console.log(dailyActivities);
// ['朝食', '散歩', '昼食', '仕事', '夕食', '読書']

// 要素を挟んで結合
let schedule = [...morning, '休憩', ...afternoon, '休憩', ...evening];
console.log(schedule);
// ['朝食', '散歩', '休憩', '昼食', '仕事', '休憩', '夕食', '読書']

要素を自由に挟むことができるのが便利です。

要素の挿入と結合

スプレッド構文を使って、配列の任意の位置に要素を挿入できます。

let originalArray = [1, 2, 5, 6];
let insertedArray = [3, 4];

// 配列の途中に要素を挿入
let result = [...originalArray.slice(0, 2), ...insertedArray, ...originalArray.slice(2)];
console.log(result); // [1, 2, 3, 4, 5, 6]

// 先頭に要素を追加
let withPrefix = ['開始', ...originalArray];
console.log(withPrefix); // ['開始', 1, 2, 5, 6]

// 末尾に要素を追加
let withSuffix = [...originalArray, '終了'];
console.log(withSuffix); // [1, 2, 5, 6, '終了']

位置を指定した挿入も簡単にできます。

concatとスプレッド構文の違い

パフォーマンスの違い

両者のパフォーマンス特性を理解しましょう。

// パフォーマンステスト用の関数
function performanceTest() {
    let array1 = Array(10000).fill().map((_, i) => i);
    let array2 = Array(10000).fill().map((_, i) => i + 10000);
    
    // concatメソッドのテスト
    console.time('concat');
    let concatResult = array1.concat(array2);
    console.timeEnd('concat');
    
    // スプレッド構文のテスト
    console.time('spread');
    let spreadResult = [...array1, ...array2];
    console.timeEnd('spread');
    
    // 結果は同じかチェック
    console.log('結果が同じ:', JSON.stringify(concatResult) === JSON.stringify(spreadResult));
}

// 一般的にはスプレッド構文の方が若干高速

記述方法の違い

let fruits = ['りんご', 'みかん'];
let vegetables = ['にんじん', 'きゃべつ'];
let dairy = ['牛乳', 'チーズ'];

// concatメソッド
let foods1 = fruits.concat(vegetables).concat(dairy);

// スプレッド構文
let foods2 = [...fruits, ...vegetables, ...dairy];

console.log(foods1); // ['りんご', 'みかん', 'にんじん', 'きゃべつ', '牛乳', 'チーズ']
console.log(foods2); // ['りんご', 'みかん', 'にんじん', 'きゃべつ', '牛乳', 'チーズ']

スプレッド構文の方がすっきりと書けますね。

使い分けの指針

実際の使用例を見てみよう

ショッピングカートの管理

実際のWebアプリケーションでの使用例です。

class ShoppingCart {
    constructor() {
        this.items = [];
    }
    
    // 単一商品の追加
    addItem(item) {
        this.items = [...this.items, item];
    }
    
    // 複数商品の一括追加
    addItems(newItems) {
        this.items = this.items.concat(newItems);
    }
    
    // カテゴリ別商品の結合
    addCategoryItems(electronics, clothing, books) {
        this.items = [...this.items, ...electronics, ...clothing, ...books];
    }
    
    // 商品の並び替えと結合
    reorganizeByPriority(priorityItems, regularItems) {
        this.items = [...priorityItems, ...this.items, ...regularItems];
    }
    
    getItems() {
        return [...this.items]; // 複製を返す
    }
}

// 使用例
let cart = new ShoppingCart();
cart.addItem({ name: 'スマートフォン', price: 50000 });
cart.addItems([
    { name: 'イヤホン', price: 3000 },
    { name: 'ケース', price: 1500 }
]);

console.log(cart.getItems());

このように、実際のアプリケーションでは配列結合がよく使われます。

データの統合処理

複数のAPIから取得したデータを統合する例です。

async function fetchAndCombineData() {
    try {
        // 複数のAPIからデータを並行取得
        let [users, products, orders] = await Promise.all([
            fetchUsers(),
            fetchProducts(),
            fetchOrders()
        ]);
        
        // データを統合
        let allData = [...users, ...products, ...orders];
        
        // タイムスタンプでソート
        allData.sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp));
        
        return allData;
        
    } catch (error) {
        console.error('データ取得エラー:', error);
        return [];
    }
}

// データ取得の模擬関数
async function fetchUsers() {
    return [
        { type: 'user', id: 1, name: '田中', timestamp: '2024-01-01T10:00:00Z' },
        { type: 'user', id: 2, name: '佐藤', timestamp: '2024-01-01T11:00:00Z' }
    ];
}

async function fetchProducts() {
    return [
        { type: 'product', id: 1, name: '商品A', timestamp: '2024-01-01T09:00:00Z' },
        { type: 'product', id: 2, name: '商品B', timestamp: '2024-01-01T12:00:00Z' }
    ];
}

async function fetchOrders() {
    return [
        { type: 'order', id: 1, amount: 1000, timestamp: '2024-01-01T13:00:00Z' }
    ];
}

複数のデータソースからの情報を統合する際に配列結合が活躍します。

ページネーション機能

ページネーションで取得したデータを結合する例です。

class DataLoader {
    constructor() {
        this.allData = [];
        this.currentPage = 1;
        this.hasMore = true;
    }
    
    async loadPage(page) {
        try {
            let response = await fetch(`/api/data?page=${page}&limit=10`);
            let data = await response.json();
            return data;
        } catch (error) {
            console.error('データ読み込みエラー:', error);
            return { items: [], hasMore: false };
        }
    }
    
    async loadNextPage() {
        if (!this.hasMore) {
            return this.allData;
        }
        
        let pageData = await this.loadPage(this.currentPage);
        
        // 新しいデータを既存データに結合
        this.allData = [...this.allData, ...pageData.items];
        
        this.hasMore = pageData.hasMore;
        this.currentPage++;
        
        return this.allData;
    }
    
    async loadAllPages() {
        while (this.hasMore) {
            await this.loadNextPage();
        }
        return this.allData;
    }
    
    reset() {
        this.allData = [];
        this.currentPage = 1;
        this.hasMore = true;
    }
}

// 使用例
let loader = new DataLoader();
loader.loadAllPages().then(data => {
    console.log('全データ:', data);
});

このように、ページネーション機能でも配列結合が重要な役割を果たします。

条件に応じた配列結合

条件付きの結合

特定の条件に基づいて配列を結合する方法です。

function conditionalConcat(baseArray, ...conditionalArrays) {
    let result = [...baseArray];
    
    conditionalArrays.forEach(({ condition, array }) => {
        if (condition) {
            result = result.concat(array);
        }
    });
    
    return result;
}

// 使用例
let basicItems = ['基本アイテム1', '基本アイテム2'];
let premiumItems = ['プレミアムアイテム1', 'プレミアムアイテム2'];
let specialItems = ['特別アイテム1'];

let userType = 'premium';
let hasSpecialAccess = true;

let items = conditionalConcat(
    basicItems,
    { condition: userType === 'premium', array: premiumItems },
    { condition: hasSpecialAccess, array: specialItems }
);

console.log(items);
// ['基本アイテム1', '基本アイテム2', 'プレミアムアイテム1', 'プレミアムアイテム2', '特別アイテム1']

ユーザーの権限や状態に応じて、動的に配列を結合できます。

フィルタリングと結合

フィルタリング結果を結合する実用的な例です。

function filterAndCombine(data, filters) {
    let results = [];
    
    filters.forEach(filter => {
        let filtered = data.filter(filter.condition);
        results = [...results, ...filtered];
    });
    
    // 重複を除去
    return Array.from(new Set(results.map(JSON.stringify))).map(JSON.parse);
}

// 使用例
let products = [
    { name: '商品A', category: 'electronics', price: 1000 },
    { name: '商品B', category: 'clothing', price: 2000 },
    { name: '商品C', category: 'electronics', price: 1500 },
    { name: '商品D', category: 'books', price: 500 }
];

let searchFilters = [
    { condition: item => item.category === 'electronics' },
    { condition: item => item.price < 1000 }
];

let searchResults = filterAndCombine(products, searchFilters);
console.log(searchResults);

複数の検索条件を組み合わせて結果を統合できます。

配列の深い結合

ネストした配列の結合

二次元配列をフラット化しながら結合する方法です。

function flattenAndConcat(...arrays) {
    return arrays.reduce((acc, curr) => {
        if (Array.isArray(curr)) {
            return acc.concat(curr.flat());
        }
        return acc.concat(curr);
    }, []);
}

// 使用例
let nestedArrays = [
    [1, 2, [3, 4]],
    [5, 6],
    [[7, 8], 9]
];

let flattened = flattenAndConcat(...nestedArrays);
console.log(flattened); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

// スプレッド構文とflatを組み合わせた方法
function modernFlattenConcat(...arrays) {
    return [...arrays].flat(2);
}

let modernFlattened = modernFlattenConcat(...nestedArrays);
console.log(modernFlattened); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

複雑な構造の配列も、適切に処理できます。

オブジェクト配列の結合とマージ

オブジェクトの配列を結合し、重複を処理する方法です。

function mergeObjectArrays(arrays, keyField = 'id') {
    let combined = arrays.reduce((acc, curr) => acc.concat(curr), []);
    
    // キーフィールドで重複除去
    let uniqueMap = new Map();
    combined.forEach(item => {
        uniqueMap.set(item[keyField], item);
    });
    
    return Array.from(uniqueMap.values());
}

// 使用例
let userGroup1 = [
    { id: 1, name: '田中', group: 'A' },
    { id: 2, name: '佐藤', group: 'A' }
];

let userGroup2 = [
    { id: 2, name: '佐藤', group: 'B' }, // 重複（後の値で上書き）
    { id: 3, name: '山田', group: 'B' }
];

let userGroup3 = [
    { id: 4, name: '鈴木', group: 'C' }
];

let allUsers = mergeObjectArrays([userGroup1, userGroup2, userGroup3], 'id');
console.log(allUsers);

重複するデータを適切に処理しながら結合できます。

まとめ：配列結合をマスターしよう！

JavaScript配列の結合について、詳しく学びました。 ポイントをまとめてみましょう。

主要な結合方法

• concatメソッド: 安全で確実な配列結合、古いブラウザでも動作
• スプレッド構文: モダンで読みやすい、柔軟な配列結合

使い分けのコツ

• 用途に応じた使い分け: パフォーマンスと可読性のバランス
• 実践的な応用: ショッピングカート、データ統合、ページネーション
• 条件付き結合: ユーザー権限や状態に応じた動的な処理

覚えておくべきポイント

• 元の配列は変更されない: 安全にデータを扱える
• 柔軟な結合: 配列と要素を自由に組み合わせ可能
• パフォーマンス: 用途に応じて最適な方法を選択

適切な結合方法を選択することで、効率的で保守しやすいコードを書くことができます。 特に、データ処理やUI開発において、配列結合は欠かせない技術となります。

最初は難しく感じるかもしれませんが、大丈夫です！ 実際にコードを書きながら練習することで、必ず身に付きますよ。

これらの基礎技術をマスターして、より高度なJavaScriptアプリケーションを作成してみませんか？ きっと、プログラミングがもっと楽しくなるはずです！