【JavaScript】配列から要素を削除する方法｜splice・filter・pop・shift・インデックス指定・条件削除まで完全解説

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

// インデックス 1 から 1 件削除
const removed = fruits.splice(1, 1);

console.log(fruits);  // ['りんご', 'ぶどう', 'みかん']
console.log(removed); // ['バナナ']（削除された要素）

const nums = [10, 20, 30, 40, 50];

// インデックス 1 から 2 件削除
nums.splice(1, 2);
console.log(nums); // [10, 40, 50]

// 負のインデックス（末尾から数える）
const colors = ['red', 'green', 'blue', 'yellow'];
colors.splice(-2, 1); // 末尾から2番目（'blue'）を削除
console.log(colors); // ['red', 'green', 'yellow']

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

function removeFirst(arr, value) {
  const index = arr.indexOf(value);
  if (index !== -1) arr.splice(index, 1);
  return arr;
}

removeFirst(fruits, 'バナナ');
console.log(fruits); // ['りんご', 'ぶどう', 'みかん']

// 存在しない値を渡しても安全（indexOf が -1 を返すとガード）
removeFirst(fruits, 'パイナップル');
console.log(fruits); // ['りんご', 'ぶどう', 'みかん']（変化なし）

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

// 'バナナ' をすべて除去（重複も含めて削除）
const result = fruits.filter(f => f !== 'バナナ');

console.log(fruits); // ['りんご', 'バナナ', 'ぶどう', 'バナナ', 'みかん']（元は変わらない）
console.log(result); // ['りんご', 'ぶどう', 'みかん']

const scores = [85, null, 72, undefined, 0, 95, '', 60];

// null / undefined だけ除去（0 や空文字は残す）
const noNulls = scores.filter(x => x != null);
console.log(noNulls); // [85, 72, 0, 95, '', 60]

// すべての falsy 値を除去（0・空文字・null・undefined）
const truthy = scores.filter(Boolean);
console.log(truthy); // [85, 72, 95, 60]

const queue = ['Alice', 'Bob', 'Carol', 'Dave'];

// 先頭を取り出す（キュー処理）
const first = queue.shift();
console.log(first);  // 'Alice'
console.log(queue);  // ['Bob', 'Carol', 'Dave']

// 末尾を取り出す（スタック処理）
const last = queue.pop();
console.log(last);   // 'Dave'
console.log(queue);  // ['Bob', 'Carol']

// 空配列に対しては undefined を返す（エラーにならない）
const empty = [];
console.log(empty.pop()); // undefined

const users = [
  { id: 1, name: '田中', active: true  },
  { id: 2, name: '鈴木', active: false },
  { id: 3, name: '佐藤', active: true  },
  { id: 4, name: '山田', active: false },
];

// id=2 のユーザーを削除（非破壊的）
const withoutUser2 = users.filter(u => u.id !== 2);
console.log(withoutUser2.map(u => u.name)); // ['田中', '佐藤', '山田']

// 非アクティブなユーザーをすべて削除
const activeUsers = users.filter(u => u.active);
console.log(activeUsers.map(u => u.name)); // ['田中', '佐藤']

const tasks = [
  { id: 'a1', title: 'デザイン確認' },
  { id: 'b2', title: 'コードレビュー' },
  { id: 'c3', title: 'テスト実施' },
];

function removeTaskById(arr, id) {
  const index = arr.findIndex(t => t.id === id);
  if (index !== -1) arr.splice(index, 1);
}

removeTaskById(tasks, 'b2');
console.log(tasks.map(t => t.title));
// ['デザイン確認', 'テスト実施']

// 削除するインデックスを配列で指定
function removeAtIndexes(arr, indexes) {
  // 降順にソートしてから splice することでインデックスのずれを防ぐ
  const sorted = [...indexes].sort((a, b) => b - a);
  sorted.forEach(i => arr.splice(i, 1));
  return arr;
}

const nums = [10, 20, 30, 40, 50, 60];
removeAtIndexes(nums, [1, 3, 5]); // インデックス 1・3・5 を削除
console.log(nums); // [10, 30, 50]

const removeValues = (arr, ...values) => {
  const set = new Set(values);
  return arr.filter(x => !set.has(x));
};

const fruits = ['りんご', 'バナナ', 'ぶどう', 'みかん', 'バナナ'];
const result = removeValues(fruits, 'バナナ', 'ぶどう');
console.log(result); // ['りんご', 'みかん']

const nums = [1, 2, 3, 4, 5, 6, 7, 8];

// 先頭 2 件を除く
const withoutFirst2 = nums.slice(2);
console.log(withoutFirst2); // [3, 4, 5, 6, 7, 8]

// 末尾 3 件を除く
const withoutLast3 = nums.slice(0, -3);
console.log(withoutLast3); // [1, 2, 3, 4, 5]

// 先頭 1 件・末尾 1 件を除く（枠を外す）
const trimmed = nums.slice(1, -1);
console.log(trimmed); // [2, 3, 4, 5, 6, 7]

// 元の配列は変わらない
console.log(nums); // [1, 2, 3, 4, 5, 6, 7, 8]

let arr = [1, 2, 3, 4, 5];

// ① length を 0 にする（破壊的・高速）
arr.length = 0;
console.log(arr); // []

// ② splice で全削除（破壊的）
arr = [1, 2, 3, 4, 5];
arr.splice(0);
console.log(arr); // []

// ③ 空配列を再代入（非破壊的。元の参照は変わらない点に注意）
arr = [1, 2, 3, 4, 5];
const ref = arr;        // ref は同じ配列を参照
arr = [];               // arr は新しい空配列を指す
console.log(arr);       // []
console.log(ref);       // [1, 2, 3, 4, 5] ← ref は古い配列のまま