splice は配列を操作するときに超便利ですが、初心者には少し複雑に見えるので、図解イメージと例を交えて丁寧に解説します。
splice は 配列の要素を削除・追加・置換 する万能メソッドです。
array.splice(start, deleteCount, item1, item2, ...);
パラメータの意味
| パラメータ | 説明 |
|---|---|
start | 変更を始める位置（0からのインデックス） |
deleteCount | 削除する要素の数（0なら削除なし） |
item1, item2, ... | 配列に追加する要素（省略可） |
1) 要素を削除するだけ
let fruits = ['apple', 'banana', 'orange', 'melon'];
fruits.splice(1, 2); // 1番目から2個削除
console.log(fruits); // ['apple', 'melon']
イメージ
元: [apple, banana, orange, melon]
削除: ^ ^ → 'banana' と 'orange' を削除
結果: [apple, melon]
spliceは 削除した要素を返す ので、必要なら保存可能：
let removed = fruits.splice(1, 1); // ['melon']
2) 要素を追加するだけ
let fruits = ['apple', 'banana'];
fruits.splice(1, 0, 'orange', 'melon'); // 1番目に追加、削除は0
console.log(fruits); // ['apple', 'orange', 'melon', 'banana']
イメージ
元: [apple, banana]
追加: ^ insert here
結果: [apple, orange, melon, banana]
deleteCount = 0にすれば削除なしで挿入できます。
3) 要素を置換（削除＋追加）
let fruits = ['apple', 'banana', 'orange'];
fruits.splice(1, 1, 'melon', 'grape'); // 1番目を1個削除して、2個追加
console.log(fruits); // ['apple', 'melon', 'grape', 'orange']
イメージ
元: [apple, banana, orange]
削除: ^ → 'banana'
追加: ^ → 'melon', 'grape' を挿入
結果: [apple, melon, grape, orange]
- 削除と追加を同時に行えるのが
spliceの強みです。
4) 応用例：TODOリスト
let todos = ['買い物', '掃除', '宿題'];
// 「掃除」を削除して「洗濯」を追加
todos.splice(1, 1, '洗濯');
console.log(todos); // ['買い物', '洗濯', '宿題']
// 「散歩」と「料理」を先頭に追加
todos.splice(0, 0, '散歩', '料理');
console.log(todos); // ['散歩', '料理', '買い物', '洗濯', '宿題']
// 最後の要素を削除
todos.splice(todos.length - 1, 1);
console.log(todos); // ['散歩', '料理', '買い物', '洗濯']
5) ポイントまとめ
spliceは 破壊的 → 元の配列が変わる- 削除だけ、追加だけ、置換もできる万能メソッド
deleteCountを 0 にすると削除せずに挿入だけ可能- 削除した要素は返り値として取得できる
💡 覚え方のコツ
array.splice(どこから, 何個消す, 何を追加する)
- 「どこから」→インデックス
- 「何個消す」→0なら消さない
- 「何を追加」→0個以上何でも追加できる
