5.配列とループ

学習目標

• 配列を使って複数の値をまとめて管理できる
• 配列とループを組み合わせて、全要素に対する処理（合計、最大値など）を書ける

---

1. 配列

ここまでの変数は1つの値しか入れられませんでした。しかし実際のプログラムでは「5人分の点数」「商品リスト」「曜日の一覧」のように、同じ種類のデータをまとめて扱う場面が多くあります。配列 はこのような場面で使うデータ構造です。

1-1. 配列

5人分のテストの点数を管理する場合、変数を5つ用意する方法が考えられます。

arrays.js

const score1 = 80;
const score2 = 65;
const score3 = 90;
const score4 = 70;
const score5 = 85;

しかし、人数が50人になれば変数が50個必要です。「全員の合計を計算する」処理も、50個の変数を1つずつ足していくことになります。

配列を使えば、これらの値を1つの変数にまとめて入れられます。

const 変数名 = [値1, 値2, 値3, ...];

arrays.js

const scores = [80, 65, 90, 70, 85];
console.log(scores); // [80, 65, 90, 70, 85]

[] の中にカンマで区切って値を並べます。これで scores という1つの変数に5つの値が入りました。配列には文字列など、どのデータ型の値でも入れられます。

arrays.js

const colors = ["赤", "青", "緑", "黄"];

1-2. インデックス

配列の各要素には 0 から始まる番号がついています。この番号をインデックスと呼びます。たとえば scores 配列の場合、各要素とインデックスの対応は次のようになります。

インデックス	0	1	2	3	4
要素	80	65	90	70	85

要素にアクセスするには 配列名[インデックス] と書きます。

arrays.js

const scores = [80, 65, 90, 70, 85];

console.log(scores[0]); // 80
console.log(scores[1]); // 65
console.log(scores[2]); // 90
console.log(scores[3]); // 70
console.log(scores[4]); // 85

Warning

最後の要素は scores[4] であり、scores[5] は存在しません。存在しないインデックスにアクセスすると undefined と表示されます。

1-3. .length

.length で配列の要素数を取得できます。

arrays.js

const scores = [80, 65, 90, 70, 85];
console.log(scores.length); // 5

Info

最後の要素のインデックスは 配列.length - 1 です。

1-4. .push()

.push() で配列の末尾に要素を追加できます。

arrays.js

const scores = [80, 65, 90];
console.log(scores.length); // 3

scores.push(70);
scores.push(85);

console.log(scores);        // [80, 65, 90, 70, 85]
console.log(scores.length); // 5

Info

const で宣言した配列でも、.push() で要素を追加できます。const が禁止するのは変数自体の再代入（scores = [1, 2, 3]）であり、配列の要素の追加や変更はできます。

2. 配列とループ

配列とループを組み合わせると、全要素に対して同じ処理を行えます。ここでは全要素の出力、合計の計算、条件による絞り込み、最大値の探索を扱います。

2-1. 全要素の出力

for ループの変数 i を配列のインデックスとして使うと、全要素に順番にアクセスできます。

arrays.js

const colors = ["赤", "青", "緑", "黄"];

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

赤
青
緑
黄

i	colors[i]
0	"赤"
1	"青"
2	"緑"
3	"黄"

i が colors.length（4）に達するとループが終了します。

Info

for (let i = 0; i < 配列.length; i++) は、配列を先頭から順に処理するときの定型的な書き方です。配列の要素数が変わっても、.length が自動的に対応します。

2-2. 合計値の計算

配列の全要素を足し合わせて合計値を求めます。合計を保持する変数 sum を用意し、ループで各要素を順に足していきます。

arrays.js

const scores = [80, 65, 90, 70, 85];
let sum = 0;

for (let i = 0; i < scores.length; i++) {
  sum = sum + scores[i];
}

console.log(sum); // 390

ループ: 合計値の計算では sum = sum + i で i を足していました。ここでは sum = sum + scores[i] で、i 番目の要素を足しています。

i	scores[i]	sum + scores[i]	sum
0	80	0 + 80	80
1	65	80 + 65	145
2	90	145 + 90	235
3	70	235 + 70	305
4	85	305 + 85	390

2-3. 条件による絞り込み

ループの中で各要素を比較すると、条件を満たす要素だけを処理できます。次のプログラムは、80 点以上の点数だけを出力します。

arrays.js

const scores = [80, 65, 90, 70, 85];

for (let i = 0; i < scores.length; i++) {
  if (scores[i] >= 80) {
    console.log(scores[i]);
  }
}

80
90
85

scores[i] >= 80 は各要素を 80 と比較し、80 以上かどうかを判定しています。条件を満たす要素だけが出力されます。

i	scores[i]	scores[i] >= 80	出力
0	80	true	80
1	65	false	—
2	90	true	90
3	70	false	—
4	85	true	85

2-4. 最大値の探索

ループの中で各要素を暫定の最大値と比較すると、配列全体の最大値を見つけることができます。この処理は次の手順で実現します。

1. 暫定の最大値を決める — 比較の基準が必要なので、最初の要素 numbers[0] を max に代入します。

2. 各要素と max を比較する — 2番目以降の要素を順に max と比較し、max より大きい要素が見つかったら max を更新します。if (numbers[i] > max) がこの比較にあたります。

3. ループ終了時に max が最大値 — すべての要素と比較し終えると、max には配列全体で最も大きい値が残っています。

arrays.js

const numbers = [34, 72, 15, 88, 43];
let max = numbers[0];

for (let i = 1; i < numbers.length; i++) {
  if (numbers[i] > max) {
    max = numbers[i];
  }
}

console.log(max); // 88

max の変化をトレースします。

i	numbers[i]	numbers[i] > max	max
—	—	—	34
1	72	true	72
2	15	false	72
3	88	true	88
4	43	false	88

max は numbers[0] で初期化されているので、numbers[0] と max を比較しても結果は変わりません。そのためループは i = 1 から始めています。

Info

ある問題を解決するための手順をアルゴリズムと呼びます。アルゴリズムには次の特徴があります。

• 入力と出力がある（この例では配列が入力、最大値が出力）
• 手順が明確で、誰が実行しても同じ結果になる
• 有限のステップで必ず終了する

3. 演習

演習: 配列とループ