【Javascript】配列をコピーする方法【変数代入はダメです】

今回の記事は、

  • Javascriptを使って配列をコピーしたい
  • コピーしたはずなのに元の配列も変更されてしまった
  • どのメソッドを使えばいいか分からない

という方に向けた記事になっています。


レバテックフリーランス … 業界最大級の案件数業界トップクラスの高単価報酬を誇る最大手のサービスです。実績豊富なコーディネーターが丁寧な対応をしてくれるため、案件の無理な提案はありません。フリーランスで生きていくためにはまず登録しておきましょう。
MidWorks … フリーランス賠償責任保障生命保険の折半など、フリーランスでありながらも正社員並みの保障を受けられるのが特徴です。また、経験豊富なキャリアコンサルタントによる手厚いサポートも受けられるため、安定したフリーランス生活を送りたい方には特におすすめのサービスです。
ポテパンフリーランス … IT業界・技術に詳しいコンサルタントが担当してくれるため、こちらの要望をきちんと理解した上で案件を紹介してくれます。また、案件情報のみならず、フリーランスのイロハについても教えてくれるため、フリーランスとして初めて活動される方には特におすすめのサービスです。

レバテックキャリア … ITエンジニアが利用したい転職エージェントNo.1にも選ばれており、年収600万円以上のハイクラス求人を5,000件以上も保有しています。エンジニアが転職を考えた時にまず初めに登録しておくべきサービスです。
Tech Stars Agent … Tech Stars Agentでは、担当エージェントが全員エンジニア出身のため、スキルやキャリアを見据えたきめ細かな転職支援が受けられます。運営元の株式会社Branding Engineerは、独立支援サービス「MidWorks」も展開しているため、独立を視野に入れたサポートも受けられます
転職ドラフト … 年収UP率93.8%/平均年収UP額126万円と圧倒的な年収UP率を誇るイベント型のエンジニア向け 転職サービスです。毎月1回開催され、厳選された優良IT/Web系企業約150社からダイレクトスカウトを受け取ることができます。年収アップを目指す方は登録必須です。


Javascriptで配列をコピーする際にありがちな間違い

さて、早速ではありますが、Javascriptで配列をコピーする際には皆さんはどのような方法を使われますか?

他の言語での開発経験がある方であれば、まずパッと思いつくのは「変数へ代入する」方法ではないでしょうか。

しかし実はJavascriptでこの方法を使ってしまうと元々の配列まで影響が及んでしまうことになります。

実装例を見ながらその挙動を見ていきましょう。

変数代入で配列をコピーした場合

実装コード

const array = ["ruby", "php", "javascript", "vue.js", "html"]
const copiedArray = array

copiedArray[0] = "Ruby on Rails"

console.log(copiedArray)
console.log(array)

出力結果

// copiedArrayの出力結果
["Ruby on Rails", "php", "javascript", "vue.js", "html"]

// arrayの出力結果
["Ruby on Rails", "php", "javascript", "vue.js", "html"]

おそらく、期待した結果は、「copiedArrayのみ変更されて、arrayはそのまま」だったと思いますが、見事に裏切られたと思います。

このように、ただ変数へ代入しただけでは元々の配列とまだ繋がってしまっているため、Javascriptでは専用のメソッドを使用する必要があるのです。

Javascriptで配列をコピーする方法

さて、変数代入では配列がコピーできないということを知っていただいたところで、ここからはJavascriptで用意されているメソッドをご紹介していきます。

Javascriptで配列をコピーする方法としては、以下の4種類のメソッド・構文が用意されています。

  • 1. concat()
  • 2. slice()
  • 3. Array.from
  • 4. スプレッド構文

それぞれ順を追って解説していきますね。

Javascriptで配列をコピーする方法その1 concat()メソッド

まず最初にご紹介するのは、concat()メソッドです。

concat()メソッドは元々は配列と配列を結合して新たな配列を作り出すためのメソッドなのですが、その特徴を活かして、「既存の配列に空の配列を結合」させたり、逆に「空の配列に既存の配列を結合」させたりすることで配列のコピーを実現することができます。

実装コード

const array = ["ruby", "php", "javascript", "vue.js", "html"]

// concat()の使い方その1 引数なしで使用
const copiedArray = array.concat()

// concat()の使い方その2 空の配列に対して使用
const copiedArray = [].concat(array)

copiedArray[0] = "Ruby on Rails"

console.log(copiedArray)
console.log(array)

出力結果

// copiedArrayの出力結果
["Ruby on Rails", "php", "javascript", "vue.js", "html"]

// arrayの出力結果
["ruby", "php", "javascript", "vue.js", "html"]

