JavaScriptのspliceメソッド完全ガイド｜使い方から応用例まで徹底解説

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. はじめに：spliceメソッドとは？

• 配列の一部の要素を削除したい。
• 指定した位置に新しい要素を追加したい。
• 既存の要素を別の値に置き換えたい。

この記事の目的

対象読者

• JavaScriptを学び始めた初心者。
• 配列の操作に関する知識を深めたい中級者。
• 実務で効率的なコードを書きたいプログラマー。

この記事で得られること

• spliceメソッドの構文や引数の使い方を理解する。
• 要素の削除、追加、置換といった基本操作を実践できる。
• 他の配列操作メソッドとの違いを明確に理解し、適切に使い分ける。

2. 基本概念：spliceメソッドの概要と構文

2.1 spliceメソッドの概要

1. 指定した位置から要素を削除する。
2. 新しい要素を任意の位置に挿入する。
3. 既存の要素を別の値に置き換える。

2.2 spliceメソッドの構文

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

1. start（必須）

• 操作を開始するインデックス番号を指定します。
• 負の値を指定すると、配列の末尾からの位置になります。

1. deleteCount（省略可）

• 削除する要素の数を指定します。
• 0を指定すると、削除は行わずに新しい要素のみ追加します。
• この引数を省略すると、指定した位置から最後までの要素がすべて削除されます。

1. item1, item2, …（任意）

• 配列に追加する要素を指定します。
• この引数を省略すると、削除のみが実行されます。

• 削除された要素を含む新しい配列が返されます。

2.3 使用例と解説

1. 要素を削除する場合

let fruits = ["apple", "banana", "cherry", "date"];
// インデックス1から2つの要素を削除
let removed = fruits.splice(1, 2);

console.log(fruits);   // ["apple", "date"]
console.log(removed);  // ["banana", "cherry"]

2. 要素を追加する場合

let colors = ["red", "blue"];
// インデックス1に2つの要素を追加
colors.splice(1, 0, "green", "yellow");

console.log(colors);  // ["red", "green", "yellow", "blue"]

3. 要素を置換する場合

let numbers = [1, 2, 3, 4, 5];
// インデックス1から2つの要素を置き換える
numbers.splice(1, 2, 'a', 'b');

console.log(numbers);  // [1, 'a', 'b', 4, 5]

2.4 ポイントのまとめ

• spliceは破壊的メソッド：元の配列を直接変更するため注意が必要です。
• 柔軟性が高い操作が可能：削除・追加・置換の3つの機能を1つのメソッドで実現できます。
• 引数の組み合わせ次第で多用途に活用できる：シンプルな使い方から高度な操作まで対応可能です。

3. 使用例：spliceメソッドの基本操作

3.1 要素の削除

let fruits = ["apple", "banana", "cherry", "date"];
// 2番目のインデックスから2つの要素を削除
let removed = fruits.splice(1, 2);

console.log(fruits);   // ["apple", "date"]
console.log(removed);  // ["banana", "cherry"]

• 開始位置 (1)：インデックス1の「banana」から処理を開始します。
• 削除する要素数 (2)：「banana」と「cherry」の2つを削除します。
• 戻り値：削除された要素が新しい配列として返されます。

3.2 要素の追加

let colors = ["red", "blue"];
// 1番目のインデックスに2つの要素を追加
colors.splice(1, 0, "green", "yellow");

console.log(colors);  // ["red", "green", "yellow", "blue"]

• 開始位置 (1)：インデックス1の位置に挿入を開始します。
• 削除する要素数 (0)：要素は削除されません。
• 追加する要素 (“green”, “yellow”)：「green」と「yellow」が挿入されます。

3.3 要素の置換

let numbers = [10, 20, 30, 40];
// 1番目のインデックスから2つの要素を置き換える
numbers.splice(1, 2, 25, 35);

console.log(numbers);  // [10, 25, 35, 40]

• 開始位置 (1)：「20」から操作を開始します。
• 削除する要素数 (2)：「20」と「30」を削除します。
• 追加する要素 (25, 35)：「25」と「35」を新しく挿入します。

