JavaScriptのconcatメソッドを使って配列や文字列を結合・コピーする方法

2024-07-14

当サイトでは一部リンクに広告が含まれています

JavaScriptでプログラミングをしていると、配列と配列を結合したり、文字列をつなげたりしたくなることがありますよね。

そんな時に使えるのが、JavaScriptの組み込みメソッドである「concat」です。

concatメソッドを使えば、複数の配列を1つにまとめたり、文字列を連結したり、配列のコピーを作ったりできます。しかも、元の配列や文字列は変更せずに、新しい配列や文字列を作成してくれるので安心です。

この記事では、concatメソッドの基本的な使い方から、配列操作のテクニック、よくある間違いなど、初心者の方でもわかるようにconcatメソッドを詳しく解説していきます。

これからJavaScriptを学ぼうと思っている方も、もっと使いこなしたいと思っている方も、ぜひ最後までお付き合いください！

この記事を書いた人

現役のフルスタックエンジニアとして活躍中
開発チームリーダーとして複数プロジェクトをリード
副業プログラミングスクール講師として数百名以上を指導してきた教育のプロ
プログラミングスクールのカリキュラム執筆経験あり

concatメソッドとは

まずはconcatメソッドの概要を説明します。
concatメソッドは配列（Array）オブジェクトのメソッドで、主に以下のような使い方をします。

2つ以上の配列を結合して新しい配列を作る
配列に値や別の配列の要素を追加する
配列のシャローコピー（shallow copy）を作る

concatメソッドの特徴として、元の配列は変更せずに、新しい配列を返す、ということが挙げられます。破壊的メソッドではないので安心して使えるのが嬉しいポイントですね。

配列の結合

2つの配列を結合する方法

では早速、concatメソッドを使った配列の結合方法を見ていきましょう。まずは2つの配列を結合する例です。

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);

console.log(array3);
// 出力結果: ["a", "b", "c", "d", "e", "f"]

このように、concatメソッドを呼び出す配列（ここではarray1）の後ろに、引数で指定した配列（array2）をつなげた新しい配列を返します。元のarray1とarray2は変更されません。

3つ以上の配列を結合する方法

concatメソッドは、引数を複数取ることができます。つまり、3つ以上の配列も一度に結合できるのです。

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = ['g', 'h', 'i'];
const array4 = array1.concat(array2, array3);

console.log(array4);
// 出力結果: ["a", "b", "c", "d", "e", "f", "g", "h", "i"]

引数に指定した配列を、順番に結合していきます。何個でも配列を渡せるので、状況に応じて使い分けましょう。

配列のコピー

concatメソッドのもう1つの使い方が、配列のコピーです。引数を何も渡さずにconcatを呼び出すと、その配列のシャローコピーを作ることができます。

const original = ['a', 'b', 'c'];
const copy = original.concat();

console.log(copy);
// 出力結果: ["a", "b", "c"]

console.log(copy === original);
// 出力結果: false（参照は異なる）

配列の要素が単純な値の場合、concatでコピーすれば元の配列への参照は切れるので安全です。
ただし、配列の中に入れ子で別の配列やオブジェクトがある場合、それらは参照渡しされてしまうので注意が必要です。

文字列の結合

配列のメソッドであるconcatですが、実は文字列の結合にも使えます。配列の結合と同じような感覚で、文字列を繋げていくことができるのです。

const str1 = 'Hello';
const str2 = 'World';
const str3 = str1.concat(' ', str2, '!');

console.log(str3);
// 出力結果: "Hello World!"

通常、文字列の連結には+演算子を使うことが多いですが、引数を取れるconcatを使えば、もう少し柔軟につなげていけるのが利点ですね。

pushメソッドとの違い

配列の末尾に要素を追加するメソッドとして、pushメソッドもよく使われます。では、concatメソッドとpushメソッドの違いは何でしょうか？

pushは元の配列を変更するのに対し、concatは新しい配列を返す
pushは配列の末尾に要素を追加するが、concatは配列同士をつなげる

const array1 = ['a', 'b', 'c'];
array1.push('d');

console.log(array1);
// 出力結果: ["a", "b", "c", "d"]

const array2 = ['e', 'f'];
const array3 = array1.concat(array2);

console.log(array1);
// 出力結果: ["a", "b", "c", "d"]  (変更なし)

console.log(array3);
// 出力結果: ["a", "b", "c", "d", "e", "f"]

この例を見れば、pushとconcatの動作の違いがよくわかりますね。目的に応じて使い分けましょう。