JavaScriptで配列の要素を削除、追加、置換したい場合、splice()メソッドが便利です。今回は、splice()の基本的な使い方から使用時の注意点までをまとめていきたいと思います。
splice()メソッドは、配列の要素を削除、追加、置換するためのメソッドです。配列を直接変更（破壊的処理）する点に注意が必要です。
JavaScript
array.splice(start, deleteCount, item1, item2, ...)| パラメータ | 説明 |
|---|---|
start | 変更を開始するインデックス（0から始まる） |
deleteCount | 削除する要素の数（0にすると削除しない） |
item1, item2, ... | 追加する要素（省略可能） |
JavaScript
const items = ['kettle', 'server', 'mill', 'dripper'];
items.splice(1, 1); // インデックス1（server）を削除
console.log(items); // kettle, mill, dripper配列 items から インデックス 1 の要素（server）を削除しています。結果、console.logには["kettle", "mill", "dripper"]は表示されます。
JavaScript
const drinks = ['coffee', 'cappuccino', 'espresso'];
drinks.splice(1, 0, "cafe latte"); // インデックス1に"cafe latte"を追加（削除なし）
console.log(drinks); // coffee, cafe latte, cappuccino, espressosplice(1, 0, "cafe latte") により インデックス1に “cafe latte” を追加します。deleteCountが0のため削除はなし、結果console.logには["coffee","cafe latte","cappuccino","espresso"]が表示されます。
JavaScript
const numbers = [10, 20, 30, 40];
numbers.splice(1, 2, 25, 35); // インデックス1の要素2つを削除し、新しい要素を追加
console.log(numbers); // [10, 25, 35, 40]splice(1, 2, 25, 35) により インデックス1から2つの要素（20, 30）を削除します。削除した位置に新しい要素25, 35を挿入し、結果console.logには[10, 25, 35, 40]が表示されます。
JavaScript
const items = ['kettle', 'server', 'mill', 'dripper']
const removeItem = 'server'; // 削除したい要素
const index = items.findIndex(item => item === removeItem);
if (index !== -1) {
items.splice(index, 1);
}
console.log(items); // kettle, mill, dripperJavaScript
const items = ['kettle', 'mill', 'dripper'];
items.splice(-1, 1); // 最後の要素を削除
console.log(items); // kettle, millJavaScript
const numbers = [1, 2, 3, 4, 5, 6, 7];
numbers.splice(3); // インデックス3以降の要素を削除
console.log(numbers); // [1, 2, 3]splice() は元の配列を変更するメソッドのため、データを保持したい場合は コピーを作成してから処理 することを推奨します。
JavaScript
const originalArray = [1, 2, 3, 4];
const newArray = originalArray.slice(); // 配列のコピーを作成
newArray.splice(1, 2);
console.log(originalArray); // [1, 2, 3, 4]（変更なし）
console.log(newArray); // [1, 4]（変更あり）負のインデックスを使うと、配列の末尾からの削除が可能です。
JavaScript
const items = ['a', 'b', 'c'];
items.splice(-1, 1);
console.log(items); // ["a", "b"]似ているので混乱しやすいですが、splice()とslice()には以下のような違いがあります。
| メソッド | 配列を変更するか（破壊的） | 目的 | 戻り値 |
|---|---|---|---|
splice() | 元の配列を変更する | 要素の削除・追加・置換 | 削除された要素の配列 |
slice() | 元の配列を変更しない | 指定範囲の要素を抜き出す | 抜き出された要素の新しい配列 |
JavaScript
const arr = ['A', 'B', 'C', 'D', 'E'];
// 配列が変更される
const spliced = arr.splice(1, 2); // インデックス1から2つ削除
console.log(arr); // A, D, E（変更される）
console.log(spliced); // B, C（削除された要素）JavaScript
const arr = ['A', 'B', 'C', 'D', 'E'];
// 配列が変更されない
const sliced = arr.slice(1, 3); // インデックス1から2までを取得
console.log(arr); // A, B , C , D, E（変更なし）
console.log(sliced); // B, C（取得された要素）使い分けとしては以下を参考にしてみてください。
| 使用したいケース | 推奨メソッド |
|---|---|
| 配列の要素を削除・追加・置換 したい | splice() |
| 元の配列を変更せず、一部を取り出したい | slice() |
| 配列のコピーを作成したい | slice() |
