JavaScriptの配列基礎
配列は番号付きの引き出しのようなものです。各引き出しには番号（インデックス）があり、データが入っています。番号でアイテムを取り出したり、交換したり、最後に新しいものを追加したりできます。配列は日常開発でもっともよく使うデータ構造です。
配列とは
配列は値の順序付きコレクションで、任意のデータ型を保持できます：
HTML
<script>
let arr = [1, 'こんにちは', true, null, undefined];
</script>
1つの配列に異なる型を混在できますが、実際には処理しやすいように同じ型を格納することが多いです。
配列の作成
2つの方法があります：
HTML
<script>
// 方法1：リテラル構文（推奨 — クリーンで直接的）
let fruits = ['りんご', 'バナナ', 'オレンジ'];
// 方法2：Arrayコンストラクタ
let nums = new Array(1, 2, 3);
let empty = new Array(5); // 長さ5の空の配列を作成。[5]ではない！
</script>
⚠️
new Array(5)は数値5を含む配列ではなく、長さ5の空の配列を作成します！多くの人がここで引っかかるので、[]リテラルを使い続けましょう。
要素へのアクセス
配列のインデックスは0から始まり、1からではありません。最初の要素は[0]、2番目は[1]となります：
HTML
<script>
let fruits = ['りんご', 'バナナ', 'オレンジ'];
fruits[0]; // 'りんご'
fruits[1]; // 'バナナ'
fruits[2]; // 'オレンジ'
</script>
存在しないインデックスにアクセスしてもエラーにはならず、undefinedを返します：
HTML
<script>
fruits[5]; // undefined
</script>
lengthプロパティ
lengthは配列の要素数を返します：
HTML
<script>
let arr = [10, 20, 30];
arr.length; // 3
</script>
lengthは常に最大インデックスより1大きくなります（インデックスは0から始まるため）。最後の要素はarr.length - 1にあります。
要素の変更
インデックスを使って新しい値を代入するだけです：
HTML
<script>
let fruits = ['りんご', 'バナナ', 'オレンジ'];
fruits[1] = 'ぶどう'; // 'バナナ'を'ぶどう'に置き換え
// ['りんご', 'ぶどう', 'オレンジ']
</script>
インデックスで要素を追加することもできますが（非推奨 — 空のスロットが作成されます）：
HTML
<script>
fruits[5] = 'すいか';
// ['りんご', 'ぶどう', 'オレンジ', empty × 2, 'すいか']
</script>
実例：基本的な配列操作
HTML
<!DOCTYPE html>
<html>
<body>
<h2>基本的な配列操作</h2>
<div id="output"></div>
<script>
let fruits = ['りんご', 'バナナ', 'オレンジ', 'ぶどう', 'すいか'];
let html = '<strong>元の配列:</strong>' + fruits.join(', ') + '<br>';
html += '<strong>長さ:</strong>' + fruits.length + '<br>';
html += '<strong>最初:</strong>' + fruits[0] + '<br>';
html += '<strong>最後:</strong>' + fruits[fruits.length - 1] + '<br><br>';
fruits[1] = 'マンゴー';
html += '<strong>インデックス1を変更後:</strong>' + fruits.join(', ') + '<br>';
document.getElementById('output').innerHTML = html;
</script>
</body>
</html>
主要メソッド
要素の追加と削除にもっともよく使う配列メソッド：
| メソッド | 動作 | 戻り値 |
|---|---|---|
push() |
末尾に追加 | 新しい長さ |
pop() |
末尾から削除 | 削除された要素 |
unshift() |
先頭に追加 | 新しい長さ |
shift() |
先頭から削除 | 削除された要素 |
HTML
<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>配列メソッド</title></head>
<body>
<pre id="output"></pre>
<script>
let arr = ['a', 'b', 'c'];
arr.push('d'); // ['a','b','c','d'] 戻り値: 4
arr.pop(); // ['a','b','c'] 戻り値: 'd'
arr.unshift('z'); // ['z','a','b','c'] 戻り値: 4
arr.shift(); // ['a','b','c'] 戻り値: 'z'
document.getElementById('output').textContent = JSON.stringify(arr);
</script>
</body>
</html>
💪 記憶のコツ：
push/popは末尾に作用し、unshift/shiftは先頭に作用します。pで始まるメソッドは末尾、sで始まるメソッドは先頭に影響します。unが付くものは追加、付かないものは削除です。
実例：果物リストマネージャー
HTML
<!DOCTYPE html>
<html>
<body>
<h2>果物リストマネージャー</h2>
<input type="text" id="fruitInput" placeholder="果物の名前を入力">
<button onclick="addFruit()">末尾に追加</button>
<button onclick="removeLast()">最後を削除</button>
<p id="output"></p>
<script>
let fruits = ['りんご', 'バナナ', 'オレンジ'];
function showFruits() {
let html = '<strong>現在の果物リスト:</strong><br>';
if (fruits.length === 0) {
html += '（空のリスト）';
} else {
for (let i = 0; i < fruits.length; i++) {
html += `[${i}] ${fruits[i]}<br>`;
}
}
html += `<br>合計: ${fruits.length}個の果物`;
document.getElementById('output').innerHTML = html;
}
function addFruit() {
let name = document.getElementById('fruitInput').value.trim();
if (name) {
fruits.push(name);
document.getElementById('fruitInput').value = '';
showFruits();
}
}
function removeLast() {
if (fruits.length > 0) {
let removed = fruits.pop();
showFruits();
}
}
showFruits();
</script>
</body>
</html>
配列の確認：Array.isArray()とtypeof
typeofは配列に"object"を返すため、プレーンオブジェクトとの区別に使えません：
HTML
<script>
let arr = [1, 2, 3];
typeof arr; // "object" ← 役に立たない！
Array.isArray(arr); // true ← 正しい方法
</script>
⚠️
typeofは配列に対して信頼できません。常にArray.isArray()を使いましょう。
forEachによる反復
forEachは配列を反復する最も一般的な方法で、forループより宣言的です：
HTML
<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>forEach</title></head>
<body>
<pre id="output"></pre>
<script>
let fruits = ['りんご', 'バナナ', 'オレンジ'];
let result = '';
fruits.forEach(function(fruit, index) {
result += index + ' ' + fruit + '\n';
});
document.getElementById('output').textContent = result;
</script>
</body>
</html>
アロー関数でさらに簡潔にできます：
HTML
<script>
fruits.forEach((fruit, index) => {
console.log(index, fruit);
});
</script>
実例：forEachの実践
HTML
<!DOCTYPE html>
<html>
<body>
<h2>forEach配列反復</h2>
<div id="output"></div>
<script>
let students = [
{ name: '花子', score: 92 },
{ name: '太郎', score: 85 },
{ name: '一郎', score: 78 },
{ name: '恵子', score: 96 }
];
let html = '<table border="1" cellpadding="8" style="border-collapse:collapse">';
html += '<tr><th>#</th><th>名前</th><th>点数</th><th>評価</th></tr>';
students.forEach((s, i) => {
let grade = s.score >= 90 ? 'A' : s.score >= 80 ? 'B' : 'C';
let color = s.score >= 90 ? 'green' : s.score >= 80 ? 'blue' : 'orange';
html += `<tr>
<td>${i + 1}</td>
<td>${s.name}</td>
<td>${s.score}</td>
<td style="color:${color}">${grade}</td>
</tr>`;
});
html += '</table>';
let total = 0;
students.forEach(s => total += s.score);
html += `<p>平均: ${(total / students.length).toFixed(1)}点</p>`;
document.getElementById('output').innerHTML = html;
</script>
</body>
</html>
⚠️
map、filter、reduceのような高階メソッドはさらに強力です。次のレッスンで扱います。
📖 まとめ
- 配列は
[]リテラルで作成する —new Array()は避ける（混乱しやすい） - インデックスは0から始まり、最後の要素は
length - 1にある push/popは末尾に作用し、unshift/shiftは先頭に作用する- 配列かどうかの確認には
Array.isArray()を使う —typeofは"object"を返して信頼できない forEachはforより宣言的だが、breakで途中終了はできない
❓ よくある質問
Q
pushとunshiftの戻り値は何ですか？A どちらも配列の新しい長さを返し、変更された配列ではありません。多くの人は配列自体を期待しますが、
let arr = [1].push(2)は2（長さ）を返し、[1, 2]ではありません。Q
forEachの中でbreakは使えますか？A いいえ。
forEachにはbreakのメカニズムがありません。途中で終了するには、従来のforループまたはbreak付きのfor...ofを使います。Q 範囲外のインデックスにアクセスするとエラーになりますか？
A いいえ。
arr[100]は範囲外の場合undefinedを返し、例外はスローされません。ただし、バグを隠す可能性があるため、アクセス前にインデックスの範囲をチェックすることが良い習慣です。📝 演習
- 5つの都市名の配列を作成し、
forEachで各都市の番号と名前をページに表示してください。 - ToDoリストを作成してください：入力したタスクを末尾に追加し、「完了」をクリックすると最後のタスクを削除し、リストをリアルタイムで表示します。
- 5つの数値を入力として受け取り、配列に格納し、合計と平均を表示するプログラムを書いてください。