今回は「配列の作り方」を中心に、配列の中身の取り出し・変更・注意点までカバーします。
配列って何?(かんたん説明)
配列(Array)は「複数のデータを順番にしまっておける箱」です。
たとえばテストの点数を 1 個の変数に全部は入れられないけど、配列なら [78, 69, 84, 50] のようにまとめて扱えます。
1. 配列を作る(基本) — 配列リテラル []
もっとも一般的でおすすめの書き方は [] を使う方法です。
let scores = [78, 69, 84, 50];
let fruits = ['apple', 'lemon', 'orange'];
let profile = ['Yamada', 24, 'Tokyo', true]; // 型を混ぜても OK
let empty = []; // 空の配列
JavaScriptscoresのように数値だけ、fruitsのように文字列だけ、あるいはprofileのように混在しても動きます(JavaScript はゆるい型)。
2. インデックスで中身を取り出す・書き換える
配列の要素には「インデックス(添え字)」でアクセスします。インデックスは 0 から始まります。
let fruits = ['apple', 'lemon', 'orange'];
console.log(fruits[0]); // => 'apple'
console.log(fruits[2]); // => 'orange'
console.log(fruits[3]); // => undefined (存在しない)
JavaScript書き換えもできます:
fruits[1] = 'banana';
console.log(fruits); // => ['apple', 'banana', 'orange']
JavaScript3. 配列の長さ(length)と注意点
length は「最後のインデックス + 1」を返します。
let a = [10, 20, 30];
console.log(a.length); // => 3
JavaScriptただし「途中で要素が抜けている(スパース)」場合、length は実際に入っている要素数とは違うことがあります。
let b = [1, , 3]; // 真ん中が空
console.log(b[1]); // => undefined
console.log(b.length); // => 3 (index 1 が空でも長さは3)
JavaScriptポイント:要素が undefined か「存在しない(抜けている)」かは微妙に違うので、実際の要素数を数えたいときは filter 等で確認します。
4. 配列作成に new Array(...) を使うケースと落とし穴
new Array(...) でも配列を作れますが注意が必要です。
let x = new Array('apple', 'lemon'); // => ['apple', 'lemon']
let y = new Array(5); // => 空要素が5つの配列(要注意)
console.log(y.length); // => 5
console.log(y); // -> [ <5 empty items> ]
JavaScriptnew Array(5)は「長さ 5 の空の配列」を作る(実際に値は入っていない)。- もし「要素として数値 5 を入れたい」なら
new Array(5)は使わず、[5]を使いましょう。
初心者向け結論:普通は [](配列リテラル)を使えば OK。new Array は特殊用途以外は避けるのが安全。
5. 要素に式や変数を入れることもできる
配列を作るときに計算結果や変数を入れられます。
let a = 10;
let arr = [a, a + 5, Math.max(3,7)];
console.log(arr); // => [10, 15, 7]
JavaScript配列に入るのは「式を評価した結果」です。
6. よく使うちょっとした操作(作成の補助)
- 要素追加(末尾):
push - 要素取り出し(末尾):
pop - 先頭に追加:
unshift、先頭から取り出し:shift - 指定位置の追加/削除:
splice
(これらは配列の作成だけでなく操作全般に役立つので覚えると便利です)
let arr = [1,2,3];
arr.push(4); // -> [1,2,3,4]
arr.pop(); // returns 4, arr -> [1,2,3]
arr.splice(1, 1); // 1番目の要素を1個削除 -> arr -> [1,3]
JavaScript7. 実行例(ブラウザのコンソールや Node.js で試してみて)
例:配列を作って要素を取り出し、書き換える簡単なスクリプト
let students = ['Aki', 'Ben', 'Chie'];
console.log('人数:', students.length); // 人数: 3
console.log('1人目:', students[0]); // 1人目: Aki
// 2人目の名前を変更
students[1] = 'Benny';
console.log(students); // ['Aki','Benny','Chie']
// 新しい人を追加
students.push('Dai');
console.log(students); // ['Aki','Benny','Chie','Dai']
JavaScript8. よくある間違い(初心者が陥りやすい点)
new Array(5)を「5 を要素に入れた配列」と誤解する。実際は長さ 5 の空配列。- インデックスを 1 始まりで考えてしまう(JS は 0 始まり)。
- 配列の途中が空(スパース)だと
forなどのループで期待した動きにならない場合がある。 lengthをそのまま「実際に入っている要素数」と考えるとズレることがある。
9. 練習問題(手を動かしてみよう) — 自分で実行して答え合わせ
下に5問。まず自分でコンソールやエディタで実行してみて、答えを確かめてください。最後に答えを載せます。
問題1
let a = [10, 20, 30];
a[1] = a[1] + 5;
console.log(a);
JavaScript→ 結果は?
問題2
let b = [];
b[2] = 'hello';
console.log(b.length);
console.log(b[0]);
JavaScript→ length と b[0] の出力は?
問題3
let c = new Array(3);
console.log(c);
console.log(c.length);
c.push('x');
console.log(c.length);
JavaScript→ それぞれの出力は?
問題4
let d = ['apple', 'banana', 'orange'];
console.log(d[3]);
console.log(d[d.length - 1]);
JavaScript→ 出力は?
問題5(応用)
let e = [1, , 3]; // 真ん中が空
console.log(e.length);
console.log(e.filter(x => x !== undefined).length);
JavaScript→ それぞれ何が出る?
10. 練習問題の答え
問題1 の答え[10, 25, 30]
(インデックス 1 の 20 に 5 を足して 25 にした)
問題2 の答えb.length → 3b[0] → undefined
(b[2] = 'hello' にすると index 0 と 1 は存在しないので undefined。length は最後のインデックス +1 = 3)
問題3 の答え
最初の console.log(c) → [ <3 empty items> ](または環境によって表示が異なる)c.length → 3c.push('x') のあと c.length → 4
(new Array(3) は長さ 3 の「空の」配列。push で末尾に要素が追加される)
問題4 の答えd[3] → undefined(存在しない)d[d.length - 1] → 'orange'(最後の要素)
問題5 の答えe.length → 3e.filter(x => x !== undefined).length → 2
(長さは 3 だが、 filter で実際に値が入っている要素だけ数えると 2)
最後に(まとめ)
- 配列は
[]を使うのが基本でシンプル。 - インデックスは 0 始まり、
lengthは「最後のインデックス+1」。 new Array(n)は「長さ n の空配列」になるので注意。- 実際にコンソールで手を動かして試すと理解が早いです。
