JavaScript: JavaScriptの配列基礎
最終更新：2026-10-13
配列は番号付きの引き出しのようなものです。各引き出しには番号（インデックス）があり、データが入っています。番号でアイテムを取り出したり、交換したり、最後に新しいものを追加したりできます。配列は日常開発でもっともよく使うデータ構造です。
1. 配列とは
配列は値の順序付きコレクションで、任意のデータ型を保持できます：
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の空の配列を作成します！多くの人がここで引っかかるので、[]リテラルを使い続けましょう。
2. 要素へのアクセス
配列のインデックスは0から始まり、1からではありません。最初の要素は[0]、2番目は[1]となります：
HTML
<script>
let fruits = ['りんご', 'バナナ', 'オレンジ'];
fruits[0]; // 'りんご'
fruits[1]; // 'バナナ'
fruits[2]; // 'オレンジ'
</script>
存在しないインデックスにアクセスしてもエラーにはならず、undefinedを返します：
HTML
<script>
fruits[5]; // undefined
</script>
3. lengthプロパティ
lengthは配列の要素数を返します：
HTML
<script>
let arr = [10, 20, 30];
arr.length; // 3
</script>
lengthは常に最大インデックスより1大きくなります（インデックスは0から始まるため）。最後の要素はarr.length - 1にあります。
4. 要素の変更
インデックスを使って新しい値を代入するだけです：
HTML
<script>
let fruits = ['りんご', 'バナナ', 'オレンジ'];
fruits[1] = 'ぶどう'; // 'バナナ'を'ぶどう'に置き換え
// ['りんご', 'ぶどう', 'オレンジ']
</script>
インデックスで要素を追加することもできますが（非推奨 — 空のスロットが作成されます）：
HTML
<script>
fruits[5] = 'すいか';
// ['りんご', 'ぶどう', 'オレンジ', empty × 2, 'すいか']
</script>
▶ サンプル：基本的な配列操作
▶ 試してみよう5. 主要メソッド
要素の追加と削除にもっともよく使う配列メソッド：
| メソッド | 動作 | 戻り値 |
|---|---|---|
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が付くものは追加、付かないものは削除です。
▶ サンプル：果物リストマネージャー
▶ 試してみよう6. 配列の確認：Array.isArray()とtypeof
typeofは配列に"object"を返すため、プレーンオブジェクトとの区別に使えません：
HTML
<script>
let arr = [1, 2, 3];
typeof arr; // "object" ← 役に立たない！
Array.isArray(arr); // true ← 正しい方法
</script>
⚠️ 注意：
typeofは配列に対して信頼できません。常にArray.isArray()を使いましょう。
7. 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の実践
▶ 試してみよう❓ よくある質問
Q
pushとunshiftの戻り値は何ですか？A どちらも配列の新しい長さを返し、変更された配列ではありません。多くの人は配列自体を期待しますが、
let arr = [1].push(2)は2（長さ）を返し、[1, 2]ではありません。Q
forEachの中でbreakは使えますか？Q 範囲外のインデックスにアクセスするとエラーになりますか？
A いいえ。
arr[100]は範囲外の場合undefinedを返し、例外はスローされません。ただし、バグを隠す可能性があるため、アクセス前にインデックスの範囲をチェックすることが良い習慣です。📖 まとめ
- 配列は
[]リテラルで作成する —new Array()は避ける（混乱しやすい） - インデックスは0から始まり、最後の要素は
length - 1にある push/popは末尾に作用し、unshift/shiftは先頭に作用する- 配列かどうかの確認には
Array.isArray()を使う —typeofは"object"を返して信頼できない forEachはforより宣言的だが、breakで途中終了はできない
📝 練習問題
- 5つの都市名の配列を作成し、
forEachで各都市の番号と名前をページに表示してください。 - ToDoリストを作成してください：入力したタスクを末尾に追加し、「完了」をクリックすると最後のタスクを削除し、リストをリアルタイムで表示します。
- 5つの数値を入力として受け取り、配列に格納し、合計と平均を表示するプログラムを書いてください。
