JavaScript | 基礎構文：データ型 – 配列の基本

JavaScript
2025.12.11
スポンサーリンク

配列を一言でいうと

配列（Array）は、
「同じような種類のデータを、順番つきでまとめて入れておける“箱の列”」 です。

1人のユーザー → 1つの値（名前など）なら普通の変数で足りる
10人のユーザー → 10個の変数を書くのはつらい

こういうときに「まとめて管理しよう」として登場するのが配列です。

ここが重要です。
配列は「複数の値を、1つの変数名で扱える仕組み」。
“順番がある集合” を扱いたくなったら、まず配列を思い出してほしいです。

配列の作り方と基本的な見た目

配列リテラル：[] で囲む

一番基本的な作り方は、[]（角かっこ）で値を並べる書き方です。

const numbers = [10, 20, 30];
const fruits = ["apple", "banana", "orange"];
JavaScript

numbers には数値が 3つ
fruits には文字列が 3つ

順番つきで並んでいます。

何も入っていない配列（空配列）も作れます。

const empty = [];
JavaScript

あとから中身を追加することもできますが、まずは「[] で並べる」と覚えてください。

インデックス（順番の番号）は 0 から始まる

配列の「何番目か」を表す番号を インデックス と呼びます。
JavaScript の配列は、0 から始まります。

const fruits = ["apple", "banana", "orange"];

console.log(fruits[0]); // "apple"   （1番目の要素）
console.log(fruits[1]); // "banana"  （2番目）
console.log(fruits[2]); // "orange"  （3番目）
JavaScript

[0] が一番最初、
[1] が次、
[2] がその次……というルールです。

存在しない位置を読もうとすると、undefined になります。

console.log(fruits[3]); // undefined
JavaScript

ここが重要です。
「0 から始まる順番番号で、配列の中身にアクセスする」という感覚に慣れること。
最初は違和感があっても、ここさえ乗り越えれば配列は一気に扱いやすくなります。

配列の長さと「最後の要素」の取り方

length プロパティで「何個入っているか」が分かる

配列には length というプロパティがあります。
これで「中に何個の要素があるか」が分かります。

const fruits = ["apple", "banana", "orange"];

console.log(fruits.length); // 3
JavaScript

空配列なら 0 です。

const empty = [];
console.log(empty.length); // 0
JavaScript

最後の要素を取り出すパターン

最後の要素のインデックスは、
「length – 1」 です。

const fruits = ["apple", "banana", "orange"];

const lastIndex = fruits.length - 1;
console.log(lastIndex);        // 2
console.log(fruits[lastIndex]); // "orange"
JavaScript

fruits[fruits.length - 1] と覚えてしまってもいいです。

ここが重要です。
「0 始まり」なので、
インデックスの最大値 = length - 1
という関係が常に成り立ちます。
この関係を自然に使えるようになると、ループとも相性が良くなります。

配列の要素を読み書きする（取得・変更・追加）

既存の要素を読む・書き換える

読み取りは 配列[インデックス] でした。
書き換えも同じ形でできます。

const scores = [50, 60, 70];

console.log(scores[1]); // 60

scores[1] = 80;         // 2番目の要素を書き換え
console.log(scores[1]); // 80

console.log(scores);    // [50, 80, 70]
JavaScript

配列の末尾に追加する：push

配列の一番最後に新しい要素を追加したいときは、push を使います。

const fruits = ["apple", "banana"];

fruits.push("orange");
console.log(fruits); // ["apple", "banana", "orange"]
JavaScript

「新しいデータを後ろにくっつける」というのは、実務でもめちゃくちゃ頻繁にやります。

配列の末尾から取り出す：pop

逆に、配列の一番最後から要素を取り出して削除したいときは、pop を使います。

const fruits = ["apple", "banana", "orange"];

const last = fruits.pop();

console.log(last);   // "orange"
console.log(fruits); // ["apple", "banana"]
JavaScript

pop は「削除した要素」を返してくれます。

先頭に追加・先頭から取り出す（unshift / shift）

最初のほうは「こういうのもあるんだ」くらいで十分ですが、紹介だけします。

先頭に追加：unshift

const arr = [2, 3];
arr.unshift(1);
console.log(arr); // [1, 2, 3]
JavaScript

先頭から取り出して削除：shift

