配列の基本 — 作る・取り出す・数える

配列は、値を順番に並べて、1つの名前で扱うための入れ物です。

const fruits = ['りんご', 'みかん', 'ぶどう'];

console.log(fruits);

const fruits = ['りんご', 'みかん', 'ぶどう'];

console.log(fruits[0]);
console.log(fruits[1]);
console.log(fruits[2]);

[ と ] で囲み、, で区切ります。中身のひとつひとつを要素と呼びます。

番号で取り出す

[] に番号を書くと、その位置の要素が取れます。この番号を添字と呼びます。

const fruits = ['りんご', 'みかん', 'ぶどう'];

console.log(fruits[3]);
console.log(fruits[-1]);

const fruits = ['りんご', 'みかん', 'ぶどう'];

console.log(fruits[3].length);

添字は 0 から始まります。 1番目ではなく0番目です。 ここは最初につまずくところなので、覚えるより何度も書いて慣れるほうが早いです。

上のコードは書き換えて実行できます。fruits[1] を fruits[2] にしてみてください。

範囲の外を読んでもエラーにならない

無い場所を読んでも、止まりません。undefined が返ります。

const fruits = ['りんご', 'みかん', 'ぶどう'];

console.log(fruits.length);
console.log([].length);

const fruits = ['りんご', 'みかん', 'ぶどう'];

console.log(fruits[fruits.length - 1]);
console.log(fruits.at(-1));

ここが後で効いてきます。 止まらないので、間違いにその場では気づけません。 undefined を持ったまま先へ進み、別の場所で落ちます。

const fruits = ['りんご', 'みかん'];

fruits.push('ぶどう');
console.log(fruits);

const last = fruits.pop();
console.log(last);
console.log(fruits);

const nums = [1, 2, 3, 4, 5];

nums.length = 2;
console.log(nums);

nums.length = 4;
console.log(nums);

エラーが出た場所（.length のところ）と、原因の場所（fruits[3] が空振りしたこと）は違います。

数える

length で要素の数が分かります。

const mixed = [1, 'あ', true, null, [2, 3]];

console.log(mixed);
console.log(mixed.length);
console.log(mixed[4][0]);

添字は0から始まるので、最後の要素は length - 1 番目です。

at(-1) は「後ろから1番目」と書ける新しい書き方です。どちらでも構いません。

足す・取る

末尾に足すのが push()、末尾から取るのが pop() です。

この2つは破壊的メソッドです。元の配列そのものを書き換えます。

先頭を扱う unshift() / shift() もありますが、 先頭に入れると後ろの要素を全部ずらすことになるため、要素が多いと遅くなります。

length に代入すると切れる

length は読むだけのものではありません。代入できます。

短くすると切り捨てられます。長くしても値は入らず、空きができるだけです。 <2 empty items> は「穴が2つある」という意味で、undefined が入っているのとは違います。

表示のしかたは処理系によって違います。上は Node 22.22.3 の出力です。

ふだんは length に代入しません。 そういう挙動がある、とだけ知っておいてください。

中身の型は混ぜられる

JavaScript の配列は、違う種類の値を同じ配列に入れられます。

配列の中に配列も入ります。ただし混ぜられることと、混ぜてよいことは別です。 ふだんは同じ種類のものだけを入れてください。あとで扱いに困ります。

まとめ

• 配列は値を順番に並べる入れ物。[] で作る
• 添字は0から。最後は length - 1 番目
• 範囲の外を読んでも止まらない。undefined が返る
• push() / pop() は元の配列を書き換える
• length は数えるだけでなく代入もできてしまう

次に学ぶ

配列の中身を1つずつ順番に処理する方法を学びます。 for / for...of / forEach() の3つを、違いが分かる形で比べます。

→ 第2回: 配列を繰り返す

配列の一部を取り出したり、途中に差し込んだりする方法は、第2回のあとで読むと分かりやすくなります。 → slice() と splice()