このようにしてconcat()メソッドを使用することで無事配列をコピーすることができます。

Javascriptで配列をコピーする方法その2 slice()メソッド

続いてご紹介するのは、slice()メソッドです。

slice()メソッドは、引数を指定することで該当するインデックスの範囲の値を取得することができるのですが、配列をコピーするという用途であれば、引数なしでも大丈夫です。

実装コード

const array = ["ruby", "php", "javascript", "vue.js", "html"]

// slice()の使い方その1 引数を指定する場合
const copiedArray = array.slice(0, array.length)

// slice()の使い方その2 引数なしの場合
const copiedArray = [].slice(array)

copiedArray[0] = "Ruby on Rails"

console.log(copiedArray)
console.log(array)

出力結果

// copiedArrayの出力結果
["Ruby on Rails", "php", "javascript", "vue.js", "html"]

// arrayの出力結果
["ruby", "php", "javascript", "vue.js", "html"]

このようにしてslice()メソッドを使用することで無事配列をコピーすることができます。

Javascriptで配列をコピーする方法その3 Array.fromメソッド

続いてご紹介するのはArray.fromメソッドです。

Array.fromメソッドは元々は、反復するオブジェクトを引数に指定することでそれらを配列へと変換してくれるメソッドですが、引数に配列を指定することでその配列をコピーすることも可能です。

実装コード

const array = ["ruby", "php", "javascript", "vue.js", "html"]

const copiedArray = Array.from(array)

copiedArray[0] = "Ruby on Rails"

console.log(copiedArray)
console.log(array)

出力結果

// copiedArrayの出力結果
["Ruby on Rails", "php", "javascript", "vue.js", "html"]

// arrayの出力結果
["ruby", "php", "javascript", "vue.js", "html"]

Array.fromメソッドはとても便利なメソッドですので、この他の使い方についてはまた別の機会に解説させて頂きますね。

Javascriptで配列をコピーする方法その4 スプレッド構文

最後にご紹介するのは、スプレッド構文という方法です。

このスプレッド構文はES6より導入されたもので、...arrayの形で使用し、配列や連想配列の要素を展開してくれます。

このスプレッド構文を使用することで、配列をコピーすることが可能です。

実装コード

const array = ["ruby", "php", "javascript", "vue.js", "html"]

const copiedArray = [...array]

copiedArray[0] = "Ruby on Rails"

console.log(copiedArray)
console.log(array)

出力結果

// copiedArrayの出力結果
["Ruby on Rails", "php", "javascript", "vue.js", "html"]

// arrayの出力結果
["ruby", "php", "javascript", "vue.js", "html"]

このスプレッド構文はとても便利な構文で、これ以外にも知っておいて頂きたい機能が数多くありますので、それらはまた別の機会にご紹介させて頂きますね。

Javascriptで配列をコピーするにはどの方法を採用すべきか

さて、ここまで4種類の方法をご紹介してきましたが、「結局どれを使えばいいの?」ということを最後にお伝えしようと思います。

結論から申し上げると、concat()メソッドslice()メソッドです。

というのも、何を基準に選定するかは人それぞれなのですが、私は処理速度の優劣でメソッドを選ぶことが多く、その処理速度で見るとこの二つのメソッドが圧倒的に速いからです。

その他、AirbnbJavaScript Style Guideではスプレッド構文が推奨されているため、そちらを採用する方も多いです。

Array.fromメソッドは処理速度も比較的遅く、そもそも別のオブジェクトを配列に変換するのが主な役割でもありますので、配列をコピーする際にはあまり使用しない印象です。

お仕事の途中ですが、少し一休みして、転職独立について考えてみませんか🙌?

現役エンジニアが選ぶおすすめの転職エージェント11選【成功談・失敗談もあります】

レバテックフリーランスの評判ってどう?【現役エンジニアが徹底解説します】

MidWorks(ミッドワークス)の評判ってどう?【現役エンジニアが徹底解説します】

日々の業務に追われて自分を見失わないよう、
定期的にキャリアを振り返るようにしておきましょう🤲

最後に

さて、ここまで、Javascriptを使って配列をコピーする方法について解説してきましたがいかがでしたか?

今回ご紹介させて頂いたように、他の言語と同じような感覚でJavascriptの配列を扱ってしまうと思わぬバグに出くわしてしまいますので、この機会にぜひその仕様を把握しておいてくださいね。

また、配列のコピーは実際の開発の中でも頻繁に登場しますので、今回ご紹介したメソッドを使いこなせるようになっておきましょう。

このブログを通じて少しでも「傍(はた)を楽(らく)にする」ことができていれば嬉しく思います。

最後まで読んで頂きありがとうございました。