JavaScriptのsplice()入門｜配列の追加・削除・置換を行う

// 基本構文
array.splice(開始位置, 削除数, 挿入要素1, 挿入要素2, ...);

const fruits = ["りんご", "バナナ", "みかん", "いちご", "ぶどう"];

// 削除のみ：インデックス1から2つ削除
const removed = fruits.splice(1, 2);
console.log("削除された:", removed);
console.log("残り:", fruits);

// 挿入のみ：インデックス1に追加（削除数0）
fruits.splice(1, 0, "メロン", "キウイ");
console.log("挿入後:", fruits);

// 置換：インデックス0の1つを置き換え
fruits.splice(0, 1, "なし");
console.log("置換後:", fruits);

削除された: ["バナナ", "みかん"]
残り: ["りんご", "いちご", "ぶどう"]
挿入後: ["りんご", "メロン", "キウイ", "いちご", "ぶどう"]
置換後: ["なし", "メロン", "キウイ", "いちご", "ぶどう"]

// パターン1: 削除のみ
const arr1 = [1, 2, 3, 4, 5];
arr1.splice(2, 1); // インデックス2から1つ削除
console.log("削除のみ:", arr1);

// パターン2: 挿入のみ（削除数を0にする）
const arr2 = [1, 2, 5, 6];
arr2.splice(2, 0, 3, 4); // インデックス2に3, 4を挿入
console.log("挿入のみ:", arr2);

// パターン3: 置換（削除して同時に挿入）
const arr3 = ["月", "火", "木", "金"];
arr3.splice(2, 0, "水"); // 水曜を追加
console.log("置換:", arr3);

// 負のインデックスも使える
const arr4 = [1, 2, 3, 4, 5];
arr4.splice(-2, 1); // 末尾から2番目を削除
console.log("負のインデックス:", arr4);

削除のみ: [1, 2, 4, 5]
挿入のみ: [1, 2, 3, 4, 5, 6]
置換: ["月", "火", "水", "木", "金"]
負のインデックス: [1, 2, 3, 5]

// ドラッグ&ドロップの並べ替えをシミュレート
const items = ["タスクA", "タスクB", "タスクC", "タスクD"];
console.log("変更前:", items);

// タスクCをインデックス2から0に移動
const [movedItem] = items.splice(2, 1); // 取り出し
items.splice(0, 0, movedItem);           // 挿入
console.log("変更後:", items);

// 条件に合う要素を削除
const numbers = [10, 25, 30, 15, 45, 20];
// 30以上の要素を後ろから削除（前からだとインデックスがずれる）
for (let i = numbers.length - 1; i >= 0; i--) {
  if (numbers[i] >= 30) {
    numbers.splice(i, 1);
  }
}
console.log("30未満のみ:", numbers);

// toSpliced() - 非破壊版（ES2023）
const original = [1, 2, 3, 4, 5];
const modified = original.toSpliced(1, 2, 10, 20);
console.log("元の配列:", original);
console.log("変更後:", modified);

変更前: ["タスクA", "タスクB", "タスクC", "タスクD"]
変更後: ["タスクC", "タスクA", "タスクB", "タスクD"]
30未満のみ: [10, 25, 15, 20]
元の配列: [1, 2, 3, 4, 5]
変更後: [1, 10, 20, 4, 5]