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

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

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)をつなげた新しい配列を返します。元のarray1array2は変更されません。

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の動作の違いがよくわかりますね。目的に応じて使い分けましょう。

まとめ

今回は、JavaScriptのconcatメソッドについて詳しく解説しました。改めてポイントをまとめると、以下のようになります。

  • concatメソッドは配列の結合、コピー、文字列の連結に使える
  • concatは元の配列を変更せず、新しい配列を返す
  • concatメソッドは複数の引数を取ることができる
  • pushメソッドとの違いを理解して使い分けよう

配列や文字列は、JavaScriptでよく扱うオブジェクトです。それらを自在に操れるようになると、プログラミングの幅がぐっと広がります。

JavaScriptを効率的に身につける勉強法は?

JavaScript には興味があっても、プログラミング学習をはじめたばかりであれば、以下のような疑問を持つかもしれません。

  • JavaScript を身に付けてエンジニアになるには何をすればいい?
  • 何から勉強すればいいんだろう?
  • 効率よく勉強するには?

JavaScriptは学ぶべき内容が非常に多いため、勉強法の選び方を間違うと時間・労力・お金が無駄になってしまいます…。

そのため、こちらの記事を参考に、ご自身に最適な学習方法を選んでみませんか?

目次