配列とは何か
配列は「値を順番に並べて、ひとまとめに扱うための箱」です。1つの変数に複数の値を入れて、後から順番や番号（インデックス）で取り出せます。ここが重要です：JavaScript の配列は“どんな型でも混在可能”で、“長さは後から伸び縮みする”柔らかい構造です。数字、文字列、オブジェクト、さらには配列の中に配列を入れることもできます。
配列の作り方と基本操作
生成と中身の確認
const empty = []; // 空の配列
const nums = [10, 20, 30]; // 数値の配列
const mixed = [1, "A", true, { id: 1 }]; // 型は混在してOK
console.log(nums); // [10, 20, 30]
console.log(nums.length); // 3（要素数）
ここが重要です：配列リテラル [] が最短で安全。length は“要素数”で、操作の基準になります。
インデックス（番号）で取り出す
const colors = ["red", "green", "blue"];
console.log(colors[0]); // "red"（先頭は 0）
console.log(colors[2]); // "blue"
console.log(colors[99]); // undefined（範囲外）
ここが重要です：先頭は 0。範囲外はエラーではなく undefined が返ります。“値が無い”と“空文字や 0”の違いに注意しましょう。
追加・削除・末尾操作
const a = [1, 2];
// 末尾へ追加・取得
a.push(3); // a = [1, 2, 3]
const last = a.pop(); // 3 を取り出し a = [1, 2]
// 先頭へ追加・取得（全体がズレるのでコスト高）
a.unshift(0); // a = [0, 1, 2]
const first = a.shift();// 0 を取り出し a = [1, 2]
ここが重要です：push/pop は“末尾”の高速操作。unshift/shift は“先頭”に触るため、要素が多いと遅くなりがちです。
任意位置への挿入・削除（splice）
const b = ["A", "B", "C", "D"];
b.splice(1, 2, "X", "Y"); // 1番目から2件削除して "X","Y" を挿入
console.log(b); // ["A", "X", "Y", "D"]
ここが重要です：splice は“配列を書き換える”多機能ツール。第一引数=開始位置、第二引数=削除数、以降=挿入する値です。
配列のループ（要素を順番に処理する）
もっとも基本の for
const arr = [10, 20, 30];
for (let i = 0; i < arr.length; i++) {
console.log(i, arr[i]);
}
ここが重要です：インデックスが必要な処理（位置つきの加工）に適しています。length は毎回読むより一度変数へ保存すると高速化できます。
値を簡単に取り出す for…of
for (const v of arr) {
console.log(v);
}
ここが重要です：“値だけ”が欲しいときの最短ループ。読みやすく、エラーも減ります。
コールバックで書く forEach
arr.forEach((v, i) => {
console.log(i, v);
});
ここが重要です：forEach は“副作用”（出力や合計）向き。新しい配列を作るなら map/filter を使うほうが意図が伝わります。
よく使うメソッド（「配列を返す」系は安全で読みやすい）
map（全要素を変換して新配列）
const celsius = [0, 20, 30];
const fahrenheit = celsius.map(c => c * 9/5 + 32);
console.log(fahrenheit); // [32, 68, 86]
ここが重要です：map は“元を壊さない”。一貫して新配列を返すので、バグが減ります。
filter（条件に合うものだけ残す）
const scores = [65, 80, 92, 50];
const passed = scores.filter(s => s >= 70);
console.log(passed); // [80, 92]
ここが重要です：条件を明確に書けるため、“抽出”に最適です。
find（最初の1件を取得）
const users = [{id:1},{id:2},{id:3}];
const u = users.find(x => x.id === 2);
console.log(u); // {id:2}（無ければ undefined）
ここが重要です：“1件だけ”が欲しいなら find。全件は filter。
some / every（条件の成立確認）
const nums = [1, 2, 3];
console.log(nums.some(n => n > 2)); // true（どれかが満たす）
console.log(nums.every(n => n > 0)); // true（全てが満たす）
ここが重要です：判定だけ欲しいときに高速で読みやすい選択肢です。
reduce（累積して1つの値へ）
const sum = [1, 2, 3].reduce((acc, v) => acc + v, 0);
console.log(sum); // 6
ここが重要です：合計や集計、オブジェクト生成まで“たたんで1つ”にしたいときに使います。初期値（第二引数）を忘れないこと。
多次元配列とオブジェクト配列
配列の中に配列（2次元）
const grid = [
[1, 2, 3],
[4, 5, 6]
];
console.log(grid[1][2]); // 6（1行目の2列目）
ここが重要です：二重のインデックスでアクセス。行列や表の表現に向いています。
オブジェクトの配列（現実的なデータ構造）
const products = [
{ id: 1, name: "Pen", price: 120 },
{ id: 2, name: "Notebook", price: 300 }
];
const names = products.map(p => p.name); // ["Pen","Notebook"]
const expensive = products.filter(p => p.price >= 200); // 価格抽出
const byId = id => products.find(p => p.id === id); // 検索関数
ここが重要です：現場では“オブジェクト配列”が主流。map/filter/find を組み合わせると、読みやすく壊れにくいコードになります。
典型パターンと落とし穴
参照の共有に注意（コピーと破壊的操作）
const a = [1,2,3];
const b = a; // 同じ配列を参照（共有）
b.push(4);
console.log(a); // [1,2,3,4]（a も変わる）
const c = a.slice(); // 浅いコピー（新しい配列）
c.push(5);
console.log(a, c); // a=[1,2,3,4], c=[1,2,3,4,5]
ここが重要です：a と b は“同じもの”。独立させたいなら slice() やスプレッド構文（[…a]）で浅いコピーを作ります。ネストオブジェクトは“深いコピー”が必要な点に注意。
ソートと比較関数
const nums = [10, 2, 5];
nums.sort((x, y) => x - y); // 数値昇順
console.log(nums); // [2, 5, 10]
ここが重要です：sort は“文字列として”比べるのが既定。数値なら比較関数（x – y）を必ず書くと意図通りになります。sort は元配列を書き換えるため、必要ならコピーしてから行います。
文字列と配列の往復（split / join）
const s = "a,b,c";
const arr = s.split(","); // ["a","b","c"]
const back = arr.join("-"); // "a-b-c"
ここが重要です：テキストの扱いで配列が便利。区切り文字を意識して往復できます。
まとめ
配列は「値を順番に並べる箱」で、インデックスで取り出し、length を基準に扱います。追加・削除は push/pop（末尾が高速）、任意位置は splice。ループは for…of が簡潔、変換や抽出は map/filter/find が安全で読みやすい選択です。現場ではオブジェクト配列が定番で、コピーのつもりが参照共有になる落とし穴に注意。sort の比較関数、split/join などの基本を押さえれば、初心者でも配列を直感的に使いこなせます。