3.4 負のインデックスの使用

let items = ["a", "b", "c", "d"];
arr.splice(-2, 1); // 配列の末尾から2番目の要素を削除
console.log(items);  // ["a", "b", "d"]

• 開始位置 (-2)：「c」を削除開始位置として指定します。
• 負のインデックスを使うと、配列の最後から数えた位置を基準に操作できます。

3.5 空の配列への追加操作

let empty = [];
empty.splice(0, 0, "new item");

console.log(empty);  // ["new item"]

3.6 使用例まとめ

• 要素の削除：インデックスと削除数を指定して特定の要素を取り除く。
• 要素の追加：deleteCountを0にすることで、任意の位置に新しい要素を挿入する。
• 要素の置換：削除と追加を同時に指定することで置換操作を実現する。
• 負のインデックス：末尾からの位置指定による柔軟な操作が可能。
• 空配列への追加：初期化と同時に新しい要素を挿入できる。

4. 応用例：実用的なシナリオ

4.1 重複する要素を削除する

let numbers = [1, 2, 2, 3, 4, 4, 5];

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

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

1. indexOfとlastIndexOfで同じ値が複数回出現するかをチェックします。
2. 重複する要素が見つかった場合は、spliceを使って削除します。

4.2 指定位置への要素挿入

let tasks = ["開始", "進行中", "終了"];
tasks.splice(1, 0, "保留");

console.log(tasks); // ["開始", "保留", "進行中", "終了"]

• インデックス1の位置に「保留」を挿入しました。
• 元の配列は直接変更され、既存の要素は右にシフトされます。

4.3 条件に一致する要素を置換する

let scores = [50, 60, 70, 80, 90];

// 70点以下のスコアを「不合格」に置き換える
for (let i = 0; i < scores.length; i++) {
  if (scores[i] <= 70) {
    scores.splice(i, 1, "不合格");
  }
}

console.log(scores); // ["不合格", "不合格", "不合格", 80, 90]

1. 配列をループして条件に一致する要素を見つけます。
2. 一致した場合、その要素をspliceで置換します。

4.4 配列から複数の要素を削除する

let items = ["apple", "banana", "cherry", "banana", "date"];

// "banana"をすべて削除
for (let i = items.length - 1; i >= 0; i--) {
  if (items[i] === "banana") {
    items.splice(i, 1);
  }
}

console.log(items); // ["apple", "cherry", "date"]

• 配列を逆順でループしてspliceを適用することで、インデックスがずれる問題を防ぎます。

4.5 配列の順番を並び替える

let numbers = [10, 20, 30, 40];

// 位置を入れ替える
numbers.splice(1, 2, 35, 25);

console.log(numbers); // [10, 35, 25, 40]

• 既存の要素を削除しながら、新しい順番で要素を挿入しています。
• 複雑なデータ処理やリスト管理に応用できます。

4.6 応用例まとめ

• 重複削除： データのクレンジング処理に活用。
• 要素挿入： リスト項目やデータ配列への柔軟な追加操作を実現。
• 条件付き置換： フィルター処理やステータス管理に役立つ。
• 複数削除： 不要データの一括除去で効率化を図る。
• 順番変更： リスト管理や表示順の調整に応用可能。

5. 他のメソッドとの比較

5.1 spliceとsliceの違い

• 元の配列を直接変更します（破壊的）。
• 要素の削除・追加・置換が可能です。

• 元の配列を変更せず、新しい配列を返します（非破壊的）。
• 指定した範囲の要素を取り出すのみで、追加や置換はできません。

let arr = [1, 2, 3, 4];
arr.splice(1, 2); // インデックス1から2つ削除
console.log(arr); // [1, 4]

let arr = [1, 2, 3, 4];
let sliced = arr.slice(1, 3); // インデックス1から3未満まで取得
console.log(sliced); // [2, 3]
console.log(arr);    // [1, 2, 3, 4] 元の配列は変更されない

