初心者向け：配列の基本
配列は「同じ種類の値を順番に並べて管理するための箱の列」です。1つの変数でたくさんの値を扱えるようになります。
配列の作り方と中身の取り出し
- 作成:
const colors = ["red", "green", "blue"];
const empty = []; // 空の配列
- インデックス（場所）:
console.log(colors[0]); // "red"
console.log(colors[2]); // "blue"
- 長さ（要素数）:
console.log(colors.length); // 3
- 要素の更新:
colors[1] = "yellow"; // ["red","yellow","blue"]
追加・削除の基本操作
- 末尾に追加（push）:
const nums = [1, 2];
nums.push(3); // [1,2,3]
- 末尾を削除（pop）:
nums.pop(); // [1,2]
- 先頭に追加（unshift）:
nums.unshift(0); // [0,1,2]
- 先頭を削除（shift）:
nums.shift(); // [1,2]
部分取得と挿入・削除
- 部分を取り出す（slice：非破壊）:
const arr = ["a","b","c","d"];
console.log(arr.slice(1, 3)); // ["b","c"]（元はそのまま）
- 挿入・削除（splice：破壊）:
const items = ["x","y","z"];
items.splice(1, 1, "Y"); // 1番目を1個削除して"Y"を挿入 → ["x","Y","z"]
探す・判定する
- 含まれているか（includes）:
["red","green"].includes("green"); // true
- 位置を探す（indexOf）:
["a","b","a"].indexOf("a"); // 0（見つからなければ -1）
- 条件に合う最初の1件（find）:
const users = [{id:1},{id:2}];
users.find(u => u.id === 2); // {id:2}
並び替え・結合・文字列化
- 並べ替え（sort：破壊）:
const nums = [10, 2, 5];
nums.sort((a, b) => a - b); // [2,5,10]（数値は比較関数必須）
- 結合（join）:
["a","b","c"].join(" | "); // "a | b | c"
繰り返し処理（ループ）
- for…of（要素を1つずつ）:
for (const v of ["a","b"]) {
console.log(v);
}
- forEach（副作用向け）:
["a","b"].forEach((v, i) => console.log(i, v));
- map（配列を変換）:
[1,2,3].map(x => x * 2); // [2,4,6]
- filter（条件で絞る）:
[1,2,3,4].filter(x => x % 2 === 0); // [2,4]
- reduce（畳み込み）:
[1,2,3].reduce((sum, x) => sum + x, 0); // 6
参照型の性質とコピー
- 同じ配列を参照する:
const a = [1,2];
const b = a; // bはaと同じ配列を参照
b.push(3);
console.log(a); // [1,2,3]（aも変わる）
- 浅いコピー（新しい配列にする）:
const src = [1,2,3];
const copy = [...src]; // スプレッド
// または src.slice()
- 注意: 浅いコピーは中のオブジェクトまではコピーしない。深いコピーが必要なら構造化クローンやライブラリを検討。
配列を作る他の方法
- Array.from（配列風や反復可能から作成）:
Array.from("abc"); // ["a","b","c"]
- new Array と fill:
new Array(3).fill(0); // [0,0,0]
よくあるつまずき
- sortが文字列比較になる: 比較関数を渡さないと
"10" < "2"のような並びになる。数値は(a,b)=>a-bを使う。 - spliceとsliceの混同: sliceは「取り出し（非破壊）」、spliceは「編集（破壊）」。
- 参照共有で意図せず変更: スプレッドでコピーしてから渡す。
- undefinedの穴: インデックスを飛ばして代入すると空要素ができる。
pushを使うのが安全。
ミニ練習
- 問1: 配列に「orange」を末尾追加して、長さを表示せよ。
const fruits = ["apple","banana"];
fruits.push("orange");
console.log(fruits.length); // 3
- 問2: 配列から偶数だけ取り出せ。
const nums = [1,2,3,4,5,6];
const evens = nums.filter(n => n % 2 === 0);
console.log(evens); // [2,4,6]
- 問3: 「a,b,c」を「A | B | C」に変換せよ。
const s = ["a","b","c"].map(x => x.toUpperCase()).join(" | ");
console.log(s); // "A | B | C"
- 問4: 3つの配列を結合して1つにせよ。
const a = [1], b = [2], c = [3];
const all = [...a, ...b, ...c];
console.log(all); // [1,2,3]
まとめ
- 配列は順序つきの値の集まり。
- 追加・削除は push/pop/shift/unshift、部分取得は slice、編集は splice。
- 探索・変換は includes/indexOf/find、map/filter/reduce が基本セット。
- 参照型ゆえの共有に注意。コピーはスプレッドや slice を使う。
この基礎を押さえれば、リスト表示、検索、集計など日常的な処理がスムーズに書けます。次は「オブジェクト配列の操作（ソート、グループ化）」にも挑戦してみましょう。