JavaScript Indexed Collections 実践サンプル
「インデックス付きコレクション（Indexed collections）」の説明に対応した 初心者向けサンプルコード を順に紹介します。
ブラウザのコンソール（F12 → Console）や、Node.js でも試せます。
1. 配列（Array）の基本
▶️ 作成とアクセス
// 配列を作る3つの方法
const arr1 = new Array("りんご", "みかん", "ぶどう");
const arr2 = Array("A", "B", "C");
const arr3 = ["猫", "犬", "うさぎ"]; // 一番よく使う方法！
console.log(arr3[0]); // "猫"
console.log(arr3[2]); // "うさぎ"
console.log(arr3.length); // 3
▶️ 要素の追加と削除
const fruits = ["りんご", "みかん"];
fruits.push("ぶどう"); // 末尾に追加
fruits.unshift("バナナ"); // 先頭に追加
console.log(fruits); // ["バナナ", "りんご", "みかん", "ぶどう"]
fruits.pop(); // 最後を削除
fruits.shift(); // 最初を削除
console.log(fruits); // ["りんご", "みかん"]
2. 各要素をループで処理
const colors = ["赤", "青", "緑"];
for (let i = 0; i < colors.length; i++) {
console.log(i, colors[i]);
}
// よりモダンな方法
for (const color of colors) {
console.log("色:", color);
}
// 配列メソッドでもOK
colors.forEach((c, i) => console.log(`${i}: ${c}`));
3. 配列メソッドいろいろ
const nums = [1, 2, 3, 4, 5];
const doubled = nums.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8, 10]
const even = nums.filter(n => n % 2 === 0);
console.log(even); // [2, 4]
const sum = nums.reduce((total, n) => total + n, 0);
console.log(sum); // 15
console.log(nums.includes(3)); // true
console.log(nums.indexOf(4)); // 3
4. 疎な配列（空スロット）
const arr = [];
arr[3] = "hello";
console.log(arr.length); // 4
console.log(arr); // [ <3 empty items>, 'hello' ]
// forEach では空スロットはスキップされる
arr.forEach((v, i) => console.log(i, v));
// 出力: 3 'hello'
5. 多次元配列（配列の中に配列）
const matrix = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
console.log(matrix[0][2]); // 3
console.log(matrix[2][1]); // 8
6. 配列っぽいオブジェクトの例
function demo() {
console.log(arguments); // 配列のように見えるけど配列ではない！
// Array.from() で本当の配列に変換できる
const args = Array.from(arguments);
console.log(args.map(x => x * 2)); // [2, 4, 6]
}
demo(1, 2, 3);
7. TypedArray（型付き配列）
// 8ビット符号なし整数の配列（0〜255）
const typed = new Uint8Array([10, 20, 30]);
console.log(typed[1]); // 20
typed[2] = 255;
console.log(typed); // Uint8Array(3) [10, 20, 255]
// map や for...of も使える
for (const v of typed) {
console.log(v);
}
まとめ（ざっくり復習）
| 種類 | 説明 | よく使う場面 |
|---|---|---|
Array | 通常の配列 | 一般的なデータ処理・順序付きリスト |
TypedArray | 高速な数値配列 | WebGL、音声、画像などバイナリ処理 |
| 配列っぽいオブジェクト | lengthとインデックスを持つけど配列ではない | arguments, NodeList など（Array.from()で変換） |
練習のポイント
map,filter,reduceはよく出るので慣れておく- 配列の「空スロット」と
undefinedは別物（ちょっと罠！） - どんなオブジェクトでも「配列っぽく」できる →
Array.from() - メモリ効率を気にする場面では TypedArray