const arr = [1, 2, 3];
const first = arr.shift();
console.log(first); // 1
console.log(arr);   // [2, 3]
JavaScript

ただし、先頭の操作は末尾より少しコストが高くなりやすいので、
「基本は push / pop」「必要なときにだけ shift / unshift」という感覚でいいです。

配列と for 文：まとめて処理する力

インデックスを使って for で回す

配列の真価は、「同じ処理を全要素に対して行う」ときに発揮されます。

const scores = [50, 60, 70];

for (let i = 0; i < scores.length; i++) {
  console.log(i, scores[i]);
}
JavaScript

このコードは、

i = 0 → scores[0] → 50
i = 1 → scores[1] → 60
i = 2 → scores[2] → 70

と順番に取り出して表示しています。

ここで i < scores.length にしておけば、
配列の長さが変わっても自動的に対応できるので安全です。

for…of を使った書き方（インデックスを気にしない）

番号（インデックス）を使わず、
「中身そのもの」だけを順番に扱いたい場合は、for...of が便利です。

const scores = [50, 60, 70];

for (const score of scores) {
  console.log(score);
}
JavaScript

この場合、

1回目：score → 50
2回目：score → 60
3回目：score → 70

というふうに、直接値だけを取り出してくれます。

ここが重要です。
「インデックスも使いたいとき」は普通の for、
「値だけ見られればいいとき」は for...of。
この使い分けができると、配列処理のコードがかなり読みやすくなります。

配列の中には「何でも」入る（が、揃っていると楽）

型が混ざっても怒られない

JavaScript の配列は、中身の型を揃えなくても動きます。

const mixed = [1, "hello", true, null, { a: 1 }, [10, 20]];
JavaScript

数値
文字列
真偽値
null
オブジェクト
配列

ぜんぶ一緒に入っていても構文的には OK です。

でも、現実的には「揃えたほうがいい」

コードの見通しやバグの少なさを考えると、
だいたい次のような配列が多く使われます。

数値だけの配列：[10, 20, 30]
文字列だけの配列：["太郎", "花子"]
同じ形のオブジェクトの配列：[{ id: 1, name: "太郎" }, { id: 2, name: "花子" }]

「中身が全部同じ種類」であればあるほど、
for 文などで処理するときに迷いがなくなります。

ここが重要です。
JavaScript は「何でもあり」を許してしまう言語だからこそ、
自分で「この配列には◯◯だけを入れる」とルールを決めておくと、コードの質がかなり変わります。

配列でよくやる操作のイメージをざっくり持っておく

「ある値が含まれているか」調べる：includes

const fruits = ["apple", "banana", "orange"];

console.log(fruits.includes("banana")); // true
console.log(fruits.includes("grape"));  // false
JavaScript

「文字列として並べる」：join

const fruits = ["apple", "banana", "orange"];

console.log(fruits.join(", ")); // "apple, banana, orange"
JavaScript

このレベルだけでも覚えておくと、
「配列をそのまま表示する」「検索する」といった場面でかなり役立ちます。

初心者向け：配列の本質だけぎゅっとまとめる

最後に、配列の核心だけ短く整理します。

配列は、「同じようなデータを、順番つきでひとまとめにするための箱の列」。
[] で作り、インデックス（0 始まり）でアクセスする。

arr.length で「何個入っているか」が分かり、最後の要素は arr[arr.length - 1] で取れる。

読み書きは arr[index]、末尾の追加は push、末尾から取り出すのは pop。

for 文や for...of と組み合わせることで、「全要素に同じ処理をする」ことが自然に書ける。

配列の中には本当は何でも入るが、
実務的には「中身の型（構造）を揃える」ほうが圧倒的に扱いやすい。

ここが重要です。
配列は、「1つの値」から「たくさんの値」へスケールするための土台です。
“これは配列にすべきデータか？” “インデックスと length でどう回せるか？”
と考える癖をつけると、コードの設計力が一段上がります。

もしよければ、次のような小さな練習をしてみてください。

  1. 好きなフルーツを 3つ入れた配列 fruits を作る
  2. fruits[0] と fruits[fruits.length - 1] を表示する
  3. fruits.push("新しいフルーツ") してから、for 文または for...of で全部を表示する

この一連の流れを自分の手で書けるようになると、
「配列の基本操作」はかなり身体に入ってきているはずです。

次へ
12
スポンサーリンク
タイトルとURLをコピーしました