JavaScriptのsplice()とは？配列の追加・削除・置き換えを1つで行う方法
JavaScriptのsplice()は、配列の途中に要素を追加したり、不要な要素を削除したり、別の要素に置き換えたりするときに使うメソッドです。
配列そのものを直接変更するのが特徴で、配列操作の基礎を学ぶうえで避けて通れない重要な機能です。
push()やpop()は配列の末尾を操作するメソッドですが、splice()は任意の位置を自由に操作できます。
そのため、配列を柔軟に扱いたい場面でよく使われます。
なお、配列の基本から確認したい場合は、先にJavaScriptの配列操作まとめ（map・filter・reduce）もあわせて読むと理解しやすくなります。
Contents
splice()とは
splice()は、配列の指定した位置から要素を削除したり、追加したり、置き換えたりするメソッドです。
基本構文は以下のとおりです。
array.splice(開始位置, 削除数, 追加する要素1, 追加する要素2, ...);それぞれの意味は次のとおりです。
開始位置：操作を始める位置削除数：削除する要素の数追加する要素：その位置に挿入したい要素
splice()は、削除した要素を配列として返します。
また、元の配列そのものを書き換える点も重要です。
splice()の基本的な使い方
要素を削除する
配列の途中から要素を削除したいときは、開始位置と削除数を指定します。
const fruits = ["りんご", "みかん", "バナナ", "ぶどう"];
const removed = fruits.splice(1, 2);
console.log(fruits); // ["りんご", "ぶどう"]
console.log(removed); // ["みかん", "バナナ"]この例では、インデックス1から2つ分の要素を削除しています。
その結果、"みかん"と"バナナ"が削除され、削除された要素はremovedに配列として入ります。
要素を追加する
削除数を0にすると、要素を削除せずに追加だけできます。
const fruits = ["りんご", "みかん", "ぶどう"];
fruits.splice(2, 0, "バナナ");
console.log(fruits); // ["りんご", "みかん", "バナナ", "ぶどう"]この例では、インデックス2の位置に"バナナ"を追加しています。
要素を置き換える
削除と追加を同時に行うと、要素の置き換えになります。
const fruits = ["りんご", "みかん", "バナナ"];
const removed = fruits.splice(1, 1, "オレンジ");
console.log(fruits); // ["りんご", "オレンジ", "バナナ"]
console.log(removed); // ["みかん"]この例では、"みかん"を1つ削除して、その位置に"オレンジ"を入れています。
splice()の引数をわかりやすく理解する
第1引数は開始位置
第1引数には、操作を始めるインデックスを指定します。
const numbers = [10, 20, 30, 40, 50];
numbers.splice(2, 1);
console.log(numbers); // [10, 20, 40, 50]この場合は、インデックス2にある30が削除されます。
第2引数は削除する数
第2引数では、開始位置から何個削除するかを指定します。
const numbers = [10, 20, 30, 40, 50];
numbers.splice(1, 3);
console.log(numbers); // [10, 50]インデックス1から3つ分、つまり20、30、40が削除されます。
第3引数以降は追加する要素
第3引数以降を指定すると、削除した場所に要素を挿入できます。
const numbers = [10, 20, 50];
numbers.splice(2, 0, 30, 40);
console.log(numbers); // [10, 20, 30, 40, 50]この例では、インデックス2の位置に30と40を追加しています。
splice()の戻り値
splice()は、削除した要素を新しい配列として返します。
追加だけを行った場合は、空の配列が返ります。
削除した要素が返る例
const colors = ["赤", "青", "緑", "黄"];
const result = colors.splice(1, 2);
console.log(colors); // ["赤", "黄"]
console.log(result); // ["青", "緑"]追加だけの場合は空配列になる例
const colors = ["赤", "緑"];
const result = colors.splice(1, 0, "青");
console.log(colors); // ["赤", "青", "緑"]
console.log(result); // []戻り値まで確認しておくと、削除した要素を別で利用したい場合にも対応しやすくなります。
splice()は元の配列を変更する
splice()で特に重要なのは、元の配列が直接変更されることです。
const animals = ["犬", "猫", "鳥"];
animals.splice(1, 1);
console.log(animals); // ["犬", "鳥"]この性質を知らないまま使うと、意図せず元データを書き換えてしまうことがあります。
元の配列を変更したくない場合は、slice()などを使ってコピーを作ってから操作する方法が適しています。slice()との違いは混同しやすいため、あわせてJavaScriptのslice()についての基礎解説記事も確認しておくと整理しやすくなります。
splice()でよくある使い方
配列の途中に要素を差し込む
順番を保ったまま、途中に新しい要素を加えたいときに便利です。
const members = ["田中", "鈴木", "佐藤"];
members.splice(1, 0, "高橋");
console.log(members); // ["田中", "高橋", "鈴木", "佐藤"]特定の位置の要素を差し替える
表示内容や候補データを差し替えたい場面で使えます。
const menu = ["ホーム", "ブログ", "問い合わせ"];
menu.splice(2, 1, "お問い合わせ");
console.log(menu); // ["ホーム", "ブログ", "お問い合わせ"]複数の要素をまとめて削除する
連続した要素を一度に削除したい場合にも使えます。
const items = ["A", "B", "C", "D", "E"];
items.splice(1, 3);
console.log(items); // ["A", "E"]splice()とslice()の違い
splice()とslice()は名前が似ていますが、役割はかなり違います。
splice()は元の配列を変更する
const arr = [1, 2, 3, 4];
const result = arr.splice(1, 2);
console.log(arr); // [1, 4]
console.log(result); // [2, 3]slice()は元の配列を変更しない
const arr = [1, 2, 3, 4];
const result = arr.slice(1, 3);
console.log(arr); // [1, 2, 3, 4]
console.log(result); // [2, 3]違いをまとめると、次のようになります。
splice()：元の配列を変更するslice()：元の配列を変更しない
この違いはとても重要です。
配列の一部を取り出したいだけならslice()、配列自体を編集したいならsplice()が向いています。
splice()で注意したいポイント
配列が書き換わる
最も多い注意点は、元の配列が変わることです。
const scores = [10, 20, 30];
const copied = scores;
copied.splice(0, 1);
console.log(scores); // [20, 30]
console.log(copied); // [20, 30]この例では、copiedは別の配列ではなく同じ配列を参照しているため、どちらも変更されます。
削除数を省略すると最後まで削除される
第2引数を省略すると、開始位置から末尾まですべて削除されます。
const letters = ["a", "b", "c", "d"];
letters.splice(2);
console.log(letters); // ["a", "b"]意図せず多くの要素を削除してしまうことがあるため、削除数は明示するほうが安全です。
負の値も使える
開始位置に負の値を指定すると、末尾から数えた位置になります。
const numbers = [10, 20, 30, 40, 50];
numbers.splice(-2, 1);
console.log(numbers); // [10, 20, 30, 50]この例では、末尾から2番目の40が削除されています。
splice()を使った実用的な例
配列から指定位置のデータを削除する
const tasks = ["メール確認", "資料作成", "会議", "報告"];
const removed = tasks.splice(2, 1);
console.log(tasks); // ["メール確認", "資料作成", "報告"]
console.log(removed); // ["会議"]配列の順番を保ちながら項目を追加する
const stations = ["東京", "品川", "新横浜"];
stations.splice(2, 0, "川崎");
console.log(stations); // ["東京", "品川", "川崎", "新横浜"]一部だけ別の内容に入れ替える
const plans = ["初級", "中級", "上級"];
plans.splice(1, 2, "標準", "発展");
console.log(plans); // ["初級", "標準", "発展"]splice()と他の配列メソッドの使い分け
splice()は便利ですが、目的によっては別のメソッドのほうが分かりやすい場合もあります。
末尾に追加するならpush()
配列の最後に要素を追加するだけなら、push()のほうが直感的です。
配列末尾への追加は、JavaScriptのpush()の使い方を解説した記事も参考になります。
条件に合う要素を絞り込むならfilter()
条件に合う要素だけを取り出したい場合は、splice()ではなくfilter()が適しています。
絞り込み処理については、JavaScriptのfilter()とは？配列の絞り込みを徹底解説で詳しく確認できます。
最初に見つかった要素を取得するならfind()
「削除」ではなく「検索」が目的なら、find()を使うほうが自然です。
検索系メソッドの違いは、JavaScriptのfind()とは？最初の要素を取得する方法も役立ちます。
まとめ
splice()は、配列の途中を自由に操作できる便利なメソッドです。
主なポイントは次のとおりです。
- 配列の追加・削除・置き換えができる
- 削除した要素を配列で返す
- 元の配列を直接変更する
slice()とは違い、配列をその場で編集する
配列操作では非常に出番が多いため、まずは「どの位置から」「何個削除して」「何を追加するか」を順番に考えると理解しやすくなります。splice()を正しく使えるようになると、配列操作の幅が大きく広がります。
よくある質問
splice()とslice()はどう違いますか？
splice()は元の配列を変更しますが、slice()は元の配列を変更しません。
配列を編集したいときはsplice()、一部を取り出したいときはslice()を使います。
splice()の戻り値は何ですか？
削除した要素を配列として返します。
追加だけを行った場合は空の配列が返ります。
splice()で追加だけすることはできますか？
できます。
削除数を0にすると、削除せずに指定位置へ要素を追加できます。
const arr = [1, 3];
arr.splice(1, 0, 2);
console.log(arr); // [1, 2, 3]