JavaScriptでプログラミングをしていると、配列と配列を結合したり、文字列をつなげたりしたくなることがありますよね。
そんな時に使えるのが、JavaScriptの組み込みメソッドである「concat」です。
concatメソッドを使えば、複数の配列を1つにまとめたり、文字列を連結したり、配列のコピーを作ったりできます。しかも、元の配列や文字列は変更せずに、新しい配列や文字列を作成してくれるので安心です。
この記事では、concatメソッドの基本的な使い方から、配列操作のテクニック、よくある間違いなど、初心者の方でもわかるようにconcatメソッドを詳しく解説していきます。
これからJavaScriptを学ぼうと思っている方も、もっと使いこなしたいと思っている方も、ぜひ最後までお付き合いください！
- 未経験からWebエンジニアとして転職成功（年収 30% アップ）
- 現役のフルスタックエンジニアとして活躍中
- 開発チームリーダーとして複数プロジェクトをリード
- 副業プログラミングスクール講師として数百名以上を指導してきた教育のプロ
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ですが、実は文字列の結合にも使えます。配列の結合と同じような感覚で、文字列を繋げていくことができるのです。
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 は学習範囲が広く、知識不足で苦労している方もいるかもしれませんね。
そんなときは本やプログラミングスクールを活用し、体系的な学習を検討してみてはいかがでしょうか？
