JavaScriptのspliceで指定した位置の要素を削除する7つの方法

●spliceメソッドとは
●指定位置の要素を削除する7つの方法
●spliceメソッドのよくあるエラーと対処法
●spliceメソッドの応用例
まとめ

●spliceメソッドとは

配列操作を行う上で欠かせないメソッドの1つに、spliceメソッドがあります。

このメソッドを使えば、配列の指定した位置から要素を削除したり、新しい要素を追加したりすることができるのです。

JavaScriptを学び始めたばかりの頃は、配列操作にちょっと苦手意識を持っていた方も多いのではないでしょうか。

でも大丈夫、spliceメソッドの使い方をマスターすれば、配列操作がぐっと楽になりますよ。

○spliceメソッドの構文

spliceメソッドの構文は次のようになります。

array.splice(start, deleteCount, item1, item2, ...)

startは配列の変更を開始する位置（インデックス）を指定します。

deleteCountは、startから始まる位置から削除する要素の数を指定します。

item1, item2, …は、削除した位置に追加する要素です。

○spliceメソッドの戻り値

spliceメソッドは、削除した要素を含む新しい配列を返します。

つまり、元の配列から指定した要素が削除され、その削除された要素が新しい配列として返されるのです。

これを知っておくと、削除した要素を別の配列に移動させたい時などに便利ですね。

○サンプルコード1：指定位置から1つの要素を削除

では早速、spliceメソッドを使ってみましょう。

まずは、指定した位置から1つの要素を削除する例です。

let fruits = ['apple', 'banana', 'orange', 'grape'];
console.log(fruits); // 出力結果：["apple", "banana", "orange", "grape"]

// インデックス2の位置から1つの要素を削除
let removed = fruits.splice(2, 1);

console.log(fruits); // 出力結果：["apple", "banana", "grape"]
console.log(removed); // 出力結果：["orange"]

fruitsという配列の中から、インデックス2の位置にある’orange’を削除しています。

第2引数の1は、インデックス2から始まる1つの要素を削除するという意味です。

実行結果を見ると、fruitsからは’orange’が削除され、removedには削除された要素である[‘orange’]が入っていることがわかります。

●指定位置の要素を削除する7つの方法

spliceメソッドを使えば、配列のあらゆる位置から要素を自在に削除できます。

でも、具体的にどんな方法があるのか、ちょっとイメージしにくいですよね。

そこで、指定位置の要素を削除する7つの方法を、これからじっくり見ていきましょう。

サンプルコードを交えながら、実践的な使い方をマスターできるはずです。

早速、1つ目の方法から説明していきますね。

○サンプルコード2：先頭の要素を削除

配列の先頭にある要素を削除したい時は、spliceメソッドの第1引数に0を指定します。

これは、インデックス0、つまり配列の最初の位置から要素を削除することを意味しているんです。

let colors = ['red', 'green', 'blue', 'yellow'];
console.log(colors); // 出力結果：["red", "green", "blue", "yellow"]

// 先頭の要素を削除
colors.splice(0, 1);

console.log(colors); // 出力結果：["green", "blue", "yellow"]

この例では、colorsという配列の先頭にある’red’を削除しています。

第2引数の1は、インデックス0から始まる1つの要素を削除するという意味ですね。

結果を見ると、’red’が削除され、残りの要素が詰められていることがわかります。

先頭の要素を削除する時は、こんな感じでspliceメソッドを使えば簡単に実現できるんです。

○サンプルコード3：末尾の要素を削除

今度は、配列の末尾にある要素を削除する方法について説明します。

これは、spliceメソッドの第1引数に-1を指定することで実現できるんですよ。

let numbers = [1, 2, 3, 4, 5];
console.log(numbers); // 出力結果：[1, 2, 3, 4, 5]

// 末尾の要素を削除
numbers.splice(-1, 1);

console.log(numbers); // 出力結果：[1, 2, 3, 4]

numbersという配列の末尾にある5を削除しています。

spliceメソッドの第1引数に-1を指定することで、配列の最後の位置を表しているんです。

第2引数の1は、その位置から1つの要素を削除するという意味ですね。

実行結果を見ると、5が削除され、残りの要素が詰められていることがわかります。

このように、マイナスのインデックスを使うことで、配列の末尾から要素を削除することができるんですよ。

○サンプルコード4：指定位置から複数の要素を削除

次は、指定した位置から複数の要素を一度に削除する方法です。

これは、spliceメソッドの第2引数に、削除する要素の数を指定することで実現できます。

