JavaScript配列の削除方法 - splice/filter/popの使い分け

みなさん、JavaScript配列の削除で悩んだことはありませんか？

「splice、filter、pop...たくさんあってどれを使えばいいの？」 「元の配列を変更したくない場合はどうすればいい？」

こんな疑問を持っている方、多いですよね。

この記事では、JavaScript配列の削除方法を初心者向けにわかりやすく解説します。 各メソッドの特徴と使い分けを理解すれば、適切な方法を選べるようになります。

それでは、一緒に配列の削除をマスターしていきましょう！

配列削除方法の全体像

JavaScript配列の削除は、大きく2つのパターンに分かれます。

簡単に言うと「元の配列を変更するか、新しい配列を作るか」という違いです。 この違いを理解すれば、どの方法を使うべきかがわかります。

削除方法の分類

まず、全体像を把握しましょう。

• 元の配列を変更する方法: splice、pop、shift、delete
• 新しい配列を作る方法: filter、slice
• 削除する位置: 最初、最後、特定の位置
• 削除する条件: 特定の値、複雑な条件

どの方法も使い道があるので、順番に見ていきましょう。

pop() - 最後の要素を削除

基本的な使い方

pop()は配列の最後の要素を削除する方法です。 削除した要素を戻り値として受け取れます。

const fruits = ["りんご", "バナナ", "オレンジ", "ぶどう"];

// 最後の要素を削除
const removedFruit = fruits.pop();

console.log(removedFruit);  // "ぶどう"
console.log(fruits);        // ["りんご", "バナナ", "オレンジ"]

注意点は、元の配列が変更されることです。 元の配列を残したい場合は、別の方法を使いましょう。

実用的な使用例

実際のプログラムでは、こんな風に使います。

// タスク管理システムの例
const taskStack = ["タスク1", "タスク2", "タスク3"];

function processTask() {
    if (taskStack.length > 0) {
        const currentTask = taskStack.pop();
        console.log(`処理中: ${currentTask}`);
        return currentTask;
    } else {
        console.log("処理するタスクがありません");
        return null;
    }
}

processTask();  // "処理中: タスク3"
processTask();  // "処理中: タスク2"
console.log(taskStack);  // ["タスク1"]

配列が空の場合も安全に処理できます。

const emptyArray = [];
const result = emptyArray.pop();
console.log(result);     // undefined
console.log(emptyArray); // []

pop()は空の配列に対してもエラーになりません。 undefinedが返されるだけです。

shift() - 最初の要素を削除

基本的な使い方

shift()は配列の最初の要素を削除します。 pop()とは逆の動作をするメソッドです。

const numbers = [1, 2, 3, 4, 5];

// 最初の要素を削除
const removedNumber = numbers.shift();

console.log(removedNumber);  // 1
console.log(numbers);        // [2, 3, 4, 5]

こちらも元の配列が変更されるので注意してください。

実用的な使用例

shift()は順番に処理したい場合によく使われます。

// 順番待ちの管理
const queue = ["お客様A", "お客様B", "お客様C"];

function serveCustomer() {
    if (queue.length > 0) {
        const nextCustomer = queue.shift();
        console.log(`対応中: ${nextCustomer}`);
        return nextCustomer;
    } else {
        console.log("待機中のお客様はいません");
        return null;
    }
}

serveCustomer();  // "対応中: お客様A"
serveCustomer();  // "対応中: お客様B"
console.log(queue);  // ["お客様C"]

複数の要素を順番に処理することもできます。

const messages = ["メッセージ1", "メッセージ2", "メッセージ3"];

while (messages.length > 0) {
    const message = messages.shift();
    console.log(`処理: ${message}`);
}
// 処理: メッセージ1
// 処理: メッセージ2
// 処理: メッセージ3

これで全ての要素を順番に処理できました。

splice() - 特定位置の削除と挿入

基本的な使い方

splice()は最も柔軟な削除方法で、特定の位置から指定した数の要素を削除できます。

