2026年4月16日
JavaScript 配列とは？
「JavaScript 配列の使い方を知りたい」という方に向けて、基礎からわかりやすく解説します。
配列（はいれつ）とは、複数の値をひとまとめにして管理できる「箱のリスト」のようなものです。たとえば、クラスの名前一覧・テストの点数・好きな食べ物のリストなど、複数のデータをまとめて扱うときに使います。
// 変数1つに1つの値
let name1 = '田中';
let name2 = '鈴木';
let name3 = '佐藤';
// 配列なら1つにまとめられる
let names = ['田中', '鈴木', '佐藤'];配列の作り方
配列は []（角かっこ）の中に値をカンマで区切って書きます。
// 文字列の配列
let fruits = ['りんご', 'バナナ', 'みかん'];
// 数値の配列
let scores = [85, 92, 78, 100, 65];
// 空の配列
let empty = [];
// 異なる型を混在させることもできる
let mixed = ['田中', 14, true];🔗 あわせてfetch入門もチェックしてみましょう。
要素を取得する（インデックス）
配列の各要素には インデックス（番号） がついています。インデックスは 0から始まる ことに注意してください。
let fruits = ['りんご', 'バナナ', 'みかん'];
console.log(fruits[0]); // りんご（最初の要素）
console.log(fruits[1]); // バナナ
console.log(fruits[2]); // みかん（最後の要素）
// 配列の長さ
console.log(fruits.length); // 3⚠️ インデックスは0から始まる！
最初の要素は [0]、2番目は [1]、3番目は [2] です。「1番目だから [1]」と間違えやすいので注意しましょう。
要素の追加・削除
末尾に追加：push()
let fruits = ['りんご', 'バナナ'];
fruits.push('みかん');
console.log(fruits); // ['りんご', 'バナナ', 'みかん']末尾を削除：pop()
let fruits = ['りんご', 'バナナ', 'みかん'];
fruits.pop();
console.log(fruits); // ['りんご', 'バナナ']先頭に追加：unshift() / 先頭を削除：shift()
let fruits = ['バナナ', 'みかん'];
fruits.unshift('りんご'); // 先頭に追加
console.log(fruits); // ['りんご', 'バナナ', 'みかん']
fruits.shift(); // 先頭を削除
console.log(fruits); // ['バナナ', 'みかん']📖 詳しくはJavaScript問題ドリルで解説しています。
配列をループで処理する
配列の全要素に同じ処理をするには ループ（繰り返し） を使います。
for文でループ
let fruits = ['りんご', 'バナナ', 'みかん'];
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
// りんご
// バナナ
// みかんforEach()でループ（シンプルな書き方）
let fruits = ['りんご', 'バナナ', 'みかん'];
fruits.forEach(function(fruit) {
console.log(fruit);
});ハンズオン：配列でリストを表示しよう
配列の内容をHTMLのリストとして表示するページを作ってみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>配列練習</title>
</head>
<body>
<h1>好きな食べ物リスト</h1>
<ul id="list"></ul>
<script>
const foods = ['ラーメン', 'カレー', '寿司', 'ピザ'];
const ul = document.getElementById('list');
foods.forEach(function(food) {
const li = document.createElement('li');
li.textContent = food;
ul.appendChild(li);
});
</script>
</body>
</html>配列の内容が自動でリストとして表示されます。配列に要素を追加するだけでリストも増えます。
👉 イベント処理入門も参考にしてください。
配列でよくあるミスと対策
配列を使い始めたとき、よくあるミスを紹介します。
ミス1：インデックスが0から始まることを忘れる
配列の最初の要素はインデックス0です。1ではありません。3つの要素がある配列なら、インデックスは0、1、2です。3を指定するとundefined（未定義）が返ってきます。要素数が3なのに「3番目」を取ろうとするミスは非常に多いです。
ミス2：配列の長さを超えてアクセスする
存在しないインデックスを指定してもエラーにはなりません。undefinedが返ってくるだけです。気づかないままプログラムが進んでしまうので、配列のlengthプロパティで要素数を確認する癖をつけましょう。
ミス3：pushとconcatの違いを混同する
pushは元の配列に要素を追加します。concatは元の配列を変えずに、新しい配列を返します。「追加したはずなのに反映されない」というときは、concatの戻り値を変数に入れ忘れている可能性があります。
配列を使いこなすコツ
配列は「同じ種類のデータをまとめる」ときに使います。たとえば生徒の名前一覧、テストの点数一覧、買い物リストなどです。
forループやforEachメソッドを使えば、配列の全要素に同じ処理を実行できます。「一つずつ取り出して何かする」パターンはプログラミングで最もよく使います。まずはこのパターンに慣れましょう。
まとめ
- ✅ 配列：複数の値をひとまとめにする「箱のリスト」
- ✅
[]で作り、インデックス（0から始まる）で要素を取得する - ✅
push()で末尾に追加、pop()で末尾を削除 - ✅
forEach()で全要素に同じ処理を繰り返せる - ✅
lengthプロパティで配列の要素数を取得できる
JavaScriptの基礎はJavaScript入門で復習できます。
あわせて読みたい記事
- JavaScriptとは？初心者向け解説 — JS基礎に戻る
- JavaScriptループ入門 — 配列のループ処理
- JavaScriptオブジェクト入門 — オブジェクトの配列
- JavaScript関数入門 — コールバック関数の理解
- JavaScript DOM操作入門 — 配列データをDOMに表示
- JavaScript文字列操作入門 — split()で配列に変換