let fruits = ['apple', 'banana', 'orange', 'grape', 'kiwi'];
console.log(fruits); // 出力結果：["apple", "banana", "orange", "grape", "kiwi"]

// インデックス2から3つの要素を削除
fruits.splice(2, 3);

console.log(fruits); // 出力結果：["apple", "banana"]

この例では、fruitsという配列のインデックス2の位置から、3つの要素を削除しています。

第2引数に3を指定することで、’orange’, ‘grape’, ‘kiwi’の3つの要素が一度に削除されるんです。

実行結果を見ると、指定した位置から3つの要素が削除され、残りの要素が詰められていることがわかりますね。

このように、spliceメソッドの第2引数を調整することで、まとめて複数の要素を削除できます。

○サンプルコード5：全ての要素を削除

配列の中身を全て削除したい時ってありますよね。

例えば、ユーザーの入力内容をリセットする際に、関連する配列をクリアする必要があったりするんです。

そんな時は、spliceメソッドの第2引数に配列の長さを指定することで、全ての要素を一気に削除できます。

let numbers = [1, 2, 3, 4, 5];
console.log(numbers); // 出力結果：[1, 2, 3, 4, 5]

// 全ての要素を削除
numbers.splice(0, numbers.length);

console.log(numbers); // 出力結果：[]

この例では、numbersという配列の全ての要素を削除しています。

第1引数に0を指定して配列の先頭から削除を開始し、第2引数にnumbers.lengthを指定することで、配列の長さ分だけ要素が削除されるんです。

実行結果を見ると、numbersは空の配列になっていることがわかりますね。

たった1行のコードで、配列の中身を丸ごと削除できるのは、かなり便利だと思いませんか？

○サンプルコード6：条件を満たす要素を削除

ここからは、もう少し実践的なシーンを想定した使い方を見ていきましょう。

例えば、ある条件を満たす要素だけを配列から削除したい時ってありますよね。

そんな場合は、forループとspliceメソッドを組み合わせることで実現できます。

let scores = [30, 50, 80, 90, 40, 60, 20];
console.log(scores); // 出力結果：[30, 50, 80, 90, 40, 60, 20]

// 60点未満の要素を削除
for (let i = scores.length - 1; i >= 0; i--) {
  if (scores[i] < 60) {
    scores.splice(i, 1);
  }
}

console.log(scores); // 出力結果：[80, 90, 60]

この例では、scoresという配列から、60点未満の要素を全て削除しています。

配列の後ろから順番に要素をチェックし、60点未満の要素が見つかったら、その位置でspliceメソッドを呼び出して削除しているんです。

重要なポイントは、ループを配列の後ろから開始していることですね。

これは、配列の前から順番に削除していくと、インデックスがずれてしまうためです。

後ろから処理することで、削除された要素の影響を受けずに、正しい位置の要素を削除できます。

実行結果を見ると、60点未満の要素が全て削除され、残りの要素だけが配列に残っていることがわかります。

条件に合わせて柔軟に要素を削除できるのは、とても強力だと思いませんか？

○サンプルコード7：削除した要素を別の配列に移動

spliceメソッドは、削除した要素を別の配列に移動させることもできます。

これは、spliceメソッドが削除した要素を新しい配列として返す性質を利用しています。

let fruits = ['apple', 'banana', 'orange', 'grape'];
console.log(fruits); // 出力結果：["apple", "banana", "orange", "grape"]

// インデックス1から2つの要素を削除し、別の配列に移動
let removed = fruits.splice(1, 2);

console.log(fruits); // 出力結果：["apple", "grape"]
console.log(removed); // 出力結果：["banana", "orange"]

この例では、fruitsという配列のインデックス1の位置から、2つの要素を削除しています。

削除された要素は、spliceメソッドの戻り値として、removedという新しい配列に格納されるんです。

実行結果を見ると、fruitsからは’banana’と’orange’が削除され、removedにはその2つの要素が移動していることがわかりますね。

○サンプルコード8：削除と同時に要素を追加

spliceメソッドは、要素を削除すると同時に、新しい要素を追加することもできます。

これは、削除した位置に、追加したい要素を指定することで実現できます。

例えば、古いデータを新しいデータに置き換えたい時などに便利です。

それでは実際に、コードを見ながら理解を深めていきましょう。

let fruits = ['apple', 'banana', 'orange'];
console.log(fruits); // 出力結果：["apple", "banana", "orange"]

// インデックス1の要素を削除し、その位置に新しい要素を追加
fruits.splice(1, 1, 'grape', 'kiwi');
console.log(fruits); // 出力結果：["apple", "grape", "kiwi", "orange"]