const colors = ["赤", "青", "緑", "黄", "紫"];

// splice(開始位置, 削除する個数)
const removed = colors.splice(1, 2);  // インデックス1から2個削除

console.log(removed);  // ["青", "緑"]
console.log(colors);   // ["赤", "黄", "紫"]

spliceは削除だけでなく、同時に要素を追加することもできます。

様々な削除パターン

// 1つの要素を削除
const animals = ["犬", "猫", "鳥", "魚"];
animals.splice(2, 1);  // インデックス2の要素を1個削除
console.log(animals);  // ["犬", "猫", "魚"]

// 複数の要素を削除
const fruits = ["りんご", "バナナ", "オレンジ", "ぶどう", "メロン"];
fruits.splice(1, 3);   // インデックス1から3個削除
console.log(fruits);   // ["りんご", "メロン"]

// 最後の要素を削除（popと同じ効果）
const numbers = [1, 2, 3, 4, 5];
numbers.splice(-1, 1); // 最後の要素を削除
console.log(numbers);  // [1, 2, 3, 4]

削除と同時に要素を追加

const cities = ["東京", "大阪", "名古屋", "福岡"];

// 削除と同時に新しい要素を追加
cities.splice(1, 2, "横浜", "神戸", "京都");

console.log(cities);  // ["東京", "横浜", "神戸", "京都", "福岡"]

この機能により、配列の一部を別の要素で置き換えることが簡単にできます。

filter() - 条件に基づく削除（新配列作成）

基本的な使い方

filter()は条件に一致しない要素を削除した新しい配列を作成します。

元の配列は変更されません。

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// 偶数のみを残す（奇数を削除）
const evenNumbers = numbers.filter(num => num % 2 === 0);

console.log(evenNumbers);  // [2, 4, 6, 8, 10]
console.log(numbers);      // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] (元配列は変更されない)

これは、データの安全性を保ちたい場合にとても重要です。

様々な条件での削除

// 特定の値を削除
const fruits = ["りんご", "バナナ", "オレンジ", "バナナ", "ぶどう"];
const withoutBanana = fruits.filter(fruit => fruit !== "バナナ");
console.log(withoutBanana);  // ["りんご", "オレンジ", "ぶどう"]

// 空文字や無効な値を削除
const userInputs = ["田中", "", "佐藤", null, "鈴木", undefined, "高橋"];
const validInputs = userInputs.filter(input => input && input.trim() !== "");
console.log(validInputs);  // ["田中", "佐藤", "鈴木", "高橋"]

このように、複雑な条件でも柔軟に対応できます。

実践的な例：商品フィルタリング

const products = [
    {name: "商品A", price: 1000, inStock: true},
    {name: "商品B", price: 500, inStock: false},
    {name: "商品C", price: 1500, inStock: true},
    {name: "商品D", price: 300, inStock: false}
];

// 在庫切れの商品を削除
const availableProducts = products.filter(product => product.inStock);
console.log(availableProducts);

// 価格が1000円以上の商品のみを残す
const expensiveProducts = products.filter(product => product.price >= 1000);
console.log(expensiveProducts);

Eコマースサイトでの商品フィルタリングなど、実際の開発でよく使われるパターンです。

slice() - 部分配列の作成

基本的な使い方

slice()は指定した範囲以外を削除した新しい配列を作成します。

const animals = ["犬", "猫", "鳥", "魚", "うさぎ"];

// slice(開始位置, 終了位置) - 終了位置は含まない
const selectedAnimals = animals.slice(1, 4);

console.log(selectedAnimals);  // ["猫", "鳥", "魚"]
console.log(animals);          // ["犬", "猫", "鳥", "魚", "うさぎ"] (元配列は変更されない)

様々な範囲指定

const numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

// 最初の3つを残す
const first3 = numbers.slice(0, 3);
console.log(first3);  // [0, 1, 2]

// 最後の3つを残す
const last3 = numbers.slice(-3);
console.log(last3);   // [7, 8, 9]

