JavaScriptでは、配列は基本的なデータ構造であり、配列を効率的に操作できることは、開発者にとって重要なスキルです。slice()とsplice()の2つは、最もよく使用される配列メソッドに含まれます。名前の響きは似ていますが、目的は大きく異なります。
このブログでは、slice()とsplice()の違いについて説明して、具体例を示して、各メソッドをいつ使用するのが正しいか分かりやすく説明します。これを読めば、もうこの２つを間違えることはないでしょう。
基本：slice()とsplice()とは何か？
slice()
slice()は、配列の一部を返し、また、元の配列を変更せずに、選択した要素を含む新しい配列を返すメソッドです。
構文
- start：このパラメーターは、配列変更を開始するインデックス。
- end（オプション）：抽出終了前のインデックス。このインデックスの要素は含まれません。
主な特徴
- 元の配列を変更しません。
- 新しい配列を返します。
- 配列のコピーまたはサブセットを作成する場合に最適です。
例
const number = ["1", "2", "3", "4", "5"];
const new_list= number.slice(1, 3);
console.log(new_list); // ["2", "3"]
console.log(number); // ["1", "2", "3", "4", "5"]
上記のように、slice()はインデックス1からインデックス3まで要素を抽出しました（ただし、インデックス3は含みません）。元の番号の配列は変更されていません。
splice()
splice()はJavaScriptのメソッドで、配列の内容を変更するために使用します。既存の要素の削除や置き換えを行ったり、または新しい要素を所定の位置に追加したりして、元の配列を変更します。
構文
- start：配列変更を開始するインデックス。
- deleteCount：開始の位置から削除する要素の数。
- item1, item2...（オプション）：開始インデックスで配列に追加する要素。
主な特徴
- 元の配列を変更します。
- 要素の挿入、削除、または置き換えに使用できます。
- 削除された要素を含む配列を返します。
例1– 配列からの削除
const numbers = [1, 2, 3, 4, 5];
const removed = numbers.splice(2, 2);
console.log(removed); // [3, 4]
console.log(numbers); // [1, 2, 5]
例2– 配列への追加
const colors = ["red", "blue"];
colors.splice(1, 0, "green");
console.log(colors); // ["red", "green", "blue"]
例3– 配列内の要素を更新する
const pets = ["dog", "cat", "rabbit"];
pets.splice(1, 1, "hamster");
console.log(pets); // ["dog", "hamster", "rabbit"]
よくある落とし穴
- 元の配列を変更するためにslice（）を使用する
slice()は元の配列を変更しません。 - 配列を変更してはいけないのにsplice（）を使用する
splice()を呼び出すと、その配列を変更することを常に覚えておいてください。このため、共有の配列を意図せずに変更した場合にバグが発生する可能性があります。
どんな場合にどちらを使用するか？
ここでは、簡単な実用例を紹介します。
- slice()は、配列のコピーまたはサブセットを作成し、元の配列をそのまま保持したい場合に使用します。
- splice()は、要素を追加、削除、または置換して配列の内容を変更したい場合に使用します。
結論
slice()とsplice()の違いをはっきり理解することは、単純に構文の知識を得るだけでなく、 slice（）とsplice（）の影響や実用例を理解し、よくあるミスを防ぐことに繋がります。
次にこれらを使用する際は、その目的をよく考えてください。元の配列を保持したいなら、slice()を使用してください。元の配列を変更したいなら、splice()を使用してください。
この2つのメソッドをマスターすると、JavaScript開発者としてより自信が持てるようになるだけでなく、もっとキレイでバグのないコードが書けるようになるでしょう。
