JavaScript 配列の要素の取得と代入（初心者向けのやさしい解説）
配列は「番号付きの箱が並んだもの」。箱には値が入り、番号（インデックス）で取り出したり入れ替えたりします。まずは「取り出し」と「代入」をしっかりマスターしましょう。
配列とインデックスの基本
- 配列とは: 複数の値をひとまとめにできるデータの並び。
- インデックスは0から: 1番目の要素の番号は0、2番目は1…という数え方。
- 書き方の型:
配列名[インデックス]
例え話：本棚の左から0番、1番、2番…とラベルが付いているイメージ。0番の本を取りたければ本棚[0]です。
要素を取り出す（参照する）
- 基本: インデックスで指定して中身を取り出す。
- 存在しない番号はundefined: その場所に何もない、という意味。
let fruits = ['apple', 'banana', 'grape'];
console.log(fruits[0]); // 'apple'
console.log(fruits[1]); // 'banana'
console.log(fruits[2]); // 'grape'
console.log(fruits[3]); // undefined（3番は存在しない）
- 長さを確認: 配列の長さは
lengthでわかる。最後の要素はlength - 1。
console.log(fruits.length); // 3
console.log(fruits[fruits.length - 1]); // 'grape'（最後の要素）
要素を書き換える（代入する）
- 基本: 指定した番号の中身を新しい値に置き換える。
let prefectures = ['Tokyo', 'Osaka', 'Aichi'];
prefectures[1] = 'Fukuoka';
console.log(prefectures); // ['Tokyo', 'Fukuoka', 'Aichi']
- 新しい場所に代入するとどうなる？ 既存より大きい番号に代入すると、間が空いて
undefinedが入ることがある。
let nums = [10, 20];
nums[5] = 60;
console.log(nums);
// [10, 20, undefined, undefined, undefined, 60]
// 3,4番が空（undefined）になる
注意：意図せず大きいインデックスを使うと「スカスカ配列」になり、後で扱いづらくなります。
よくあるつまずきポイント
- 文字列の数字とインデックスは別もの:
'1'は文字、1は数。インデックスには数値を使う。 - 範囲外アクセスはエラーではなくundefined: 例外が出ないので気づきにくい。
lengthとセットで確認する習慣を。 - constでも中身は書き換え可能:
constは「配列そのものを別の配列に再代入できない」だけ。要素の変更はOK。
const animals = ['cat', 'dog'];
animals[0] = 'hamster'; // OK
// animals = ['lion']; // NG（配列自体の再代入は不可）
例題で理解を深める
例題1：3つの都市名を配列に入れて、2番目を出力してください
- ポイント: 2番目の要素はインデックス1
let cities = ['Tokyo', 'Osaka', 'Aichi'];
console.log(cities[1]); // 'Osaka'
例題2：配列の最後の要素を「Fukuoka」に書き換えてください
- ポイント: 最後は
length - 1
let cities = ['Tokyo', 'Osaka', 'Aichi'];
cities[cities.length - 1] = 'Fukuoka';
console.log(cities); // ['Tokyo', 'Osaka', 'Fukuoka']
例題3：存在しないインデックスを参照したときの動きを確かめましょう
- ポイント: undefined を確認
let colors = ['red', 'green'];
console.log(colors[2]); // undefined
例題4：for文で全要素を順番に取り出して表示してください
- ポイント: 0からlength未満まで回す
let fruits = ['apple', 'banana', 'grape'];
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
// apple, banana, grape
例題5：間違えやすいケースを実験してみよう
- ポイント: 大きいインデックスへの代入
let arr = [1, 2];
arr[4] = 5;
console.log(arr.length); // 5
console.log(arr); // [1, 2, undefined, undefined, 5]
次のステップ（発展）
- 要素の追加・削除:
push（末尾に追加）,pop（末尾を取り出す）,unshift（先頭に追加）,shift（先頭を取り出す） - 検索と置換:
indexOfで場所を探してから、そのインデックスに代入して置き換える - 安全なアクセス: 「存在チェック」をしてから代入・参照する
let items = ['pen', 'note', 'eraser'];
let pos = items.indexOf('note');
if (pos !== -1) {
items[pos] = 'notebook';
}
console.log(items); // ['pen', 'notebook', 'eraser']