この例では、fruitsという配列のインデックス1の位置にある’banana’を削除し、その位置に’grape’と’kiwi’を追加しています。

spliceメソッドの第1引数でインデックス1を指定し、第2引数で削除する要素数を1に設定しています。

そして、第3引数以降に、追加したい要素を指定しています。

実行結果を見ると、’banana’が削除され、その位置に’grape’と’kiwi’が追加されていることがわかります。

削除と追加を一度に行えるのは、とても効率的です。

●spliceメソッドのよくあるエラーと対処法

さて、ここまでspliceメソッドの様々な使い方を見てきましたが、実際に使っていると、ときどきエラーに遭遇することがあります。

特に、初めてspliceメソッドを使う時は、よくあるエラーを知っておくことで、スムーズに問題を解決できるようになります。

これから、spliceメソッドを使う際に遭遇しやすいエラーとその対処法を見ていきましょう。

○開始位置が配列の長さを超えている場合

spliceメソッドを使う時に注意したいのが、開始位置が配列の長さを超えている場合のエラーです。

これは、削除を開始する位置として、配列の長さ以上の値を指定した時に発生します。

例えば、4つの要素を持つ配列に対して、インデックス5から削除を開始しようとすると、このエラーが発生します。

let numbers = [1, 2, 3, 4];
console.log(numbers); // 出力結果：[1, 2, 3, 4]

// インデックス5から削除を開始（エラー）
numbers.splice(5, 1);
console.log(numbers); // 出力結果：[1, 2, 3, 4]

この例では、numbersという配列に対して、インデックス5から1つの要素を削除しようとしています。

しかし、numbersの長さは4なので、インデックス5は存在しません。

そのため、エラーが発生し、配列の内容は変化しません。

このようなエラーを避けるためには、開始位置が配列の長さを超えていないか、あらかじめチェックしておくことが大切です。

○削除する要素数が配列の長さを超えている場合

もう1つ注意したいのが、削除する要素数が配列の長さを超えている場合のエラーです。

これは、spliceメソッドの第2引数で指定する削除する要素数が、配列の長さを超えている時に発生します。

例えば、3つの要素を持つ配列に対して、5つの要素を削除しようとすると、このエラーが発生します。

let fruits = ['apple', 'banana', 'orange'];
console.log(fruits); // 出力結果：["apple", "banana", "orange"]

// インデックス1から5つの要素を削除（エラー）
fruits.splice(1, 5);
console.log(fruits); // 出力結果：["apple"]

この例では、fruitsという配列に対して、インデックス1から5つの要素を削除しようとしています。

しかし、fruitsの長さは3なので、5つの要素を削除することはできません。

この場合、エラーは発生せずに、指定した位置から配列の末尾までの要素が全て削除されます。

つまり、’banana’と’orange’が削除され、’apple’だけが残ります。

このように、削除する要素数が配列の長さを超えている場合は、予期しない結果になることがあるので注意が必要です。

○spliceメソッドを使う際の注意点

spliceメソッドを使う時は、開始位置や削除する要素数に注意することが大切だということがわかりましたかね？

ただ、spliceメソッドを使う際には、他にも気をつけたい点があります。

例えば、spliceメソッドは元の配列を直接変更するメソッドなので、注意が必要です。

つまり、一度spliceメソッドを呼び出すと、元の配列の内容が変化します。

これは、配列を操作する前に、バックアップを取っておくことで対処できます。

あるいは、spliceメソッドの戻り値を利用して、削除された要素を別の配列に保存しておくのもいいでしょう。

また、spliceメソッドを使う際は、インデックスがずれることにも注意が必要です。

特に、ループ処理の中でspliceメソッドを使う場合は、注意が必要です。

削除された要素分、インデックスがずれるので、ループの条件を適切に調整しないと、思わぬ結果になることがあります。

●spliceメソッドの応用例

ここまで、spliceメソッドの基本的な使い方やよくあるエラーについて詳しく見てきましたが、実はspliceメソッドには、もっと応用的な使い方があります。

配列操作のプロになるためには、これらの応用例を知っておくことが大切です。

きっと、皆さんのコーディングの幅が広がるはずです。

それでは、spliceメソッドの応用例を、サンプルコードを交えながら一緒に見ていきましょう。

○サンプルコード9：重複する要素の削除

配列の中に重複する要素があると、データの整合性が取れなくなったり、無駄なメモリを消費したりしてしまいます。

そんな時は、spliceメソッドを使って、重複する要素を削除することができます。

具体的には、重複する要素を見つけるために、indexOfメソッドを使います。

そして、見つかった要素をspliceメソッドで削除します。

