【JavaScript】splice – 配列の要素を削除、追加、置換

JavaScriptで配列の要素を削除、追加、置換したい場合、splice()メソッドが便利です。今回は、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, espresso

splice(1, 0, "cafe latte") により インデックス1に “cafe latte” を追加します。deleteCount0のため削除はなし、結果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, dripper

最後の要素を削除する

JavaScript
const items = ['kettle', 'mill', 'dripper'];
items.splice(-1, 1); // 最後の要素を削除

console.log(items); // kettle, mill

配列を特定の長さに切り詰める

JavaScript
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](変更あり)

splice(-1, 1) は最後の要素を削除する

負のインデックスを使うと、配列の末尾からの削除が可能です。

JavaScript
const items = ['a', 'b', 'c'];
items.splice(-1, 1);

console.log(items); // ["a", "b"]

splice() と slice() の違いについて

似ているので混乱しやすいですが、splice()とslice()には以下のような違いがあります。

メソッド配列を変更するか(破壊的)目的戻り値
splice()元の配列を変更する要素の削除・追加・置換削除された要素の配列
slice()元の配列を変更しない指定範囲の要素を抜き出す抜き出された要素の新しい配列

splice()の場合

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(削除された要素)

slice()の場合

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()