JavaScript | 配列の中身を 削除・置き換え・追加（splice メソッド）

spliceメソッドは最初は少しややこしく感じるかもしれませんが、仕組みを分かりやすく理解すればとても便利です。プログラミング初心者向けに、噛み砕いて丁寧に解説します。

1. spliceって何？

spliceは、配列の中で「要素を削除したり、新しい要素を追加したり、置き換えたり」できる魔法のようなメソッドです。

• 配列：データを順番に並べた箱のようなもの
• インデックス：箱の番号（0から数える）

基本の形

配列.splice(開始位置, 削除する数, 追加したい要素1, 追加したい要素2, ...);

配列.splice(開始位置, 削除する数, 追加したい要素1, 追加したい要素2, ...);

• 開始位置：どの位置から操作するか（0から数えます）
• 削除する数：その位置から何個消すか
• 追加したい要素：ここに書いたものが消した場所に入る

2. 配列の要素を置き換える

例えば、次の配列があります：

let fruits = ['りんご', 'みかん', 'ぶどう', 'バナナ'];

let fruits = ['りんご', 'みかん', 'ぶどう', 'バナナ'];

「みかん」と「ぶどう」を消して、「イチゴ」と「キウイ」を入れたいとします。

fruits.splice(1, 2, 'イチゴ', 'キウイ');
console.log(fruits);

fruits.splice(1, 2, 'イチゴ', 'キウイ');
console.log(fruits);

どうなる？

["りんご", "イチゴ", "キウイ", "バナナ"]

• インデックス1（みかんの位置）から2つ消す
• 消した場所に「イチゴ」と「キウイ」を追加

💡ポイント：置き換えたい時は「削除する数」を指定して、新しい要素を追加します。

3. 配列の要素を削除するだけ

追加せずに削除だけもできます。

let colors = ['赤', '青', '黄', '緑'];
colors.splice(2, 1); // インデックス2から1つ削除
console.log(colors);

let colors = ['赤', '青', '黄', '緑'];
colors.splice(2, 1); // インデックス2から1つ削除
console.log(colors);

["赤", "青", "緑"]

• インデックス2（黄）を1つ消すだけ
• 残った配列は自然に詰められる

💡ポイント：削除だけなら、追加部分は書かない。

4. 配列の指定位置に要素を追加する

消さずに追加もできます。削除数を0にすればOKです。

let animals = ['犬', '猫', '鳥'];
animals.splice(1, 0, 'うさぎ', 'ハムスター');
console.log(animals);

let animals = ['犬', '猫', '鳥'];
animals.splice(1, 0, 'うさぎ', 'ハムスター');
console.log(animals);

["犬", "うさぎ", "ハムスター", "猫", "鳥"]

• インデックス1の位置に追加
• 削除する数は0 → 何も消さない

💡ポイント：追加だけなら「削除する数は0」。

まとめ