let numbers = [1, 2, 3, 2, 4, 3, 5];
console.log(numbers); // 出力結果：[1, 2, 3, 2, 4, 3, 5]

// 重複する要素を削除
for (let i = 0; i < numbers.length; i++) {
  let index = numbers.indexOf(numbers[i], i + 1);
  if (index !== -1) {
    numbers.splice(index, 1);
    i--;
  }
}

console.log(numbers); // 出力結果：[1, 2, 3, 4, 5]

この例では、numbersという配列の中に、重複する要素である2と3があります。

これらの重複する要素を削除するために、forループを使って配列を走査しています。

ループ内では、indexOfメソッドを使って、現在の要素（numbers[i]）が、それ以降の位置に存在するかどうかを確認しています。

存在する場合は、そのインデックスを取得し、spliceメソッドで要素を削除しています。

重複する要素が削除されると、配列の長さが変化するので、ループ変数iをデクリメントして、次の要素を正しく処理できるようにしています。

実行結果を見ると、重複する要素が削除され、[1, 2, 3, 4, 5]のようにユニークな要素だけが残っていることがわかります。

○サンプルコード10：配列をランダムにシャッフル

配列の要素をランダムに並び替えたい時ってありますよね。

例えば、ゲームのカードをシャッフルしたり、ランダムな順番で質問を表示したりする場合などです。

そんな時は、spliceメソッドを使って、配列をランダムにシャッフルすることができます。

Fisher-Yates shuffleというアルゴリズムを使うと、効率的にシャッフルができます。

let cards = ['A', 'K', 'Q', 'J', '10', '9', '8', '7'];
console.log(cards); // 出力結果：["A", "K", "Q", "J", "10", "9", "8", "7"]

// Fisher-Yates shuffleアルゴリズムを使って配列をシャッフル
for (let i = cards.length - 1; i > 0; i--) {
  let j = Math.floor(Math.random() * (i + 1));
  [cards[i], cards[j]] = [cards[j], cards[i]];
}

console.log(cards); // 出力例(ランダム)：["9", "J", "A", "10", "Q", "7", "K", "8"]

この例では、cardsという配列に、トランプのカードの一部を格納しています。

このカードをランダムにシャッフルするために、Fisher-Yates shuffleアルゴリズムを使っています。

具体的には、配列の末尾から要素を1つずつ取り出し、ランダムな位置にある要素と入れ替えていきます。

これを配列の先頭まで繰り返すことで、効率的にシャッフルができます。

ランダムな位置は、Math.random()関数を使って生成しています。

また、要素の入れ替えには、分割代入を使っているので、コードがスッキリしています。

実行結果を見ると、配列の要素がランダムに並び替えられていることがわかります。

シャッフルされた結果は、実行するたびに変化するので、ランダム性が保たれています。

○サンプルコード11：配列を昇順にソート

配列の要素を昇順に並び替えたい時は、spliceメソッドと組み合わせて、ソートすることができます。

ソートのアルゴリズムには、挿入ソートを使ってみましょう。

挿入ソートは、配列の先頭から要素を1つずつ取り出し、それまでに並び替えられた部分に挿入していくアルゴリズムです。

これを実装する際に、spliceメソッドを使うことで、要素の挿入を効率的に行えます。

let numbers = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3];
console.log(numbers); // 出力結果：[3, 1, 4, 1, 5, 9, 2, 6, 5, 3]

// 挿入ソートを使って配列を昇順にソート
for (let i = 1; i < numbers.length; i++) {
  let temp = numbers[i];
  let j = i - 1;
  while (j >= 0 && numbers[j] > temp) {
    numbers[j + 1] = numbers[j];
    j--;
  }
  numbers.splice(j + 1, 0, temp);
}

console.log(numbers); // 出力結果：[1, 1, 2, 3, 3, 4, 5, 5, 6, 9]

この例では、numbersという配列を昇順にソートしています。

挿入ソートを実装するために、forループを使って配列を走査しています。

各ループでは、現在の要素（numbers[i]）を一時変数tempに保存し、それまでに並び替えられた部分との比較を行います。

比較には、whileループを使っています。

tempより大きい要素があれば、その要素を1つ後ろにずらします。

これを繰り返すことで、tempを挿入する位置を見つけます。

最後に、spliceメソッドを使って、tempをその位置に挿入します。

第1引数にj+1を指定することで、適切な位置に要素が挿入されます。

実行結果を見ると、配列の要素が昇順に並び替えられていることがわかります。

spliceメソッドを使うことで、挿入ソートを効率的に実装できます。