【JavaScript入門】concat()で配列・文字列を結合やコピーする方法

こんにちは!エンジニアの中沢です。

JavaScriptには配列や文字列を結合するための「concatメソッド」があります。

配列を連結して新しい配列を作れるので、上手く活用してください。

この記事では、

・concatメソッドとは
・concatメソッドで配列の結合

という基本的な内容から、

・配列をコピーする方法
・concatメソッドで文字列の結合
・pushメソッドで配列に要素を追加する方法

などの応用的な使い方に関しても解説していきます。

今回はこれらの方法を覚えるために、concatメソッドのさまざまな使い方をわかりやすく解説します!

concatメソッドとは

concatメソッドは2以上の配列を結合して新しい配列を作るときに使います。

また、concatメソッドは配列だけでなく、文字列を結合することもできます。

concatメソッドで配列の結合

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

ここでは、concatメソッドで2つの配列を結合する方法を解説します。

concatメソッドは呼び出し元の配列の後ろに引数に指定した配列を追加します。

次のプログラムで確認してみましょう。

実行結果:

このようにして、2つの配列を結合することができました。

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

ここでは、concatメソッドで3つの配列を結合する方法を解説します。

concatメソッドの引数に追加する配列を指定します。

次のプログラムで確認してみましょう。

実行結果:

このようにして、3つの配列を結合することができました。

配列をコピーする方法

配列を普通にコピーできない理由

concatメソッドを使った配列のコピー方法について見ていきましょう!

配列のコピーと聞いて、次のようなコードをイメージする人もいるでしょう。

実行結果

この例では、配列「arr1」を別の配列「arr2」に格納していますよね。

実行結果を見ると配列の中身がコピーされて同じ配列が作られたように見えます。

しかし、配列というのは「参照型」のデータなので、値がコピーされていてるのではなく値が保存されているメモリの場所を共有しているだけなのです。

そのため、次のようなコードを書くとおかしな現象になります。

実行結果

これは、配列「arr2」にだけ新しい値「6」を追加しています。

しかしながら、何も操作していない配列「arr1」も同じように値が変化しているのです。

理由は簡単で、どちらの配列も値が保存されている場所を参照しているだけなので、どちらかの配列でデータを変更すれば両方とも変化してしまうわけです。

concatメソッドで配列を完全コピーする方法

さて、配列は普通にコピーしようとするとおかしな挙動をすることが分かりましたね。

それでは、どうやってコピーすれば良いのでしょうか?

実は、これまで利用してきた「concatメソッド」を使うと、この問題を簡単に解決できるのです!

次のサンプル例を見てください!

実行結果

配列「arr2」へ別の配列をコピーするには、コピー元の「arr1」にconcat()を実行するだけで良いのです。

concatメソッドは2つの配列を結合して1つの配列にするメソッドでしたよね?

そのため、引数なしのconcatメソッドを実行すればコピー元の配列だけを新しく配列として返すので、結果的にコピーしているのと同じというわけです。

concatメソッドで文字列の結合

複数の文字列を結合する方法

concatメソッドは一般的な文字列を複数結合することも可能なので合わせてご紹介しておきます!

基本的な使い方はこれまでの配列を結合する方法と同じです。

次のサンプル例を見てください!

実行結果

この例では、2つの文字列を1つの文字列として結合して出力しているのが分かります。

結合したい文字列に対してconcat()を実行するときに、引数へ結合する文字列を指定します。

concatによる文字結合の速度について

文字列を大量に結合する場合においては、その実行パフォーマンス(速度)についても検討する必要があります。

実は、文字列の結合で最も速くシンプルな実装は「+」で結合することです。

例えば、「’エン’ + ‘ジニア’」のように文字列と文字列を「+」演算子で結合することはパフォーマンス面から見ても良好になる場合が多いのです。

この速度検証について、concatやjoinなど他のメソッドとの速度比較も含めた結果を次の記事で解説しているのでぜひ参考にしてみてください!

【JavaScript入門】joinや+演算子で配列や文字列を連結・結合する
更新日 : 2019年4月20日

pushメソッドで配列に要素を追加する方法

ここでは、pushメソッドで配列に要素を追加する方法を解説します。

pushメソッドは配列の末尾に要素を追加するために使用します。

次のプログラムで確認してみましょう。

実行結果:

このようにして、配列の末尾に要素を追加することができました。

まとめ

いかがでしたか?

今回はconcatメソッドで結合する方法を解説しました。

concatメソッドは配列や文字列を結合できるので、ぜひ活用してくださいね。

もし、配列や文字列を結合する方法を忘れてしまったらこの記事を確認してください!

JavaScriptカリキュラム無料公開中!


この記事はJavaScript入門完全攻略ガイド【基礎学習/アプリ開発/仕事獲得】の一部になります。このカリキュラムは、プログラミング入門者が、JavaScriptの基礎学習からアプリ開発、さらには仕事獲得まで体系的に学べる内容となっています。

JavaScript学習に必要な情報を一つにまとめていますので効率よくJavaScriptを学ぶことが出来ます。この機会に是非活用していただければと思います。

JavaScript入門完全攻略ガイド【基礎学習/アプリ開発/仕事獲得】
更新日 : 2018年12月13日

JavaScriptを最短で習得したい方へ

弊社マンツーマンレッスンでは、未経験者の方でも安心して学習できるように

  • プログラミング基礎学習
  • オリジナルアプリ開発
  • 仕事獲得

まで徹底したサポートを行っています。

まずは『無料体験レッスン』で、弊社のコンサルタントと一緒にあなた専用の学習方法やカリキュラムを考えてみませんか?

JavaScriptならではの学習方法や仕事獲得方法など、より具体的なアドバイスもさせていただいています。

詳しくは下の画像をクリックして弊社サービス内容をご確認ください。

cta_js5

LINEで送る
Pocket

書いた人

中沢 丈

中沢 丈

フリーランスエンジニア。
システム開発からコンテンツ作成まで幅広く対応します。

連絡先はこちらです。
[email protected]

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説