【JavaScript】concat – 配列や文字列を結合し新しい配列または文字列を作成

JavaScriptで配列や文字列を結合したい場合、concat()メソッドを使用します。今回は、concat()の基本的な使い方から、使用時の注意点までをまとめています。

目次非表示

concat()メソッドとは？
1. 基本構文
基本的な使い方
サンプルコード
使用時の注意点
さいごに

concat()メソッドとは？

concat()メソッドは、配列や文字列を結合し、新しい配列または文字列を作成するメソッドです。

基本構文

JavaScript

array1.concat(array2, array3, ...);
string1.concat(string2, string3, ...);

特徴
元の配列や文字列を変更しない（非破壊的メソッド）
複数の配列や文字列を連結できる

基本的な使い方

配列を結合する

JavaScript

const arr1 = ['apple', 'banana'];
const arr2 = ['cherry', 'date'];
const combined = arr1.concat(arr2);
console.log(combined); // apple, banana, cherry, date

arr1.concat(arr2)により、arr1とarr2の要素が結合された新しい配列を作成。元の配列** と **は変更されない。

文字列を結合する

JavaScript

const str1 = 'Hello';
const str2 = 'World';
const message = str1.concat(' ', str2);
console.log(message); // 'Hello World'

concat()は文字列の結合にも使用できる。スペース（' '）を間に入れることで単語の間隔を調整可能。

複数の配列を結合する

JavaScript

const arr1 = ['A', 'B'];
const arr2 = ['C', 'D'];
const arr3 = ['E', 'F'];
const combined = arr1.concat(arr2, arr3);
console.log(combined); // A, B, C, D, E, F

concat()は複数の配列を一度に結合可能。引数にいくつでも配列を渡せる。

サンプルコード

配列のコピーを作成（元の配列を変更しない方法）

JavaScript

const original = ['x', 'y', 'z'];
const copy = original.concat();
console.log(copy); // x, y, z
console.log(original === copy); // false（異なる配列）

concat()を使うと 元の配列と同じ内容の新しい配列を作成できる。スプレッド構文 “ でも同じことが可能。

ネストされた配列の結合

JavaScript

const nestedArr1 = [[1, 2]];
const nestedArr2 = [[3, 4]];
const combined = nestedArr1.concat(nestedArr2);
console.log(combined); // [1, 2], [3, 4]

concat()は ネストされた配列（多次元配列）をフラット化しない。ネストを解消したい場合はflat()を使用。

“ と組み合わせて新しい配列を作成

JavaScript

const numbers = [1, 2, 3];
const doubled = numbers.map(num => [num, num * 2]);
const flattened = [].concat(...doubled);
console.log(flattened); // [[1, 2, 2, 4, 3, 6]]

map()で新しい配列を作成後、concat()を使って1次元配列に変換。

使用時の注意点

“ は元の配列や文字列を変更しない（非破壊的メソッド）

JavaScript

const arr = ['A', 'B', 'C'];
const newArr = arr.concat('D');
console.log(arr); // A, B, C（変更なし）
console.log(newArr); // A, B, C, D

concat()は 新しい配列を返すため、元の配列 arrは変更されない。

“ との違い

JavaScript

const arr = ['A', 'B'];
arr.push('C');
console.log(arr); // A, B, C（`push()` は元の配列を変更）

concat()は 新しい配列を作成、push()は 元の配列を直接変更。元の配列を変更したくない場合は “ を使用。

配列の結合時、スプレッド構文との比較

JavaScript

const arr1 = ['X', 'Y'];
const arr2 = ['Z'];
const combined1 = arr1.concat(arr2);
const combined2 = [...arr1, ...arr2];
console.log(combined1); // X, Y, Z
console.log(combined2); // X, Y, Z

concat()とスプレッド構文 “ は同じ結果を得られる。可読性の高いスプレッド構文も選択肢に。