初心者向けに「インデックス付きコレクションって何？」「どう使うの？」をなるべくわかりやすく解説したものです。
1. インデックス付きコレクションとは？
「インデックス付き（indexed）」という言葉が指すのは、「数字（整数）で要素を順番に識別できるコレクション」という性質です。例えば、配列（Array）は “0, 1, 2, …” というインデックスで値を取り出したり操作したりできます。
MDN では、インデックス付きコレクションとして主に次のものが対象とされています：
- 普通の Array（配列）
- TypedArray（型付き配列） ※主に数値データを高速に扱う用途で使われる配列
- また、「配列っぽい（array-like）オブジェクト」もこの文脈で扱われます
配列っぽいオブジェクトというのは、要素へのアクセスにインデックスを使えたり、length プロパティを持っていたりするオブジェクトのことです（例：arguments オブジェクト、DOM の HTMLCollection や NodeList など）。
2. 配列（Array）の基本
作り方（生成方法）
配列をつくる方法はいくつかあります。主な方法は以下：
const arr1 = new Array(elem0, elem1, …, elemN);
const arr2 = Array(elem0, elem1, …, elemN);
const arr3 = [elem0, elem1, …, elemN];
この中で、一番シンプルでよく使われるのは 配列リテラル（[...]）です。
要素をまだ指定しないけれど長さだけ決めておきたいときには：
const arr = new Array(5); // 長さ 5 の配列（中身は空スロット）
ただし、この方法だと中身は「空スロット（empty slots）」となり、実際には要素として undefined が入っているわけではない点に注意です。
要素へのアクセス
arr[0]で最初の要素を取り出すarr[2] = "foo"のように代入して要素をセットarr.lengthで配列の長さを取得
もしインデックスとして範囲外の数値を指定すると、その要素は存在せず undefined が返ります。
長さとインデックスの関係
配列の length（長さ）と、要素番号（インデックス）は密接に関係しています。
- 配列における最大インデックスは
length - 1 - 有効なインデックス（0, 1, 2, …）が配列要素として認識される
- 逆に、整数以外のプロパティ名（例えば
arr["foo"] = 123）は “配列の要素” とは見なされず、通常のオブジェクトのプロパティ扱いになります。 - また、もし
arr[10] = "bar"のように、今の長さを超えるインデックスを設定すると、lengthがその +1 の値まで自動で拡張されます（ただし間のスロットは空になります）
メソッド（配列を操作する便利な関数たち）
配列は多数のビルトインメソッドを持っていて、それらを使って配列の変換や検索、操作ができます。代表的なメソッドをいくつか：
| メソッド | 役割 |
|---|---|
push(...) | 配列の末尾に要素を追加 |
pop() | 配列の末尾の要素を取り除いて返す |
shift() | 配列の先頭の要素を取り除いて返す |
unshift(...) | 配列の先頭に要素を追加 |
slice(start, end) | 指定範囲の要素を抽出して新しい配列を返す |
splice(start, deleteCount, …items) | 任意位置から要素を削除・挿入など |
map(fn) | 各要素に関数を適用して新しい配列を返す |
filter(fn) | 条件を満たす要素だけ抽出して新しい配列を返す |
reduce(fn, initial) | 各要素を順に「累積処理」して一つの値を返す |
forEach(fn) | 各要素を順に処理（返り値なし） |
includes(val) | 配列に val が含まれるか真偽値で返す |
indexOf(val) | 最初に出てくる val のインデックスを返す（なければ -1） |
これら以外にも sort(), reverse(), join(), entries(), keys(), values() など、多くのメソッドがあります。
また、配列は反復可能（iterable）なので、for...of やスプレッド構文（...arr）を使って要素を扱うこともできます。
3. Sparse Array（疎な配列）
「空スロット」がある配列を 疎（sparse）配列 と呼びます。例えば、
const arr = [];
arr[3] = "hello";
この時点で配列 arr は [ <3 empty slots>, "hello" ] のような形を持ちます。インデックス 0～2 は何も設定されておらず、スロットとして空いています。
空スロットは、forEach や map などの一部のメソッドではスキップされたり（未定義扱い）、単に undefined 扱いされたりすることがあります。
4. 多次元配列（配列の配列）
配列の要素としてさらに配列を持つことで、2 次元、3 次元といった“多次元配列”を実現できます。
const matrix = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
console.log(matrix[1][2]); // => 6（2 行目の 3 列目）
ただし JavaScript にはネイティブの「多次元配列型」はなく、単に配列の中に配列という構造を使っているだけです。
5. 配列っぽい（Array-like）オブジェクト
“配列っぽいオブジェクト” とは、以下のような特徴を持つオブジェクトのことを指します：
lengthプロパティを持っている- 添字（整数）でアクセス可能
forループなどで要素を扱える
代表例として、関数内部で使われる arguments オブジェクト（関数に渡された引数の集合）や、DOM メソッドで返される NodeList、HTMLCollection などがあります。
ただし、これらは Array.prototype のメソッド（map や filter など）はそのまま使えないことがあります。そのため、Array.from(...) やスプレッド構文（[...obj]）などを使って、普通の配列に変換して使うことがよくあります。
6. TypedArray（型付き配列）
TypedArray（型付き配列）は、主に「数値データをメモリ上で効率よく扱いたいとき」に使われる配列です。たとえば、Int8Array, Uint16Array, Float32Array といった型があり、各要素が特定の数値型（整数、浮動小数点など）で格納されます。
TypedArray は普通の配列と似たインターフェース（インデックスアクセス、length、ループ処理など）を持っていますが、以下のような特徴があります：
- 各要素に使われるメモリの型が固定されている
- メモリ使用量がコンパクト
- 生データ（バイナリデータ）とやりとりしやすい（ArrayBuffer との併用）
- 一部の配列メソッド（たとえば
mapやfilter）も使えますが、すべての通常の配列メソッドが使えるわけではありません
TypedArray を使う場面としては、WebGL、音声処理、バイナリデータ操作、画像処理などが挙げられます。
7. 使い分け・注意点まとめ
- 普段使いで複数の値を順序を保って扱いたいなら → 通常の配列（Array） を使う
- 数値データを効率よく扱いたいなら → TypedArray
- 関数の引数一覧
argumentsや DOM の要素集合など配列っぽいけど配列メソッドが使えないもの → 配列に変換して扱う（Array.from等） - 空スロット（疎配列）があると意図しない挙動になることがあるので注意
- 配列のプロパティ（整数インデックス以外の名前）と配列要素とでは扱いが異なる（後者が “配列要素” とみなされる）