【JavaScript】 spliceメソッドについて徹底解説！

spliceメソッドとは配列の要素を追加、削除、または置換することができるメソッドです。

1
配列.splice(start, deleteCount, item1, item2, ..., itemN)

spliceメソッドの基礎情報

リンクをコピーしました

この章では、spliceメソッドの基礎情報について解説します。

spliceメソッドの基本的な使い方

リンクをコピーしました

spliceメソッドは配列に対して使うことができるメソッドです。配列の要素を追加、削除、または置換するために使用されます。

以下が基本的な構文です。

1
配列.splice(start, deleteCount, item1, item2, ..., itemN)

• start: 操作を開始する要素のインデックス。
• deleteCount: 削除する要素の数。0を指定すると削除は行われない。
• item1, item2: 追加する要素。指定しないと削除のみ実行。

spliceメソッドは引数の順番が非常に重要です。また返り値は削除された要素が入った新しい配列が返ります。削除が行われない場合は空の配列が返ります。

それでは実際に使ってみましょう。

要素の削除

リンクをコピーしました

spliceを使うと配列から要素を削除することができます。第一引数には削除を開始するインデックスを、第二引数には削除する要素の数を入れます。

1
2
3
4
5
const array = [1, 2, 3, 4, 5];
const removed = array.splice(2, 1);

console.log(array); // [1, 2, 4, 5]
console.log(removed); // [3]

上の例だと第一引数に2、第二引数に1を入れたので、配列の要素の3番目から1つの要素が削除されました。
返り値は削除した値が入った配列になります。

要素の追加

リンクをコピーしました

spliceを使うと配列に新しい要素を追加することができます。追加する要素は第三引数以降で指定します。

1
2
3
4
5
const array = [1, 2, 3, 4, 5];
const result = array.splice(2, 0, 'a', 'b');

console.log(array); // [1, 2, 'a', 'b', 3, 4, 5]
console.log(resule) // []

上の例では第一引数を2を入れたので配列の3番目の要素から追加が始まります。第二引数は0なので、要素は削除されません。今回は第三匹数と第四引数に入れた値が配列の3〜4番目に追加されます。
この例では要素は削除されていないので返り値は空の配列になります。

要素の置換

リンクをコピーしました

spliceを使うと配列の要素を他の要素に置き換えることができます。

1
2
3
4
5
const array = [1, 2, 3, 4, 5];
const result = array.splice(2, 1, 'a', 'b');

console.log(array);  // [1, 2, 'a', 'b', 4, 5]
console.log(result); // [3]

置換は要素の削除と追加を組み合わせて行います。
今回は配列の3番目の要素を置き換えたいので第一引数を2、1つ要素を削除するので第二引数を1、そして第三・第四引数に置換したい値を入れます。
こうすることで、インデックス2の位置の要素3をaとbに置き換えています。
この例では配列のインデックス2から1つの要素が削除されているため、返り値は削除された要素の3が入った配列[3]が返ります。

spliceメソッドの応用的な使い方

リンクをコピーしました

この章では、spliceメソッドの応用的な使い方について解説します。

配列の結合

リンクをコピーしました

spliceを使用して、複数の配列を結合することもできます。

1
2
3
4
5
const firstArray = [10, 20];
const secondArray = [30, 40];
firstArray.splice(firstArray.length, 0, ...secondArray);

console.log(firstArray); // 結果: [10, 20, 30, 40]

firstArray.lengthで最初の配列の要素の数を取得し、最初の配列の末尾に要素を追加するよう指定します。今回は削除する要素はないので第二引数を0とします。そしてスプレッド構文を使い、二番目の配列の要素を展開し、引数で渡すことで2つの配列を結合させています。

配列の反転

リンクをコピーしました

配列の要素を反転するにはreverseがありますが、spliceを使うと部分的な反転ができます。

1
2
3
4
5
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const segment = array.splice(2, 5).reverse(); // [3, 4, 5, 6, 7] を逆転して [7, 6, 5, 4, 3] に
array.splice(2, 0, ...segment);

console.log(array); // [1, 2, 7, 6, 5, 4, 3, 8, 9]

2行目でspliceを使い、インデックス2から5つの要素（[3, 4, 5, 6, 7]）を削除し、reverseを使って削除した要素を逆転させsegmentに代入します。そして再びspliceを使い、逆転させた要素をスプレッド構文を使い、インデックス2以降に追加することで元の配列の一部が逆転された新しい配列にしています。

以下がその流れです。

1. array.splice(2, 5)で[3, 4, 5, 6, 7]を削除
2. array.splice(2, 5)の返り値に[3, 4, 5, 6, 7]が返る
3. array.splice(2, 5).reverse()で返り値の[3, 4, 5, 6, 7]を反転させる
4. segmentに[7, 6, 5, 4, 3]を代入
5. segmentをスプレッド構文で展開し、spliceでarrayに追加

要素の循環シフト

リンクをコピーしました

spliceを使い、最初の配列の要素を最後に移動させることができます。

1
2
3
4
5
const array = [1, 2, 3, 4, 5];
const first = array.splice(0, 1)[0]; // 最初の要素を削除し、取得
array.push(first); // 最初の要素を末尾に追加

console.log(array); // [2, 3, 4, 5, 1]

このコードでは、spliceを使用してインデックス0の最初の要素（1）を削除します。spliceでは削除した要素は配列として返されるため、[0]を使ってその要素を取り出し、firstに代入します。そして、pushを使ってその要素を配列の最後に追加しています。

spliceメソッドの使用場面

