今回の記事は、
- Javascriptを使って配列をコピーしたい
- コピーしたはずなのに元の配列も変更されてしまった
- どのメソッドを使えばいいか分からない
という方に向けた記事になっています。
フリーランス案件を探すならこのエージェント！
 |  |  | |
|---|---|---|---|
| 運営会社 | レバテック株式会社 | 株式会社Branding Engineer | 株式会社Hajimari |
| 対応エリア | 東京・神奈川・埼玉・千葉 大阪・兵庫・京都・愛知・福岡 | 東京・神奈川・埼玉・千葉 大阪・兵庫・京都・奈良・和歌山・滋賀 | 東京・神奈川・埼玉・千葉 茨城・大阪・兵庫・福岡 |
| 案件数 | 約28,000件 | 約3,300件 | 約4,200件 |
| 平均単価 | 68.2万円 | 72.2万円 | – |
| 最高月収 | 145万円 | 200万円 | 176万円 |
| 特徴 | ・高単価な案件が多い ・福利厚生サービスが受けられる ・首都圏の案件が中心 | ・給与保証制度で安定した収入を得られる ・税務処理のサポートあり ・マージン率は実質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で配列をコピーする方法その１ 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で配列をコピーする方法その２ 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で配列をコピーする方法その３ 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で配列をコピーする方法その４ スプレッド構文
最後にご紹介するのは、スプレッド構文という方法です。
このスプレッド構文は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()メソッドです。
というのも、何を基準に選定するかは人それぞれなのですが、私は処理速度の優劣でメソッドを選ぶことが多く、その処理速度で見るとこの二つのメソッドが圧倒的に速いからです。
その他、AirbnbのJavaScript Style Guideではスプレッド構文が推奨されているため、そちらを採用する方も多いです。
Array.fromメソッドは処理速度も比較的遅く、そもそも別のオブジェクトを配列に変換するのが主な役割でもありますので、配列をコピーする際にはあまり使用しない印象です。
お仕事の途中ですが、少し一休みして、転職や独立について考えてみませんか🙌？
現役エンジニアが選ぶおすすめの転職エージェント11選【成功談・失敗談もあります】
レバテックフリーランスの評判ってどう？【現役エンジニアが徹底解説します】
MidWorks（ミッドワークス）の評判ってどう？【現役エンジニアが徹底解説します】
日々の業務に追われて自分を見失わないよう、
定期的にキャリアを振り返るようにしておきましょう🤲
最後に
さて、ここまで、Javascriptを使って配列をコピーする方法について解説してきましたがいかがでしたか？
今回ご紹介させて頂いたように、他の言語と同じような感覚でJavascriptの配列を扱ってしまうと思わぬバグに出くわしてしまいますので、この機会にぜひその仕様を把握しておいてくださいね。
また、配列のコピーは実際の開発の中でも頻繁に登場しますので、今回ご紹介したメソッドを使いこなせるようになっておきましょう。
このブログを通じて少しでも「傍（はた）を楽（らく）にする」ことができていれば嬉しく思います。
最後まで読んで頂きありがとうございました。
