JavaScriptでインデックスを指定してネストされた配列から要素を削除する方法

はじめに

JavaScriptでは、オブジェクトが入れ子になった配列（ネストされた配列）を扱う場面がよくあります。本記事では、指定したインデックスのパスに従って、ネストされた配列から特定の要素を削除する方法を解説します。

例として、次のようなネストされたオブジェクト配列を考えてみましょう。

const arr = [
    { value: 'some value' },
    {
       array: [
          { value: 'some value' },
          {
            array: [
               { value: 'some value' },
               { value: 'some value' },
            ],
          },
          { value: 'some value' },
          {
            array: [
               { value: 'some value' },
               {
                 array: [
                   { value: 'delete me' },
                   { value: 'some value' },
                 ]
               },
            ],
          },
       ],
    }
];

実装したい処理の内容

ここで必要となるのは、次のようなJavaScript関数です。

• 第1引数：上記のようなネストされた配列
• 第2引数：削除対象の位置を示すインデックスの配列

この関数は、第2引数で指定されたインデックスのパスに沿って配列をたどり、該当する要素を削除した新しい配列を返します。元の配列を壊さずに処理できる点がポイントです。

コード例

実際のコードは以下の通りです。

const arr = [
    { value: 'some value' },
    {
       array: [
          { value: 'some value' },
          {
            array: [
               { value: 'some value' },
               { value: 'some value' },
            ],
          },
          { value: 'some value' },
          {
            array: [
               { value: 'some value' },
               {
                 array: [
                   { value: 'delete me' },
                   { value: 'some value' },
                 ]
               },
            ],
          },
       ],
    }
];
const keys = [1, 3, 1, 0];
const getKeys = (arr, keys) => {
    const recursiveFind = (arr, level) => {
      const res = [];
      arr.forEach((el, ind) => {
         if (keys[level] !== ind) {
            return res.push(el);
         };
         if (level + 1 !== keys.length && el.array) {
            res.push({ array: recursiveFind(el.array, level + 1) });
         };
      });
      return res;
    };
    return recursiveFind(arr, 0);
};
console.log(JSON.stringify(getKeys(arr, keys), undefined, 4));

コードの解説

このコードの仕組みを簡単に説明します。

• keys配列：[1, 3, 1, 0] は、最上位の配列の1番目 → その中の array の3番目 → さらにその中の1番目 → その中の0番目、という削除対象へのパスを表しています。
• recursiveFind関数：現在の階層（level）に対応するインデックスと一致する要素をスキップし、それ以外の要素を結果配列に格納します。
• 再帰処理：まだ最終階層に達しておらず、かつ要素が array プロパティを持つ場合は、その子配列に対して再帰的に同じ処理を適用します。
• 削除対象の要素は res に追加されないため、結果として配列から取り除かれます。

実行結果

コンソールには次のような出力が表示されます。

[
    {
        "value": "some value"
    },
    {
        "array": [
            {
                "value": "some value"
            },
            {
                "array": [
                    {
                        "value": "some value"
                    },
                    {
                        "value": "some value"
                    }
                ]
            },
            {
                "value": "some value"
            },
            {
                "array": [
                    {
                        "value": "some value"
                    },
                    {
                        "array": [
                            {
                                "value": "some value"
                            }
                        ]
                    }
                ]
            }
        ]
    }
]

出力を見ると、{ value: 'delete me' } だった要素が削除され、その親の array には { value: 'some value' } のみが残っていることが確認できます。

まとめ

このように、インデックスの配列と再帰処理を組み合わせることで、任意の深さにネストされた配列からでも柔軟に要素を削除できます。元のデータを変更せずに新しい配列を生成するため、イミュータブルなデータ操作が求められるReactなどの開発场景でも安心して使えるアプローチです。