1. はじめに
JavaScriptは、ウェブ開発において最も重要なプログラミング言語の一つです。その中でも、配列（Array）はデータを効率的に扱うための基本的な構造として頻繁に使用されます。特に「配列に別の配列を追加する」操作は、さまざまな場面で求められる基本的なスキルです。本記事では、JavaScriptで配列を結合する方法について、初心者にも分かりやすく解説します。
2. 配列に別の配列を追加する方法の概要
JavaScriptには、配列を操作するためのメソッドが豊富に用意されています。その中でも、以下の3つが代表的な方法です。
push()メソッドconcat()メソッド- スプレッド構文（
...）
これらの方法を理解することで、用途に応じた最適な方法を選ぶことができるようになります。
3. 配列操作の基本：push()メソッド
3.1 push()メソッドの基本
push()メソッドは、配列の末尾に要素を追加するためのメソッドです。以下は基本的な使い方の例です。
let array1 = [1, 2, 3];
let array2 = [4, 5, 6];
array1.push(...array2); // array1にarray2の要素を追加
console.log(array1); // 出力: [1, 2, 3, 4, 5, 6]3.2 特徴と注意点
- 元の配列（
array1）が変更される。 - スプレッド構文（
...）を使用しない場合、ネストされた配列（例:[1, 2, 3, [4, 5, 6]]）になるので注意が必要です。
4. 新しい配列を生成：concat()メソッド
4.1 concat()メソッドの基本
concat()メソッドは、元の配列を変更せずに、新しい配列を生成します。
let array1 = [1, 2, 3];
let array2 = [4, 5, 6];
let newArray = array1.concat(array2); // 新しい配列を生成
console.log(newArray); // 出力: [1, 2, 3, 4, 5, 6]
console.log(array1); // 出力: [1, 2, 3]（元の配列は変更されない）4.2 特徴と注意点
- 元の配列をそのまま保持したい場合に便利。
- 複数の配列を連結することも可能です。
let result = array1.concat(array2, [7, 8, 9]);
console.log(result); // 出力: [1, 2, 3, 4, 5, 6, 7, 8, 9]
5. 簡潔な構文：スプレッド構文
5.1 スプレッド構文の基本
スプレッド構文（...）を使用すると、コードを簡潔に記述できます。以下はその例です。
let array1 = [1, 2, 3];
let array2 = [4, 5, 6];
let newArray = [...array1, ...array2];
console.log(newArray); // 出力: [1, 2, 3, 4, 5, 6]5.2 特徴と注意点
- 元の配列を変更しません。
- 配列だけでなく、文字列や他の反復可能なオブジェクトにも使用できます。
let array1 = [1, 2, 3];
let string = "ABC";
let newArray = [...array1, ...string];
console.log(newArray); // 出力: [1, 2, 3, "A", "B", "C"]6. 各方法の比較と選び方
| 方法 | 元の配列を変更するか | 新しい配列を生成するか | コードの簡潔さ |
|---|---|---|---|
push() | 変更する | 生成しない | 普通 |
concat() | 変更しない | 生成する | 普通 |
| スプレッド構文 | 変更しない | 生成する | 簡潔 |
選び方のポイント
- 元の配列を変更しても良い場合：
push()を使用。 - 元の配列を変更せずに新しい配列が必要な場合：
concat()またはスプレッド構文を使用。 - 簡潔な記述を重視する場合：スプレッド構文を推奨。
7. 実用例
初心者向け：基本的な配列結合
let array1 = [1, 2, 3];
let array2 = [4, 5, 6];
array1.push(...array2);
console.log(array1); // 出力: [1, 2, 3, 4, 5, 6]中級者向け：条件付きで配列を結合
let array1 = [1, 2, 3];
let array2 = [4, 5, 6];
if (array2.length > 0) {
array1.push(...array2);
}
console.log(array1); // 条件を満たす場合: [1, 2, 3, 4, 5, 6]8. FAQ
Q1. push()メソッドはどのような場合に使いますか？
配列の末尾に新しい要素を追加したい場合に使用します。ただし、スプレッド構文を使わないとネストされた配列になる可能性があります。
Q2. concat()とスプレッド構文の違いは何ですか？
両者とも新しい配列を生成しますが、スプレッド構文の方がコードが簡潔で、柔軟に使用できます。
Q3. スプレッド構文はどのような場面で便利ですか？
配列だけでなく、文字列や他の反復可能なデータを展開する際にも便利です。
9. まとめ
この記事では、JavaScriptで配列に別の配列を追加する方法として、push()、concat()、スプレッド構文を紹介しました。それぞれの方法には特徴と適した場面があります。用途に応じて最適な方法を選び、効率的に配列を操作しましょう。
