では、splice を使って 複数要素の置換・移動 を実際のアプリっぽくシミュレーションしてみましょう。
今回は「TODOリスト」の例で説明します。
実践例：TODOリストで複数項目を置換・移動
let todos = ['買い物', '掃除', '宿題', '洗濯', '散歩'];
console.log('初期リスト:', todos);
// ['買い物', '掃除', '宿題', '洗濯', '散歩']
// 1) 複数の項目を一度に置換
// '掃除' と '宿題' を削除して、'料理', '勉強' を追加
todos.splice(1, 2, '料理', '勉強');
console.log('置換後:', todos);
// ['買い物', '料理', '勉強', '洗濯', '散歩']
// 2) 項目を移動（'散歩' を先頭に持ってくる）
let moved = todos.splice(4, 1); // index4の '散歩' を削除
todos.splice(0, 0, moved[0]); // index0 に挿入
console.log('移動後:', todos);
// ['散歩', '買い物', '料理', '勉強', '洗濯']
// 3) 複数項目を削除（後ろ2つを削除）
todos.splice(-2, 2);
console.log('後ろを削除:', todos);
// ['散歩', '買い物', '料理']
イメージ図（配列の変化）
初期: ['買い物', '掃除', '宿題', '洗濯', '散歩']
置換: ['買い物', '料理', '勉強', '洗濯', '散歩']
↑削除2個 ↑追加2個
移動: ['散歩', '買い物', '料理', '勉強', '洗濯']
↑移動した項目
削除: ['散歩', '買い物', '料理']
↑削除2個
ポイント
- 複数削除＋追加で置換できる → まとめて更新できるので便利
- 削除した要素は配列として返る → 移動や再利用が可能
- 負のインデックスも使える →
-1は最後の要素、-2は最後から2番目
💡 応用アイデア
- TODOリストの「優先度の高い順」に並べ替えたり
- 選択した複数タスクをまとめて移動したり
- 古いタスクをまとめて削除する
すべて splice 1つで対応できます。
