JS

配列

初級

読み方:はいれつ|英語:Array

複数のデータをまとめて管理するデータ構造で、["A", "B", "C"] の形で書くよ。

やさしい説明

配列(はいれつ)とは、複数のデータを順番に並べて管理するデータ構造です。「番号付きのロッカー」のイメージです。

[ ] で囲んでカンマで区切って書きます。番号(インデックス)は0から始まるのが特徴です。最初の要素は [0] です。

同じ種類のデータをまとめて管理するのに向いています。生徒の名前一覧、テストの点数一覧、商品リストなどに使います。

図解:配列とオブジェクトの違い

配列は番号で管理、オブジェクトは名前で管理

具体例・使い方

const fruits = ["りんご", "みかん", "バナナ"];

fruits[0];        // "りんご"(最初の要素)
fruits.length;    // 3(要素数)
fruits.push("ぶどう"); // 末尾に追加

// 全要素に対して処理
fruits.forEach(fruit => {
  console.log(fruit);
});

よく使うメソッド

メソッド 何をする?
push()末尾に要素を追加する
pop()末尾の要素を取り除く
forEach()全要素を1つずつ処理する
map()全要素を変換して新しい配列を作る
filter()条件に合う要素だけ残す
includes()その要素が含まれるか調べる(true/false)

いつ使う?

  • 同じ種類のデータを複数まとめたいとき(生徒名・点数・商品リスト)
  • TODOリストやチャットのメッセージ一覧
  • 検索結果やAPIから返ってきたデータの表示
  • ループで「全部に同じ処理」をしたいとき

配列と map() は相性抜群。fruits.map(f => "<li>" + f + "</li>") のように書けば、データ一覧からHTMLを自動生成できます。ToDoアプリや一覧表示の基本パターンです。

間違いやすいポイント

❌ インデックスが0から始まることを忘れる

最初の要素は [0]。「2番目」は [1] です。存在しない番号にアクセスすると undefined が返ります。

const arr = ["A", "B", "C"];
arr[1]; // "B"(2番目!1番目ではない)
arr[3]; // undefined(存在しない)

= で配列をコピーしたつもりが「同じ配列」を指す

const b = a; は中身を複製せず、同じ配列を共有します。b を変えると a も変わります。複製したいときは const b = [...a];(スプレッド構文)を使いましょう。

よくある疑問

Q: 配列のインデックスはなぜ0から?

A: コンピューターの内部的な理由です。最初の要素は[0]、2番目は[1]と覚えましょう。arr.lengthは要素数なので、最後のインデックスはlength-1です。

Q: 配列に要素を追加するには?

A: arr.push(値) で末尾に追加、arr.unshift(値) で先頭に追加します。pushが最もよく使います。

Q: 配列の要素数を調べるには?

A: arr.length で要素数がわかります。空の配列は length が 0 です。

関連用語

  • オブジェクト — 番号でなく「名前」でデータを管理する。配列と対になる
  • ループ — 配列の全要素を順に処理する仕組み
  • 変数 — 配列も変数に入れて使う

📖 関連レッスン

レッスンを見る →

関連ブログ記事

⚠️ 関連するエラー

❓ 関連するQ&A