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

JavaScript

2020.07.252025.10.25

では配列の変化を「図で見える化」してわかりやすく解説します。文章と絵を組み合わせたイメージです。

例1：置き換え

let fruits = ['りんご', 'みかん', 'ぶどう', 'バナナ'];
fruits.splice(1, 2, 'イチゴ', 'キウイ');

let fruits = ['りんご', 'みかん', 'ぶどう', 'バナナ'];
fruits.splice(1, 2, 'イチゴ', 'キウイ');

JavaScript

ステップごとに図解

1️⃣ 元の配列

[0] りんご
[1] みかん
[2] ぶどう
[3] バナナ

2️⃣ インデックス1から2個を削除

[0] りんご
[1] ---削除---
[2] ---削除---
[3] バナナ

3️⃣ 削除した場所に「イチゴ」「キウイ」を追加

[0] りんご
[1] イチゴ
[2] キウイ
[3] バナナ

✅ 結果：["りんご", "イチゴ", "キウイ", "バナナ"]

let colors = ['赤', '青', '黄', '緑'];
colors.splice(2, 1);

let colors = ['赤', '青', '黄', '緑'];
colors.splice(2, 1);

JavaScript

1️⃣ 元の配列

[0] 赤
[1] 青
[2] 黄
[3] 緑

2️⃣ インデックス2から1個削除

[0] 赤
[1] 青
[2] ---削除---
[3] 緑

3️⃣ 削除後、残った要素が詰められる

[0] 赤
[1] 青
[2] 緑

✅ 結果：["赤", "青", "緑"]

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

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

JavaScript

1️⃣ 元の配列

[0] 犬
[1] 猫
[2] 鳥

2️⃣ インデックス1の位置に追加（削除数0）

[0] 犬
[1] うさぎ
[2] ハムスター
[3] 猫
[4] 鳥

✅ 結果：["犬", "うさぎ", "ハムスター", "猫", "鳥"]