// 中間部分を残す
const middle = numbers.slice(3, 7);
console.log(middle);  // [3, 4, 5, 6]

ページネーションや部分的なデータ表示に便利です。

各メソッドの使い分け

判断基準

どの方法を使うべきかは、以下の基準で判断しましょう。

以下の場面に応じて選択してください。

• 最後の要素を削除: pop()
• 最初の要素を削除: shift()
• 特定位置の要素を削除: splice()
• 条件に合う要素を削除: filter()
• 範囲を指定して残す: slice()

実践的な使い分け例

// ショッピングカートから商品を削除
const cart = [
    {id: 1, name: "商品A", price: 1000},
    {id: 2, name: "商品B", price: 1500},
    {id: 3, name: "商品C", price: 800}
];

// 特定のIDの商品を削除（元の配列は変更したくない）
function removeFromCart(cartItems, productId) {
    return cartItems.filter(item => item.id !== productId);
}

const updatedCart = removeFromCart(cart, 2);
console.log("更新後のカート:", updatedCart);

このように、データの安全性を重視する場合はfilter()が適しています。

// 最近のアクティビティから古いものを削除
const activities = ["ログイン", "商品閲覧", "購入", "レビュー投稿"];

// 最初のアクティビティを削除（元の配列を変更してもOK）
activities.shift();
console.log("最新のアクティビティ:", activities);

パフォーマンスを重視し、元の配列を変更しても問題ない場合はshift()やpop()を使用します。

実用的な削除パターン

重複削除の実装

// 重複要素を削除する方法
const arrayWithDuplicates = [1, 2, 2, 3, 4, 4, 5, 1];

// 方法1: filterとindexOfを使用
const unique1 = arrayWithDuplicates.filter((item, index) => 
    arrayWithDuplicates.indexOf(item) === index
);

// 方法2: Setを使用（ES6以降）
const unique2 = [...new Set(arrayWithDuplicates)];

console.log("方法1:", unique1);  // [1, 2, 3, 4, 5]
console.log("方法2:", unique2);  // [1, 2, 3, 4, 5]

安全な削除処理

// エラー処理を含む安全な削除
function safeRemoveByIndex(array, index) {
    // 入力値の検証
    if (!Array.isArray(array)) {
        throw new Error("第1引数は配列である必要があります");
    }
    
    if (typeof index !== "number" || index < 0 || index >= array.length) {
        throw new Error("無効なインデックスです");
    }
    
    // 元の配列を変更せずに新しい配列を作成
    return array.filter((_, i) => i !== index);
}

// 使用例
try {
    const numbers = [1, 2, 3, 4, 5];
    const result = safeRemoveByIndex(numbers, 2);
    
    console.log("削除結果:", result);     // [1, 2, 4, 5]
    console.log("元の配列:", numbers);   // [1, 2, 3, 4, 5] (変更されない)
} catch (error) {
    console.error("エラー:", error.message);
}

このように、エラー処理を含めることで、より安全なコードが書けます。

まとめ

JavaScript配列の削除には、用途に応じた最適な方法があります。

各メソッドの特徴：

• pop(): 最後の要素を削除、元配列を変更
• shift(): 最初の要素を削除、元配列を変更
• splice(): 特定位置を削除・挿入、元配列を変更
• filter(): 条件による削除、新配列を作成
• slice(): 範囲指定で残す、新配列を作成

選択のポイント：

• データの安全性を重視する場合はfilter()やslice()
• パフォーマンスを重視する場合はpop()やshift()
• 柔軟な操作が必要な場合はsplice()

特に、filter()は汎用性が高く、複雑な条件での削除に適しているため、現代のJavaScript開発でとてもよく使われています。

まずは基本的なpop()、shift()から始めて、徐々にfilter()やsplice()などの高度な方法をマスターしていきましょう。

ぜひ今日から、これらの知識を活用して効率的な配列操作を始めてみませんか？