配列（Array）はデータを順番に並べた「箱の列」です。ここでは 配列の要素を取り出す（アクセス） 方法、値を入れ替えたり代入したり（変更） する方法を、初心者向けに丁寧に説明します。実際のコード例・出力・よくある落とし穴・練習問題（解答付き）も載せます。
1. 基本：インデックス（添字）は 0 から始まる
- 配列の各要素には順番の番号（インデックス）が付いており、0 から始まる点が肝心です。
つまり最初の要素はarr[0]、2 番目はarr[1]です。
例
let arr = ['りんご', 'ばなな', 'みかん'];
console.log(arr[0]); // 'りんご'
console.log(arr[1]); // 'ばなな'
console.log(arr[2]); // 'みかん'
2. 存在しないインデックスを読むと undefined が返る
console.log(arr[3]); // undefined（エラーではない）
- これは「その場所に値が入っていない」ことを表します。
undefinedを使って条件分岐で「値があるか」を判定できます。
3. 要素に値を代入（変更）する方法
- 書き方は
配列名[番号] = 新しい値;です。
arr[1] = 'ぶどう';
console.log(arr); // ['りんご', 'ぶどう', 'みかん']
- 既存の要素を書き換えられます。配列自体が
letまたはconstで宣言されていても要素の書き換えは可能です（ただしconstの場合は配列全体を別の配列に入れ替えることはできません）。
const a = [1,2,3];
a[0] = 10; // OK -> [10,2,3]
a = [4,5]; // NG（再代入はできない）
4. 範囲外のインデックスに代入すると配列が伸びる（疎配列になる）
let b = ['a','b'];
b[5] = 'f';
console.log(b); // ['a','b', <3 empty items>, 'f']
console.log(b.length); // 6
console.log(b[2]); // undefined
b[5] = 'f'とするとlengthが6になり、途中のインデックスには“穴（empty）”が入ります（参照するとundefined）。- 「この挙動を知らずにループで回すと
undefinedと一緒に処理してしまう」ことがあるので注意。
5. 最後の要素にアクセスする方法（よく使うテク）
- 古典的な方法：
let last = arr[arr.length - 1];
- 新しい JS では
at()というメソッドも使えます（arr.at(-1)は最後の要素を返す）。どちらでもOKですが、互換性を気にする場面ではarr[arr.length-1]が安全です。
6. よくある間違い（＆対策）
- オフバイワン（index が 0 始まりを忘れる）
→ 1 番目の要素をarr[1]と書いてしまう（実際は 2 番目）。 - 存在しない要素を使って計算して
NaNになったり、undefinedを文字列連結してundefinedが画面に出てしまう。
→if (arr[i] !== undefined)のようにチェックする。 forループの終了条件をi <= arr.lengthにしてしまって配列外参照をする。
→ 正しくはi < arr.length。
7. 実践例（ステップ実行でわかりやすく）
例 A — 2つの要素を入れ替える（swap）
let list = ['赤', '青', '緑'];
// 赤 と 緑 を入れ替えたい（index 0 と 2）
let tmp = list[0];
list[0] = list[2];
list[2] = tmp;
console.log(list); // ['緑', '青', '赤']
例 B — 配列の中で “apple” を “APPLE” に置換
let fruits = ['apple','banana','apple','orange'];
for (let i = 0; i < fruits.length; i++) {
if (fruits[i] === 'apple') {
fruits[i] = 'APPLE';
}
}
console.log(fruits); // ['APPLE','banana','APPLE','orange']
例 C — 範囲外代入で配列が伸びる実験
let x = [1,2];
console.log(x.length); // 2
x[4] = 5;
console.log(x); // [1,2, <2 empty items>, 5]
console.log(x.length); // 5
8. デバッグのコツ（コンソールで確認）
console.log(arr)だけでなく、console.log(i, arr[i])のようにループ内でインデックスと値を同時に出すと、どの場所でundefinedが来るのか分かりやすいです。- ブラウザの DevTools（コンソール）だと、展開して中身を確認できます。配列の長さや空の要素も視覚的に見えるので便利。
9. 発展ポイント（ちょっとだけ知識）
push()で末尾に追加する（arr.push(value)）と安全に追加できます。
例：arr.push('新しい要素')→arr[arr.length-1]に追加される。- ネスト配列（配列の中に配列がある）にも
arr[0][1]のようにアクセスできますが、最初は単純な1次元配列をしっかり理解することを優先してください。
10. 練習問題（手を動かして覚えよう）
問題 1
colors = ['red','green','blue','yellow'] で、'green' を 'lime' に書き換えるコードを書け。出力も示せ。
問題 2
nums = [10, 20, 30] に対して nums[5] = 60; を実行したとき、nums.length はいくつになる？また nums[3] の値は？
問題 3（応用）
arr = ['a','b','c','d'] の最後の要素を取り出して変数 last に入れるコードを書け（at() を使わない方法で）。
11) 練習問題の解答
- 答 1
let colors = ['red','green','blue','yellow'];
colors[1] = 'lime';
console.log(colors); // ['red','lime','blue','yellow']
- 答 2
nums = [10,20,30];
nums[5] = 60;
console.log(nums.length); // 6
console.log(nums[3]); // undefined
（nums は [10,20,30, <2 empty items>, 60] のようになります）
- 答 3
let arr = ['a','b','c','d'];
let last = arr[arr.length - 1];
console.log(last); // 'd'
最後に — 覚えておいてほしいこと（まとめ）
- インデックスは 0 始まり。これが一番の罠になります。
- 存在しないインデックスは
undefinedを返す（エラーではない）。 - 配列は ミュータブル（中身を変えられる） —
constでも要素は変更できる点に注意。 - 範囲外に代入すると配列が伸び、間に「穴（undefined）」ができる。ループ処理での取り扱いに注意。