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

今回の記事は、

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

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


フリーランス案件を探すならこのエージェント!

運営会社 レバテック株式会社 株式会社Branding Engineer 株式会社Hajimari
対応エリア 東京・神奈川・埼玉・千葉
大阪・兵庫・京都・愛知・福岡
東京・神奈川・埼玉・千葉
大阪・兵庫・京都・奈良・和歌山・滋賀
東京・神奈川・埼玉・千葉
茨城・大阪・兵庫・福岡
案件数 約28,000件 約3,300件 約4,200件
平均単価 68.2万円 72.2万円
最高月収 145万円 200万円 176万円
支払いサイト 15日(月末締め翌月15日支払い) 20日
手数料(中間マージン) 非公開 非公開
※実質20%
非公開
特徴高単価な案件が多い
福利厚生サービスが受けられる
・首都圏の案件が中心
給与保証制度で安定した収入を得られる
・税務処理のサポートあり
・マージン率は実質20%
週2/週3の案件が多い
在宅/リモート案件が多い
・スタートアップ企業やベンチャー企業の案件が多い
紹介企業例 ・株式会社Gunosy
・株式会社バンダイナムコホールディングス
・株式会社ユーザベース
・Sansan株式会社
・株式会社一休
・株式会社FiNC Technologies など
・クックパッド株式会社
・株式会社カオナビ
・株式会社Kaizen Platform など
説明記事
公式サイト


転職を考えているならこのエージェント!

運営会社 レバテック株式会社 株式会社Branding Engineer 株式会社リブセンス
対応エリア 東京・神奈川・埼玉・千葉
大阪・兵庫・京都・愛知・福岡
東京・神奈川・埼玉・千葉
大阪・兵庫・京都・奈良・和歌山・滋賀
東京・神奈川・埼玉・千葉
茨城・大阪・兵庫・福岡
案件数 約13,000件 約800件
※非公開求人が多い

※ドラフト制のため、対象外
年齢層 20代:◎
30代:〇
40代:〇
20代:〇
30代:〇
40代:△
20代:〇
30代:〇
40代:〇
特徴エンジニア・デザイナーを専門としている
・カウンセリングに時間をかける
年収アップ率60%の実績
IT/Web/ゲーム業界専門の転職エージェント
・業界経験者がキャリアコンサルタントを務める
・丁寧なカウンセリングで入社後の離職率1%以下を実現
ドラフト制による採用を叶える特殊なサービス
スキル・経験重視で評価してもらえる
・他エンジニアの入札結果を見ることで
自分の市場価値が分かる
紹介企業例 ・サイボウズ株式会社
・株式会社サイバーエージェント
・Chatwork株式会社 など
・DMM.com
・Money Forward
・SmartHR など
・メルカリ
・ZOZOテクノロジーズ
・freee など
説明記事
公式サイト



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の配列を扱ってしまうと思わぬバグに出くわしてしまいますので、この機会にぜひその仕様を把握しておいてくださいね。

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

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

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