JavaScript | 配列の splice メソッド

では、ブラウザ上の TODOリストUIでドラッグ＆ドロップした順番を splice で反映する例 を作ってみます。
今回は 簡易的なHTML＋JavaScript で、実際に順番を入れ替えられる仕組みです。

See the Pen Drag-and-Drop To-Do List by MONO365 -Color your days- (@monoqlo365) on CodePen.

使い方

1. TODO項目を ドラッグして好きな位置にドロップ
2. 配列 todos の順番が splice で更新され、UIも変わる

解説

• todos.splice(dragStartIndex, 1) → 移動する要素を削除
• todos.splice(dragEndIndex, 0, movedItem) → 目的の位置に挿入
• 元の配列が 破壊的に変更 されるので、常にUIと一致する
• 簡単に「配列の順番を操作して画面に反映」できる

💡 この仕組みを応用すれば：

• TODOの優先順位変更
• 並び替え可能なリスト
• カードゲームの並べ替えUI
  など、配列操作とUI同期が簡単に作れます。