• 元の配列を変更したくない場合はsliceを選択。
• 動的な変更が必要な場合はspliceを活用。

5.2 spliceとpush/popの違い

• 配列の末尾に新しい要素を追加します。
• 元の配列を直接変更します。

• 配列の末尾から要素を1つ削除します。
• 元の配列を直接変更します。

let arr = [1, 2, 3];
arr.push(4);
console.log(arr); // [1, 2, 3, 4]

let arr = [1, 2, 3];
arr.pop();
console.log(arr); // [1, 2]

• push/popは末尾の単純な操作に適しています。
• spliceはより複雑な操作（特定位置の変更など）に強みがあります。

5.3 spliceとshift/unshiftの違い

• 配列の先頭の要素を削除します。
• 元の配列を直接変更します。

• 配列の先頭に新しい要素を追加します。
• 元の配列を直接変更します。

let arr = [1, 2, 3];
arr.shift();
console.log(arr); // [2, 3]

let arr = [2, 3];
arr.unshift(1);
console.log(arr); // [1, 2, 3]

• shift/unshiftは先頭の操作に特化。
• spliceは中間や特定の位置の操作に適した柔軟性を持つ。

5.4 メソッド比較まとめ

• 柔軟性が必要な場合：spliceを使用。
• 単純な操作の場合：push/popまたはshift/unshiftが適切。
• 配列を保持しつつ操作したい場合：sliceが最適。

6. 注意点とベストプラクティス

6.1 注意点

let arr = [1, 2, 3, 4];
arr.splice(1, 2); // 要素削除
console.log(arr); // [1, 4]

let arr = [1, 2, 3, 4];
let copy = arr.slice(); // コピーを作成
copy.splice(1, 2);
console.log(arr);  // [1, 2, 3, 4] 元の配列は変更されない
console.log(copy); // [1, 4] コピーのみ変更

let arr = [1, 2, 3, 4];
arr.splice(-5, 1); // エラーなしだが結果もなし
console.log(arr);  // [1, 2, 3, 4]

let arr = [1, 2, 3, 4];
let index = -5;

if (index >= -arr.length && index < arr.length) {
  arr.splice(index, 1);
} else {
  console.log("インデックスが範囲外です。");
}

let arr = Array(1000000).fill(0);
console.time("splice");
arr.splice(500000, 1); // 中央から削除
console.timeEnd("splice");

let arr = Array(1000000).fill(0);
let part1 = arr.slice(0, 500000); // 前半部分
let part2 = arr.slice(500001);   // 後半部分
let result = part1.concat(part2); // 結合で削除結果を再現

6.2 ベストプラクティス

let tasks = ["タスク1", "タスク2", "タスク3"];
let index = tasks.indexOf("タスク2");
if (index !== -1) {
  tasks.splice(index, 1);
}
console.log(tasks); // ["タスク1", "タスク3"]

let users = ["Alice", "Bob", "Charlie"];
let removed = users.splice(1, 1); // Bobを削除
console.log(removed[0] + "を削除しました。"); // Bobを削除しました。

function removeElement(arr, value) {
  let index = arr.indexOf(value);
  if (index !== -1) {
    arr.splice(index, 1);
  }
  return arr;
}

let items = ["a", "b", "c", "d"];
console.log(removeElement(items, "b")); // ["a", "c", "d"]

6.3 注意点とベストプラクティスのまとめ

• 破壊的メソッドであることに注意：元の配列が直接変更されます。
• インデックスは必ず範囲を確認：負のインデックスや範囲外アクセスに注意。
• 大量データへの操作は最適化を検討：配列分割や別アプローチを活用。
• ログ管理や復元機能と組み合わせる：削除要素の扱いを活用。
• 関数化で再利用可能にする：汎用的な関数を作成して保守性を高める。

7. よくある質問（FAQ）

7.1 FAQ一覧

let arr = [1, 2, 3, 4];
arr.splice(1, 2); // 要素削除
console.log(arr); // [1, 4]

