JavaScriptでIDを指定してJSONオブジェクトの配列から要素を削除する方法

はじめに

JavaScriptでは、JSON形式のオブジェクトが格納された配列から、特定のIDに一致する要素を検索して削除したいケースがよくあります。例えば、以下のような映画情報を含むオブジェクトの配列を考えてみましょう。

const arr = [
    {id: "1", name: "Snatch", type: "crime"},
    {id: "2", name: "Witches of Eastwick", type: "comedy"},
    {id: "3", name: "X-Men", type: "action"},
    {id: "4", name: "Ordinary People", type: "drama"},
    {id: "5", name: "Billy Elliot", type: "drama"},
    {id: "6", name: "Toy Story", type: "children"}
];

ここで求められるのは、第1引数にこのような配列を受け取り、第2引数にID文字列を受け取るJavaScript関数です。関数はそのIDでオブジェクトを検索し、配列内に該当するオブジェクトが存在すれば、それを配列から取り除く必要があります。

実装のポイント

この処理を実現するには、Array.prototype.findIndex()メソッドで対象オブジェクトのインデックス位置を特定し、Array.prototype.splice()メソッドでその要素を削除するのが定石です。なお、IDは数値で渡される場合も考慮し、String()で文字列に変換して比較すると安全です。

サンプルコード

実際のコードは以下のようになります。

const arr = [
    {id: "1", name: "Snatch", type: "crime"},
    {id: "2", name: "Witches of Eastwick", type: "comedy"},
    {id: "3", name: "X-Men", type: "action"},
    {id: "4", name: "Ordinary People", type: "drama"},
    {id: "5", name: "Billy Elliot", type: "drama"},
    {id: "6", name: "Toy Story", type: "children"}
];
const removeById = (arr, id) => {
    const requiredIndex = arr.findIndex(el => {
        return el.id === String(id);
    });
    if(requiredIndex === -1){
        return false;
    };
    return !!arr.splice(requiredIndex, 1);
};
removeById(arr, 5);
console.log(arr);

コードの解説

• findIndex(): 各要素に対してコールバックを実行し、条件（el.id === String(id)）を満たす最初の要素のインデックスを返します。見つからない場合は -1 を返します。
• splice(requiredIndex, 1): 特定したインデックスの位置から1件だけ要素を削除し、元の配列を直接変更します。
• 戻り値: 対象が見つからなければ false を、正常に削除できれば true を返すため、呼び出し側で成否を判定できます。

実行結果

上記のコードを実行すると、コンソールには以下のように出力されます。

[
    { id: '1', name: 'Snatch', type: 'crime' },
    { id: '2', name: 'Witches of Eastwick', type: 'comedy' },
    { id: '3', name: 'X-Men', type: 'action' },
    { id: '4', name: 'Ordinary People', type: 'drama' },
    { id: '6', name: 'Toy Story', type: 'children' }
]

IDが「5」の「Billy Elliot」が配列から正しく削除されていることが確認できます。

補足：元の配列を変更したくない場合

splice()は元の配列を破壊的に変更します。元の配列を保持したい場合は、filter()メソッドを使って新しい配列を生成する方法も有効です。

const filteredArr = arr.filter(el => el.id !== String(5));

このように、用途に応じてsplice()とfilter()を使い分けることで、柔軟かつ安全に配列操作を行えます。