リンクをコピーしました

主に配列の要素を追加、削除したりする際に使われるspliceメソッドですが、実際にはどのような場面で使うのかを解説します。

タスク管理アプリ

リンクをコピーしました

タスクを管理するアプリでユーザーが完了済みのタスクを追加したり削除する際などに使います。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
const tasks = [
  { id: 1, title: "タスク1", isCompleted: true },
  { id: 2, title: "タスク2", isCompleted: false },
  { id: 3, title: "タスク3", isCompleted: false },
];

// isCompletedがtrueのタスクを削除する
for (let i = tasks.length - 1; i >= 0; i--) {
  if (tasks[i].isCompleted) {
    tasks.splice(i, 1);
  }
}

console.log(tasks); // 完了済みタスクを除いたタスクリスト

// 出力
// [
//  {"id": 2, "title": "タスク2", "isCompleted": false},
//  {"id": 3, "title": "タスク3", "isCompleted": false}
// ]

// 新しいタスクを指定したインデックスに追加する
function addTaskAtIndex(newTask, index) {
  tasks.splice(index, 0, newTask);
}

// サンプルの実行
addTaskAtIndex({ id: 4, title: "新しいタスク", isCompleted: false }, 1); // インデックス1に挿入

console.log(tasks); // タスクリストに新しいタスクが追加された結果

// 出力
// [
//   {"id": 2, "title": "タスク2", "isCompleted": false},
//   {"id": 4, "title": "新しいタスク", "isCompleted": false},
//   {"id": 3, "title": "タスク3", "isCompleted": false}
// ]

他にもショッピングカートから商品を追加したり、削除したりする時にも利用できます。

データのフィルタリング

リンクをコピーしました

検索結果のデータのフィルタリングにも利用できます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
let products = [
  { id: 1, name: '商品A', price: 100 },
  { id: 2, name: '商品B', price: 150 },
  { id: 3, name: '商品C', price: 120 },
  { id: 4, name: '商品D', price: 200 }
];

// 特定の価格より高い商品を削除する
function filterProductsByPrice(maxPrice) {
  for (let i = products.length - 1; i >= 0; i--) {
    if (products[i].price > maxPrice) {
      products.splice(i, 1);
    }
  }
}

// 140以下の商品をフィルタリング
filterProductsByPrice(140);

console.log(products);

// 出力
//[
//  { id: 1, name: '商品A', price: 100 },
//  { id: 3, name: '商品C', price: 120 }
// ]

使う際の注意点

リンクをコピーしました

この章ではspliceメソッドを使う際の注意点を解説します。

元の配列を変更

リンクをコピーしました

spliceメソッドは使用した配列自体を変更する破壊的メソッドです。元の配列が変更されてしまうため、元の配列を保持したい場合は注意が必要です。

1
2
3
4
5
const array = [1, 2, 3, 4, 5];
array.splice(2, 1);

// 元の配列が変更される
console.log(array); // [1, 2, 4, 5]

繰り返し処理内での削除

リンクをコピーしました

配列から要素を削除すると、その後の要素のインデックスが変更されます。これにより、繰り返し処理の途中で期待したインデックスの要素が削除されたり、処理対象外になってしまうことがあります。

例えば次のコードだと25より大きい要素を削除しようとしていますが、結果として40が評価されず残ってしまっています。

1
2
3
4
5
6
7
8
9
let array = [10, 20, 30, 40, 50];

for (var i = 0; i < array.length; i++) {
  if (array[i] > 25) {
    array.splice(i, 1); // 条件を満たす要素を削除
  }
}

console.log(array); // [10, 20, 40]

なぜ意図しない結果になってしまったか確認してみましょう。

1〜2回目のループでは条件を満たさないため削除は行われません。
しかし3回目のループでは条件を満たすため、3番目の要素30が削除されます。これにより配列の3番目の要素は30から40に変更されます。4回目のループでは最初は4番目の要素である40が評価されるはずでしたが、3番目の要素になってしまったため、スキップされ配列に残ってしまい、意図しない結果が返ってきてしまいました。

これを回避するには配列を逆順で処理するという方法があります。逆順で処理をすれば配列の最後の要素から処理を始めるため、要素が削除されてもインデックスは変わらないためです。

1
2
3
4
5
6
7
8
9
let array = [10, 20, 30, 40, 50];

for (let i = array.length - 1; i >= 0; i--) {
  if (array[i] > 25) {
    array.splice(i, 1); // 条件を満たす要素を削除
  }
}

console.log(array); // [10, 20]

この方法でバグが起こるのを防ぐことができますが、配列から特定の条件を満たす要素を削除する場合には、一般的にはfilterメソッドを使う方が適しています。

インデックスの計算に注意

リンクをコピーしました

引数で指定するインデックスに誤った値を入れてしまうと意図しない結果となってしまいます。複雑な処理をする場合は注意しましょう。

削除数の制御

リンクをコピーしました

spliceメソッドの第二引数には削除する要素数を設定します。その際、配列の要素数を超える数や負の数を指定すると配列の要素全てが削除されるので注意しましょう。

1
2
3
4
5
6
7
8
9
10
let array = [1, 2, 3, 4, 5];

// 要素数を超える数を指定
let removed = array.splice(0, 10);
console.log(array); // []
console.log(removed); //  [1, 2, 3, 4, 5]
// 負の数を指定
let removed = array.splice(0, -1);
console.log(array); // []
console.log(removed); //  [1, 2, 3, 4, 5]

役に立ったらSHARE♪

• twitter
• facebook
• はてブ