JavaScriptの配列の基本
「配列」は、関連する複数の値をひとまとめにして扱うための箱です。1人ずつ変数を作るより、”人の数が増えても同じ書き方で処理できる”のが最大の魅力です。
配列ってなに？
- イメージ: ラベル付きの連続した引き出し。0番目、1番目…と番号で取り出す。
- 作り方（おすすめの基本形）:
const scores = [85, 78, 92]; // 配列リテラル - 取り出し方:
console.log(scores[0]); // 85（0番目） console.log(scores[1]); // 78 console.log(scores[2]); // 92 - 長さを知る:
console.log(scores.length); // 3
0から数える点に注意。3つ入っていても最後の要素は「2番目」です。
まずは手を動かす例題
合計と平均を求める
- ねらい: 配列と繰り返し処理の基本に慣れる
const scores = [85, 78, 92, 88, 90];
let sum = 0;
for (let i = 0; i < scores.length; i++) {
sum += scores[i];
}
const average = sum / scores.length;
console.log('合計:', sum); // 合計: 433
console.log('平均:', average); // 平均: 86.6
一番高い点数を見つける
- ねらい: 比較しながら配列を走査する
const scores = [85, 78, 92, 88, 90];
let max = scores[0];
for (let i = 1; i < scores.length; i++) {
if (scores[i] > max) {
max = scores[i];
}
}
console.log('最高点:', max); // 最高点: 92
60点未満だけを取り出す（絞り込み）
- ねらい: 条件に合う要素を集める
const scores = [55, 78, 62, 48, 90];
const fails = [];
for (let i = 0; i < scores.length; i++) {
if (scores[i] < 60) {
fails.push(scores[i]); // 条件に合うものを追加
}
}
console.log('不合格:', fails); // 不合格: [55, 48]
よく使う操作
- 要素の追加（末尾に足す）:
const fruits = ['apple', 'banana'];
fruits.push('orange'); // ['apple', 'banana', 'orange']
- 要素の削除（末尾を取る）:
const last = fruits.pop(); // last = 'orange', fruits = ['apple', 'banana']
- 先頭に追加・削除:
fruits.unshift('grape'); // 先頭に追加
const first = fruits.shift(); // 先頭を削除して取り出す
- 存在チェック（何番目か）:
const idx = fruits.indexOf('banana'); // 1（なければ -1）
const hasBanana = fruits.includes('banana'); // true
push/popは「末尾」、unshift/shiftは「先頭」。どこで出し入れするかが違います。
繰り返しの書き方を選ぶ
- インデックスで回す（自由度が高い）:
for (let i = 0; i < fruits.length; i++) {
console.log(i, fruits[i]);
}
- 要素だけをシンプルに回す:
for (const fruit of fruits) {
console.log(fruit);
}
- 配列の便利メソッド（初心者も触ってみよう）:
forEach（全部実行）:
fruits.forEach((fruit, i) => {
console.log(i, fruit);
});
map（変換して新しい配列）:
const upper = fruits.map(fruit => fruit.toUpperCase());
// ['APPLE', 'BANANA', ...]
filter（絞り込み）:
const longNames = fruits.filter(fruit => fruit.length >= 6);
まずはforかfor…ofで慣れて、次にforEach/map/filterへ。書き心地がどんどん楽になります。
よくあるハマりどころ
- インデックスは0から: 最後の要素は length – 1。
- 空の配列にアクセスしてもundefined: 要素がない場所は中身がない。
- 配列を文字列として表示するとき: joinを使うと読みやすい。
const tags = ['js', 'web', 'array'];
console.log(tags.join(', ')); // "js, web, array"
練習問題で定着させる
- 問題1: 数字の配列から偶数だけを取り出した新しい配列を作る
const nums = [3, 8, 11, 20, 7, 14];
// 期待結果: [8, 20, 14]
ヒント: for、if、push を使う。慣れてきたら filter に挑戦。
- 問題2: 名前の配列から「3文字以上の名前」をすべて大文字にして出力
const names = ['ai', 'sora', 'ren', 'mio'];
// 期待出力: SORA, REN, MIO
ヒント: filterで条件→mapで変換→forEachで出力。
- 問題3: 最高点と最低点、平均をまとめて表示
const scores = [76, 88, 93, 58, 81];
// 期待: max=93, min=58, ave=79.2
ヒント: max/minは比較しながら更新。平均は合計/length。
次の一歩
- 多次元配列: 配列の中に配列（例：クラスごとの点数）。
- オブジェクトの配列: 名前や点数など複数属性をまとめる。
const students = [
{ name: 'Yuki', score: 85 },
{ name: 'Ken', score: 92 },
];
const top = students.filter(s => s.score >= 90).map(s => s.name);
console.log(top); // ['Ken']
