JavaScriptの配列を作る方法を、初心者向けにやさしく解説
最初は「配列ってなんだろう？」と思うかもしれません。配列は、関連する値をひとまとめにして扱える「箱の並び」です。1つずつ変数を作るより、まとめて扱えるのでグッと楽になります。
配列の基本と作り方
配列とは何か
- ひとまとめの箱: 複数の値を順番に並べて入れる「箱の列」。
- 位置で取り出す: 最初の位置は 0（ゼロ）から始まるのがポイント。
- いろんな型が混ざる: 数字・文字・真偽値など、混ぜて入れてOK。
いちばん簡単な作り方（配列リテラル）
let fruits = ['apple', 'lemon', 'banana']; // 文字列の配列
let numbers = [10, 20, 30]; // 数値の配列
let mix = ['Yamada', 22, true]; // 混在もOK
- 位置で取り出す:
console.log(fruits[0]); // 'apple'
console.log(fruits[2]); // 'banana'
- 要素の数を知る（length）:
console.log(fruits.length); // 3
空の配列から始める
let todo = []; // 最初は空
todo.push('洗濯'); // 追加
todo.push('買い物');
console.log(todo); // ['洗濯', '買い物']
ちょっと踏み込むポイント
計算結果や変数も入れられる
let x = 5;
let data = [x, x + 3, x * 2];
console.log(data); // [5, 8, 10]
「穴あき（スパース）配列」も作れてしまう
let a = [100, , 300]; // 真ん中が空（undefined）
console.log(a[1]); // undefined
console.log(a.length); // 3（最後の位置＋1）
- 注意点: 要素数と「実際に値が入っている数」は一致しないことがある。初心者はできるだけ穴を作らないのが安全。
もうひとつの作り方：new Array（初心者は要注意）
let a = new Array('apple', 'lemon'); // 普通の配列
let b = new Array(5); // 長さ5の「穴だらけ」配列
console.log(b.length); // 5（中身は未定義）
- 覚えておくと良いこと:
new Array(5)は「要素が5個分確保された空の配列」。意図せず穴あきになりやすい。初心者は[]を使うのがわかりやすく安全。
よくある操作（作って確かめる例題つき）
例題1：買い物リストを作る
- 目的: 配列を作って、取り出して、数を確かめる。
let shopping = ['牛乳', 'パン', '卵'];
console.log(shopping[1]); // 'パン'
console.log(shopping.length); // 3
- ポイント: 位置は0から。lengthは「要素の数」。
例題2：後から増やす・書き換える
- 目的: pushで追加、インデックスで変更。
let tasks = ['勉強', '掃除'];
tasks.push('運動'); // 末尾に追加
tasks[0] = '英語の勉強'; // 0番目を書き換え
console.log(tasks); // ['英語の勉強', '掃除', '運動']
- ポイント: 配列は変更可能。末尾追加は
pushが定番。
例題3：穴あきにしないで追加したい
- 目的: インデックス指定で飛び番を作らない。
let nums = [10, 20];
nums[5] = 60; // いきなり5番目を作ると穴あきになる
console.log(nums.length); // 6
console.log(nums[2]); // undefined（穴）
- 正しい追加:
nums.push(30); // 順番どおりに増やす
例題4：計算で配列を作る
- 目的: 変数や式を要素に使う。
let base = 3;
let arr = [base, base + 1, base * 2, base ** 2];
console.log(arr); // [3, 4, 6, 9]
初心者がハマりやすい注意点
- インデックスは0から:
例）3つなら最後は2番目。うっかり1から始めない。 - lengthは「最後の位置＋1」:
穴あきがあると、実際の要素数とズレる。 - new Array(数値)のクセ:
空の枠だけできる。[]で作る方が安全。 - undefinedは「空欄」みたいなもの:
値が入っていない場所を読むと undefined が返る。
ミニ練習問題
練習1：プロフィール配列
- お題: 名前（文字列）、年齢（数値）、在住（文字列）を配列にして、2番目の要素を表示。
let profile = ['Tanaka', 29, 'Tokyo'];
console.log(profile[1]); // 29
練習2：ToDoを増やす
- お題: 空配列から始めて、3つのタスクを追加して、件数を表示。
let todo = [];
todo.push('メール返信');
todo.push('資料作成');
todo.push('散歩');
console.log(todo.length); // 3
練習3：穴あきを確認
- お題:
[100, , 200]の真ん中を表示して何が出るか確認し、穴を埋める。
let a = [100, , 200];
console.log(a[1]); // undefined
a[1] = 150; // 穴を埋める
console.log(a); // [100, 150, 200]
まとめと次の一歩
- 基本は
[]を使う: シンプルで安全。 - 0から数える: インデックスの起点に注意。
- 穴あきに注意:
pushで順に追加するのが安心。 - 変数や式も使える: 柔軟に要素を作れる。
次は「配列の操作（追加・削除・検索・並び替え）」に進むと、ぐっと使いこなせるようになります。