JavaScript | 1 日 60 分 × 7 日アプリ学習：超初級編

JavaScript
スポンサーリンク

4日目のゴールと今日のテーマ

4日目のテーマは「複数のデータをまとめて扱う力を手に入れること」です。
ここまでで、1つの値（変数）、条件分岐、関数は触ってきました。
今日はそこに「配列」と「繰り返し（ループ）」を足していきます。

今日のゴールはこうです。
配列とは何かを、自分の言葉で説明できる。
配列に値を追加したり、取り出したりできる。
for 文を使って、配列の中身を順番に処理できる。

ここまで行けたら、超初級4日目としてかなりいい仕上がりです。

配列とは何かをイメージでつかむ

「同じ種類の値を並べて持つための箱」

これまでの変数は、1つの値しか持てませんでした。

let score1 = 80;
let score2 = 90;
let score3 = 75;
JavaScript

こうやってバラバラに持つと、「全部の合計を出したい」ときに大変です。
そこで出てくるのが「配列」です。

配列は、「同じ種類の値を、順番付きで並べて持つための箱」です。
イメージとしては、「番号付きの引き出しが並んだ棚」です。

配列の基本的な書き方

配列は、[]（角かっこ）を使って書きます。

let scores = [80, 90, 75];
JavaScript

この1行で、

score1
score2
score3

とバラバラに持っていたものを、scores という1つの変数にまとめて持てます。

中身を console に出してみると、

console.log(scores);  // [80, 90, 75]
JavaScript

のように表示されます。

配列の要素を取り出す：インデックスの考え方

「0から始まる番号」でアクセスする

配列の中の1つ1つの値を「要素」と呼びます。
要素には「インデックス」と呼ばれる番号がついています。

ここが少しだけややこしいのですが、
JavaScriptの配列は「0から始まる番号」です。

let scores = [80, 90, 75];

// 0番目
console.log(scores[0]);  // 80

// 1番目
console.log(scores[1]);  // 90

// 2番目
console.log(scores[2]);  // 75
JavaScript

ここでの重要ポイントは、「最初の要素は 1 番目ではなく 0 番目」ということです。
これは最初は違和感がありますが、何度か触っているうちに慣れます。

配列の長さを調べる length プロパティ

配列が「何個の要素を持っているか」は、length でわかります。

let scores = [80, 90, 75];

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

この length は、後で for 文と組み合わせるときにめちゃくちゃよく使います。

配列に値を追加する：push の基本

push で「末尾に追加」する

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

let scores = [80, 90];

scores.push(75);

console.log(scores);  // [80, 90, 75]
JavaScript

push(値) は、「配列の一番うしろに、その値を追加する」という意味です。

もう1つ追加してみます。

scores.push(60);
console.log(scores);  // [80, 90, 75, 60]
JavaScript

ここでのポイントは、

配列は「あとから増やせる」
push は「末尾に足す」

という感覚を持つことです。

例題：買い物かごに商品を追加するイメージ

配列を「買い物かご」としてイメージしてみましょう。

let cart = [];

cart.push("りんご");
cart.push("バナナ");
cart.push("みかん");

console.log(cart);  // ["りんご", "バナナ", "みかん"]
JavaScript

最初は空の配列 [] からスタートして、
push でどんどん商品を入れていくイメージです。

繰り返し処理 for 文の基本

「同じ処理を何度もやる」ための仕組み

配列の中身を1つずつ処理したいとき、
こんな書き方をすると大変です。

let scores = [80, 90, 75];

console.log(scores[0]);
console.log(scores[1]);
console.log(scores[2]);
JavaScript

要素が3つならまだいいですが、10個、100個になったら地獄です。
そこで使うのが「for 文」です。

for 文は、「同じ処理を、条件に応じて何度も繰り返す」ための構文です。

for 文の基本形

形はこうです。

for (初期化; 条件; 更新) {
  // 繰り返したい処理
}
JavaScript

いきなり全部を理解しようとしなくて大丈夫です。
まずは「1から5までの数字を表示する」例を見てみましょう。

for (let i = 1; i <= 5; i = i + 1) {
  console.log(i);
}
JavaScript

実行すると、

1
2
3
4
5

と表示されます。

ここでの3つの部分を、ゆっくり分解してみます。

初期化：let i = 1;
最初に一度だけ実行される。「i という変数を 1 でスタートさせる」という意味。

条件：i <= 5;
「i が 5 以下の間は、繰り返しを続ける」という意味。

更新：i = i + 1;
1回処理が終わるたびに、「i に 1 を足す」という意味。