let arr = [1, 2, 3, 4];
let copy = arr.slice();
copy.splice(1, 2);
console.log(arr);  // [1, 2, 3, 4] 元の配列は変更されない
console.log(copy); // [1, 4] コピーのみ変更される

let arr = [1, 2, 3, 4];
let removed = arr.splice(1, 0, "new");
console.log(arr);     // [1, "new", 2, 3, 4]
console.log(removed); // []（何も削除されていない）

• 削除数を0に設定すると、削除は行われず新しい要素が挿入されます。

let arr = [];
arr.splice(0, 0, "item");
console.log(arr); // ["item"]

let arr = [1, 2, 3, 4, 5];
arr.splice(-2, 1); // 配列の末尾から2番目の要素を削除
console.log(arr); // [1, 2, 3, 5]

• 負のインデックスを使うと柔軟な操作が可能です。
• 配列の最後から操作したい場合に役立ちます。

let arr = [1, 2, 3, 4];
arr.splice(1, 2); 
console.log(arr); // [1, 4]

let arr = [1, 2, 3, 4];
let sliced = arr.slice(1, 3);
console.log(sliced); // [2, 3]
console.log(arr);    // [1, 2, 3, 4] 元の配列は変更されない

let arr = [1, 4];
arr.splice(1, 0, 2, 3);
console.log(arr); // [1, 2, 3, 4]

• 第3引数以降にカンマ区切りで複数の要素を指定します。
• 柔軟なデータ管理に役立ちます。

7.2 FAQまとめ

1. 破壊的メソッドであることに注意：元の配列が直接変更されます。
2. 削除要素がない場合もエラーなし：空の配列が返されます。
3. 負のインデックスで末尾から操作可能：便利な指定方法として活用できます。
4. spliceとsliceは使い分けが重要：配列を変更したくない場合はsliceを選択。
5. 複数要素の挿入も簡単に実現可能：データ管理に応用しやすい機能です。

8. まとめ

8.1 記事の要点まとめ

1. 基本的な機能

• spliceは配列の要素を削除、追加、置換するための強力なメソッドです。
• 元の配列を直接変更する破壊的メソッドである点に注意が必要です。

1. 構文と引数

• splice(start, deleteCount, item1, item2, ...)の形式で使用します。
• 開始位置、削除する要素数、追加する要素を組み合わせて柔軟に操作できます。

1. 基本操作と応用例

• 要素の削除、追加、置換などの基本操作に加え、重複削除や条件付き置換といった応用例も紹介しました。

1. 他のメソッドとの比較

• spliceは配列を直接変更しますが、sliceは元の配列を変更せずに部分配列を取得します。
• 単純な追加や削除にはpushやpop、shiftやunshiftも便利です。

1. 注意点とベストプラクティス

• 配列を直接変更するため、必要に応じてコピーを作成して安全に操作する。
• インデックスの範囲やパフォーマンスに注意し、効率的なコードを書くために最適化を意識する。

1. よくある質問（FAQ）

• 負のインデックスや複数要素の追加など、実践で遭遇しやすい疑問に対する解決策を示しました。

8.2 今後のステップ

• mapメソッド：配列要素を変換し、新しい配列を生成。
• filterメソッド：条件を満たす要素のみを抽出して新しい配列を作成。
• reduceメソッド：配列要素を集計し、単一の結果を生成。

1. mapやfilterを使ったデータ変換を練習する。
2. reduceを使った高度なデータ処理を試してみる。
3. 他の破壊的メソッド（push、popなど）と非破壊的メソッド（slice、concatなど）を比較検討し、適材適所で使用する。

8.3 参考リソース

• 公式ドキュメント MDN Web Docs – splice
• オンライン学習サイト
• JavaScript.info – JavaScriptの基礎から応用まで網羅。
• Codecademy – インタラクティブな学習体験。
• 実践プロジェクト作成
• CodePen – コードのデモ作成と共有に便利。
• JSFiddle – JavaScriptのテストとデバッグに最適。

8.4 最後に