はじめに：Map.prototype.delete が配列ライクなオブジェクトで役立つ理由
JavaScript の `Map` オブジェクトは、キーと値のペアを格納するためのコレクションですが、`Map.prototype.delete()` メソッドは、直接的には配列ライクなオブジェクト（配列や `arguments` オブジェクトなど）の要素を削除する機能を持っていません。しかし、配列ライクなオブジェクトを `Map` のキーとして扱うことで、その `delete()` メソッドを活用し、効率的に要素を削除するテクニックが存在します。
このテクニックは、特に以下のような課題を解決するのに役立ちます。
- 配列から特定の要素を削除したいが、`splice()` のようなインデックスベースの操作では管理が煩雑になる場合。
- オブジェクトをキーとして、それに対応する値を管理したい場合。
基礎知識：Map オブジェクトと配列ライクなオブジェクト
Map オブジェクトとは
`Map` オブジェクトは、任意の型の値をキーとして使用できるコレクションです。従来のオブジェクト (`{}`) ではキーは文字列またはシンボルに限られていましたが、`Map` ではオブジェクトや配列などもキーとして利用できます。
`Map` の主なメソッドには以下のようなものがあります。
- `set(key, value)`: 要素を追加または更新します。
- `get(key)`: 指定したキーに対応する値を取得します。
- `has(key)`: 指定したキーが存在するかどうかを返します。
- `delete(key)`: 指定したキーとその値のペアを削除します。
- `clear()`: `Map` オブジェクト内のすべての要素を削除します。
配列ライクなオブジェクトとは
配列ライクなオブジェクトとは、`length` プロパティを持ち、インデックス（0から始まる数値）で要素にアクセスできるオブジェクトのことです。代表的なものに、通常の配列 (`[]`) や、関数の引数を受け取る際に生成される `arguments` オブジェクトなどがあります。
これらのオブジェクトは、配列のメソッド（`push`, `pop`, `splice` など）を直接持っていませんが、インデックスアクセスや `length` プロパティによるループ処理は可能です。
実装/解決策：Map を使って配列ライクなオブジェクトの要素を削除する
配列ライクなオブジェクトを `Map` のキーとして登録し、その `Map` に対して `delete()` メソッドを使用することで、実質的に配列ライクなオブジェクトの要素を削除したかのように振る舞わせることができます。
具体的な手順は以下の通りです。
1. 配列ライクなオブジェクトを Map のキーとして登録する:
削除したい要素（配列ライクなオブジェクト自体）をキー、その要素に関連付けたい値（例えば、削除フラグや削除後の状態など）を値として `Map` に `set()` します。
2. Map.prototype.delete() を使用する:
削除したい配列ライクなオブジェクトをキーとして指定し、`Map` の `delete()` メソッドを呼び出します。これにより、`Map` からそのキーと値のペアが削除されます。
この方法の利点は、`Map` の `delete()` メソッドがキーの比較に厳密な等価性（SameValueZero 比較）を用いるため、オブジェクトの参照が一致すれば確実に削除できる点です。
サンプルプログラム
ここでは、配列を `Map` のキーとして扱い、`delete()` メソッドで削除する例を示します。
// Map オブジェクトを作成
const myMap = new Map();
// 削除したい配列ライクなオブジェクト（ここでは通常の配列）
const array1 = [1, 2, 3];
const array2 = [‘a’, ‘b’, ‘c’];
const array3 = [true, false];
// Map に配列をキーとして登録
// 値は削除フラグとして ‘deleted’ を設定
myMap.set(array1, ‘deleted’);
myMap.set(array2, ‘deleted’);
myMap.set(array3, ‘deleted’);
console.log(‘— 初期状態 —‘);
console.log(‘Map のサイズ:’, myMap.size); // Map のサイズ: 3
console.log(‘array1 は Map に存在するか:’, myMap.has(array1)); // array1 は Map に存在するか: true
// — array1 を Map から削除 —
// Map.prototype.delete() メソッドを使用
const isDeleted = myMap.delete(array1);
console.log(‘\n— array1 を削除後 —‘);
console.log(‘削除操作の結果:’, isDeleted); // 削除操作の結果: true (削除に成功した場合)
console.log(‘Map のサイズ:’, myMap.size); // Map のサイズ: 2
console.log(‘array1 は Map に存在するか:’, myMap.has(array1)); // array1 は Map に存在するか: false
console.log(‘array2 は Map に存在するか:’, myMap.has(array2)); // array2 は Map に存在するか: true
// — 存在しない配列を削除しようとした場合 —
const nonExistentArray = [9, 8, 7];
const isDeletedNonExistent = myMap.delete(nonExistentArray);
console.log(‘\n— 存在しない配列を削除しようとした後 —‘);
console.log(‘削除操作の結果:’, isDeletedNonExistent); // 削除操作の結果: false (削除対象が存在しないため)
console.log(‘Map のサイズ:’, myMap.size); // Map のサイズ: 2
// — arguments オブジェクトをキーとして扱う例 —
function demonstrateArguments() {
// arguments オブジェクトは配列ライクなオブジェクト
const argsMap = new Map();
argsMap.set(arguments, ‘original arguments’);
console.log(‘\n— arguments オブジェクトの登録 —‘);
console.log(‘arguments が Map に存在するか:’, argsMap.has(arguments)); // arguments が Map に存在するか: true
// arguments オブジェクト自体を Map から削除
// 注意: 関数の実行コンテキスト内でしか arguments は参照できません
const deletedArgs = argsMap.delete(arguments);
console.log(‘arguments を削除したか:’, deletedArgs); // arguments を削除したか: true
console.log(‘arguments が Map に存在するか:’, argsMap.has(arguments)); // arguments が Map に存在するか: false
}
// demonstrateArguments 関数を実行して arguments オブジェクトの例を確認
demonstrateArguments(‘first’, ‘second’);
このコードでは、`array1`, `array2`, `array3` という3つの配列を `Map` のキーとして登録しています。`myMap.delete(array1)` を実行することで、`Map` から `array1` に対応するエントリが削除されます。`delete()` メソッドは、削除が成功した場合は `true` を、削除対象が存在しなかった場合は `false` を返します。
また、`arguments` オブジェクトをキーとして登録し、削除する例も示しています。
応用・注意点
Map のキーとしてオブジェクトを使用する際の注意点
`Map` はキーの比較に SameValueZero 比較を使用します。これは、オブジェクトの場合、参照が完全に一致する場合のみ「同じキー」とみなされることを意味します。したがって、以下のようなコードは意図した通りに動作しない可能性があります。
const map = new Map();
const obj1 = { id: 1 };
const obj2 = { id: 1 }; // obj1 とは異なる参照
map.set(obj1, ‘value for obj1’);
console.log(map.has(obj1)); // true
console.log(map.has(obj2)); // false (obj2 は obj1 と参照が異なるため)
// delete も同様に、参照が一致しないと削除できない
map.delete(obj2); // 何も削除されない
配列ライクなオブジェクトを `Map` のキーとして使用する場合も、同じ配列インスタンス（参照）をキーとして指定しないと、`delete()` メソッドで削除できません。
配列ライクなオブジェクトを「管理」するための Map
この `Map.prototype.delete` を配列ライクなオブジェクトと組み合わせて使うシナリオは、配列そのものを直接操作するのではなく、配列（または配列ライクなオブジェクト）を識別子として、それに関連するメタデータや状態を管理したい場合に特に有効です。
例えば、あるコンポーネントが管理する複数の DOM 要素（これらは配列ライクな `NodeList` として取得されることがあります）に対して、それぞれ異なる状態を持たせたい場合などに、`NodeList` の各要素をキーとして `Map` に状態を格納し、不要になった要素の状態を `delete()` で削除する、といった使い方が考えられます。
`splice()` のようなインデックス操作では、要素の追加・削除によってインデックスが変動し、管理が複雑になりがちですが、`Map` を介することで、オブジェクトの参照を直接キーとして扱えるため、より堅牢な管理が可能になります。