流れとしては、

i を 1 にする
条件をチェック（1 <= 5 → OK）
中の処理を実行（console.log(1)）
i に 1 を足して 2 にする
条件をチェック（2 <= 5 → OK）
…
i が 6 になったとき、条件（6 <= 5）が false になり、ループ終了

という感じです。

配列と for 文を組み合わせる

配列の全要素を順番に表示する

ここからが今日の本番です。
配列と for 文を組み合わせて、「配列の中身を全部表示する」コードを書いてみます。

let scores = [80, 90, 75];

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

実行すると、

80
90
75

と表示されます。

ここでのポイントを整理します。

インデックスは 0 から始まるので、i = 0 からスタートしている。
i < scores.length とすることで、「配列の長さより小さい間だけ」繰り返している。
中では scores[i] として、「i 番目の要素」を取り出している。

このパターンは、配列を扱うときの「超基本形」です。
何度も書いて、体に覚えさせる価値があります。

合計点を計算する例

次に、「配列の中身の合計を計算する」例をやってみましょう。

let scores = [80, 90, 75];

let sum = 0;

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

console.log("合計点は " + sum + " 点です。");
JavaScript

実行すると、

合計点は 245 点です。

のようになります。

ここでの流れを丁寧に追ってみます。

最初に sum = 0; で、合計のスタートを 0 にしておく。
i = 0 のとき、sum = sum + scores[0]; → sum = 0 + 80; → sum は 80。
i = 1 のとき、sum = sum + scores[1]; → sum = 80 + 90; → sum は 170。
i = 2 のとき、sum = sum + scores[2]; → sum = 170 + 75; → sum は 245。
i が 3 になったとき、i < scores.length（3 < 3）は false なのでループ終了。

この「sum に足していく」というパターンは、配列の合計を出すときの定番です。

配列＋関数＋for 文で「ちょっとアプリっぽく」する

平均点を計算する関数を作る

さっきの合計計算を、関数にしてみましょう。

function calcAverage(scores) {
  let sum = 0;

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

  let average = sum / scores.length;
  return average;
}
JavaScript

これを使うと、こう書けます。

let scores = [80, 90, 75];

let avg = calcAverage(scores);
console.log("平均点は " + avg + " 点です。");
JavaScript

ここでの重要ポイントは、

配列を「関数の引数」として渡している。
関数の中で for 文を使って、配列の中身を全部処理している。
結果（平均点）を return で返している。

という流れです。

条件分岐と組み合わせて「合否判定」をする

さらに、条件分岐も組み合わせてみます。

仕様はこうです。

平均点が 80 点以上なら「合格」。
それ以外なら「不合格」。

function calcAverage(scores) {
  let sum = 0;

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

  let average = sum / scores.length;
  return average;
}

function printResult(scores) {
  let avg = calcAverage(scores);

  console.log("平均点は " + avg + " 点です。");

  if (avg >= 80) {
    console.log("合格です！");
  } else {
    console.log("不合格です…");
  }
}

let scoresA = [90, 85, 80];
let scoresB = [70, 60, 75];

printResult(scoresA);
printResult(scoresB);
JavaScript

実行すると、例えばこんな感じになります。

平均点は 85 点です。
合格です！
平均点は 68.33333333333333 点です。
不合格です…

ここまで来ると、もう立派な「ミニ判定アプリ」です。

4日目のまとめと、明日へのつなぎ

今日やったことを、言葉で整理します。

配列は「同じ種類の値を、順番付きでまとめて持つための箱」。
インデックスは 0 から始まり、配列[0] が最初の要素。
length で配列の長さがわかる。
push で配列の末尾に要素を追加できる。
for 文は「同じ処理を何度も繰り返す」ための構文で、配列と組み合わせると威力を発揮する。
配列＋for 文で「全要素の表示」「合計」「平均」が計算できる。
配列を関数の引数に渡して、関数の中で for 文を回すことで、ロジックをきれいにまとめられる。

明日（5日目）は、ここに「文字列の配列」「簡単なメニュー表示」「ユーザー入力（prompt）」などを足して、
「ちょっとしたリストアプリ」に近いものを作っていきます。

最後に一つだけ聞きたい。

今日の中で、「あ、これちょっと気持ちいいな」と感じたのはどこでしたか？
配列に push して中身が増えていく感じか、for 文でスッと全要素を処理できた瞬間か。
その「気持ちいい」と感じたところが、あなたと「データを扱う力」の接点です。
そこを意識しながら、5日目に進んでいきましょう。

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