目次
はじめに
配列は「複数の値を1つにまとめる」ための基本データ構造です。
この記事では、配列の作り方・要素の取り出し方・よく使うループやメソッドを、最新の書き方（const/let、アロー関数、for..of、スプレッド構文など）でわかりやすく解説します。
実務でよくある落とし穴やベストプラクティスも交えて紹介します。
1. 配列とは？（簡単なイメージ）
配列とは、複数のデータを1つにまとめて管理できる「入れ物」のようなものです。
たとえば、ひとつの変数に1つの値しか入れられないと、データが増えるたびに変数を増やす必要があり、コードが煩雑になります。
let user1 = "Taro";
let user2 = "Hanako";
let user3 = "Ken";
このように書くと、ユーザーが増えるたびにuser4、user5…と増やさなければいけません。
ですが、配列を使えばこれを 1つの変数でスッキリ まとめることができます。
let users = ["Taro", "Hanako", "Ken"];
このように、角かっこ [] の中にデータをカンマで区切って並べるだけで、複数の値をひとまとめにできるのが配列の魅力です。
💡 なぜ配列を使うのか？（その他の理由）
- データの管理がラクになる
→ 例えば「商品一覧」や「スコア表」など、同じ種類のデータをまとめて扱える。 - ループ（繰り返し処理）と相性がいい
→forやforEach()と組み合わせることで、「全員の名前を表示する」などの処理が簡単に書けます。
2. 配列の作り方（モダンな書き方）
// リテラル（最も一般的）
const fruits = ["りんご", "バナナ", "みかん"];
// Array コンストラクタ（あまり一般的ではない）
const nums = new Array(1, 2, 3);
// 空配列を作って後で追加
const colors = [];
colors.push("赤");関係ないけど一言：個人的に「モダン」という言葉が好きじゃないんだけど、現代風とか今風とかそんな言い方じゃダメなのかね？
ポイント
- 可能な限り
constを使う（参照自体は変わらないが中身は変更できる）。 new Array(n)は用途に注意（引数が1つのとき、長さだけを指定する挙動になる）。
3. インデックスと要素の参照
- 配列のインデックスは 0から始まる（最初の要素は
arr[0]）。 - この配列には3つの要素が入っています。
それぞれの位置（インデックス番号）は、先頭から順に「0」「1」「2」です。
const names = ["太郎", "花子", "次郎"];
console.log(names[0]); // "太郎"
console.log(names[names.length - 1]); // 最後の要素（"次郎"）
4. 要素の代入・更新
const pets = ["ねこ", "いぬ"];
pets[1] = "うさぎ"; // いぬ → うさぎ に更新
pets[3] = "ハムスター"; // 存在しないインデックスに代入すると間に空要素ができる
console.log(pets); // ["ねこ", "うさぎ", <1 empty item>, "ハムスター"]
- 空のスロット（
<empty>）に注意。forEachなどは空スロットをスキップします。
5. 配列の要素数（length）
const arr = ["A", "B", "C"];
console.log(arr.length); // 3
lengthは配列の「最大インデックス + 1」- 間に空スロットがあると見た目と異なる挙動になることがあります。
6. 配列のループ（安全で推奨される書き方）
6-1. 基本的な for（インデックスを使いたいとき）
注意点：条件は i < arr.length（<= は要素外参照になる）
const items = ["黒", "白", "灰色"];
for (let i = 0; i < items.length; i++) {
console.log(i, items[i]);
}
6-2. for..of（値だけ取り出したいとき、最も読みやすい）
for (const color of items) {
console.log(color);
}
6-3. forEach（コールバックで処理）
items.forEach((value, index) => {
console.log(index, value);
});
- 注意：
forEachのコールバックはasync/awaitと相性が悪く、awaitを使う場合はfor..ofを使うのが良い。
6-4. for..in はオブジェクト向け
for..inはインデックス（またはプロパティ名）を列挙しますが、配列ではプロトタイプに追加されたプロパティまで拾ってしまうリスクがあるため、配列ループには基本的に使用しない方が安全です。
7. よく使う配列メソッド（一覧と例）
下は実務で頻出のメソッドと短い説明です。
| メソッド | 概要 | 例 |
|---|---|---|
push() | 末尾に追加（破壊的） | arr.push("X") |
pop() | 末尾を取り出す（破壊的） | const last = arr.pop() |
unshift() | 先頭に追加（破壊的） | arr.unshift("Y") |
shift() | 先頭を取り出す（破壊的） | const first = arr.shift() |
slice(start, end) | 部分抽出し新配列を返す（非破壊） | arr.slice(1,3) |
splice(start, deleteCount, ...items) | 要素削除/挿入（破壊的） | arr.splice(2,1,"Z") |
map(fn) | 各要素を変換して新配列を作る（非破壊） | arr.map(x => x*2) |
filter(fn) | 条件に合う要素だけ新配列（非破壊） | arr.filter(x => x>10) |
reduce(fn, init) | 累積して1つの値にする（非破壊） | arr.reduce((s,x)=>s+x,0) |
find(fn) | 条件に合う最初の要素を返す | arr.find(x => x.id===3) |
findIndex(fn) | 条件に合う最初のインデックス | arr.findIndex(x => x===7) |
includes(val) | 値が含まれるか真偽を返す | arr.includes("A") |
indexOf(val) / lastIndexOf(val) | 値の位置を返す | arr.indexOf("B") |
join(sep) | 文字列に結合 | arr.join(", ") |
sort() | ソート（破壊的） | arr.sort((a,b)=>a-b) |
Array.from() | 配列風オブジェクトを配列に | Array.from("abc") |
Array.isArray() | 配列かどうかチェック | Array.isArray(x) |
8. 破壊的 vs 非破壊的（重要）
- 破壊的（mutating）メソッド：
push,pop,splice,sortなど → 元配列を書き換える - 非破壊的（immutable）メソッド：
slice,map,filter,concatなど → 新しい配列を返す
実務ではイミュータブルに扱う方がバグが少なく、Reactなどのフレームワークとも相性が良い。
例：破壊的な push を避けてスプレッドで新しい配列を作る
const old = [1,2,3];
// bad: old.push(4) modifies old
const next = [...old, 4]; // [1,2,3,4]（非破壊）
9. よくあるミス・注意点
forの条件をi <= arr.lengthにしてしまう（最後にundefinedを参照してしまう） → 正しくはi < arr.length。forEachはbreakできない（途中終了したいならfor..ofを使う）。sort()は引数なしだと文字列順になる（数値ソートには比較関数が必須）。- 配列かどうかは
typeofでは判別できない（typeof [] === "object"）。Array.isArray()を使う。
10. 現代的な便利テク（ちょっと上級）
- スプレッドで結合／複製：
[...a, ...b]、[...arr] flat()/flatMap()：多次元配列の平坦化Array.from({ length: n }, (_, i) => i)：連番配列の生成Setを使った重複除去：[...new Set(arr)]
例：重複を除く
const nums = [1,2,2,3,3,3];
const uniq = [...new Set(nums)]; // [1,2,3]
11. サンプル小演習（手を動かして覚える）
- 配列
["東京","大阪","名古屋"]の末尾に"福岡"を追加して新しい配列を作る（pushを使わずに）。
const cities = ["東京","大阪","名古屋"];
const newCities = [...cities, "福岡"];
- 数値配列
[1,2,3,4]を2倍にした配列をmapで作る。
const doubled = [1,2,3,4].map(n => n * 2);
12. まとめ（まとめ文）
配列はJavaScriptの基礎中の基礎ですが、書き方やメソッドの特性（破壊的／非破壊的）を知らないとバグの元になります。for..of や map/filter を中心に、必要に応じて for を使う、破壊的操作は最小限にする、といったルールを自分のコーディングスタイルに取り入れると良いでしょう。
