はじめてのTypeScriptプログラミング入門 30日コース | TypeScriptとプログラミング基礎 － Day 7：第1週総合練習

TypeScript 30日で身につけるTypeScript
スポンサーリンク
スポンサーリンク

Day 7：第1週総合練習で「全部つながる」感覚をつかむ

Day 7は、第1週の総仕上げです。 ここまで学んできた 変数・条件分岐・ループ・配列 を全部まとめて使い、ひとつの「成績管理プログラム」を作っていきます。 雑誌の特集記事を読むような気持ちで、「あ、この書き方はDay 4でやった条件分岐だ」「このループはDay 5のパターンだ」と、頭の中でつながりを感じながら読み進めてみてください。

目標イメージ：どんな成績管理プログラムを作るか

今回作るプログラムは、次のような機能を持ちます。

  • 学生名を管理する
  • 点数一覧を管理する
  • 合計点を計算する
  • 平均点を計算する
  • 最高点を求める
  • 最低点を求める
  • 合格判定をする

さらに、練習課題として次のことも行います。

  • 5人分の点数を管理する
  • 平均点を計算する
  • 80点以上だけ表示する
  • 60点未満を抽出する
  • 合格者数を計算する

到達目標は、

変数・条件分岐・ループ・配列を組み合わせられる。 という状態になることです。

Step 1：データの設計をシンプルに考える

まずは、「どんなデータを扱うか」を整理します。

学生と点数のイメージ

  • 学生名：string
  • 1人分の点数一覧：number[]
  • 複数人分の点数一覧：number[][]（「数値の配列の配列」）

最初は 1人分から始めて、あとで 5人分に広げていきます。

Step 2：1人分の成績管理プログラムの骨組み

まずは、1人分の成績を扱うシンプルなバージョンを書いてみます。

// day7-single-student.ts
// 1人分の成績管理プログラム

// 学生名（文字列型）
const studentName: string = "Alice";

// 点数一覧（例：国語・数学・英語・理科・社会）
const scores: number[] = [80, 90, 75, 88, 92];

console.log("学生名:", studentName);
console.log("点数一覧:", scores);
TypeScript

ここまでで、

  • 変数（studentName, scores）
  • 配列（number[]）

を使って、基本的なデータを用意できました。

Step 3：合計点と平均点を計算する

次に、点数一覧から 合計点 と 平均点 を計算します。

合計点の計算ロジック

  • 最初に sum = 0 を用意しておく
  • ループで配列を回しながら、sum += score として足していく
let sum: number = 0; // 合計点を入れる変数。最初は 0 からスタート

for (const score of scores) {
  sum += score; // 合計に点数を足していく
}

console.log("合計点:", sum);
TypeScript

平均点の計算ロジック

  • 合計点 ÷ 点数の数（scores.length）
const average: number = sum / scores.length;

console.log("平均点:", average);
TypeScript

深掘りポイント：

  • 「ループの外で初期値を用意して」「ループの中で少しずつ更新する」という流れは、Day 5で練習した「合計」のパターンそのものです。
  • scores.length は「何科目分の点数があるか」を教えてくれるので、平均点の計算に欠かせません。

Step 4：最高点・最低点を求める

次は、点数一覧の中から いちばん高い点 と いちばん低い点 を探します。

最高点のロジック（手書き版）

  • 最初に「仮の最高点」として、配列の最初の要素を入れておく
  • ループで回しながら、「今見ている点数が最高点より高ければ更新する」
let maxScore: number = scores[0]; // 仮の最高点として最初の要素を入れる

for (const score of scores) {
  if (score > maxScore) {
    maxScore = score; // より高い点が見つかったら更新
  }
}

console.log("最高点:", maxScore);
TypeScript

最低点のロジック（手書き版）

let minScore: number = scores[0]; // 仮の最低点として最初の要素を入れる

for (const score of scores) {
  if (score < minScore) {
    minScore = score; // より低い点が見つかったら更新
  }
}

console.log("最低点:", minScore);
TypeScript

深掘りポイント：

  • 最大値・最小値のロジックは、ほぼ対称的です。
  • 「条件を変えるだけで、別の意味の検索になる」という感覚を持っておくと、配列処理の応用がしやすくなります。

Step 5：合格判定をする

ここでは、シンプルに 平均点が60点以上なら合格 としてみます。

合格判定のロジック

const isPassed: boolean = average >= 60; // 合格ラインは 60 点以上

if (isPassed) {
  console.log("合格判定: 合格です。");
} else {
  console.log("合格判定: 不合格です。");
}
TypeScript

深掘りポイント：

  • average >= 60 という条件が、「合格ライン」をそのままコードで表現しています。
  • Day 4で学んだ「条件分岐」のパターンが、そのままここで生きています。

Step 6：5人分の点数を管理する

ここからが、Day 7の本番です。 5人分の点数をまとめて管理して、平均点や合格者数などを計算していきます。

データ構造の選び方

今回は、次のような形でデータを持ちます。

  • 学生名の配列：string[]
  • 各学生の点数一覧の配列：number[][]（「数値の配列の配列」）
// day7-multi-students.ts
// 5人分の成績管理プログラム

// 学生名一覧
const studentNames: string[] = ["Alice", "Bob", "Charlie", "Diana", "Edward"];

// 各学生の点数一覧（例：国語・数学・英語・理科・社会）
const studentScores: number[][] = [
  [80, 90, 75, 88, 92], // Alice
  [60, 70, 65, 58, 62], // Bob
  [95, 85, 90, 93, 88], // Charlie
  [50, 55, 45, 60, 52], // Diana
  [78, 82, 80, 76, 79], // Edward
];

console.log("学生名一覧:", studentNames);
console.log("点数一覧:", studentScores);
TypeScript

深掘りポイント：

  • number[] が「1人分の点数一覧」、それが5人分集まると number[][] になります。
  • 「配列の中に配列が入っている」という構造は、最初は少しだけ不思議に感じるかもしれませんが、慣れるととても強力な表現になります。

Step 7：各学生の合計点・平均点・最高点・最低点を計算する

ここで、5人それぞれについて、成績をまとめて計算して表示します。

各学生の成績計算ロジック

  • 外側のループで「学生」を回す
  • 内側のループで「その学生の点数」を回して合計・最高点・最低点を計算
  • 合計 ÷ 科目数で平均点を求める
  • 平均点から合格判定をする
console.log("=== 各学生の合計点・平均点・最高点・最低点・合格判定 ===");

for (let i = 0; i < studentNames.length; i++) {
  const name: string = studentNames[i];      // i 番目の学生名
  const scores: number[] = studentScores[i]; // i 番目の学生の点数一覧

  let sum: number = 0;
  let maxScore: number = scores[0];
  let minScore: number = scores[0];

  // 点数一覧をループして、合計・最高点・最低点を計算
  for (const score of scores) {
    sum += score;

    if (score > maxScore) {
      maxScore = score;
    }

    if (score < minScore) {
      minScore = score;
    }
  }

  const average: number = sum / scores.length;
  const isPassed: boolean = average >= 60;

  console.log(`\n${name} の成績:`);
  console.log("  点数一覧:", scores);
  console.log("  合計点:", sum);
  console.log("  平均点:", average);
  console.log("  最高点:", maxScore);
  console.log("  最低点:", minScore);

  if (isPassed) {
    console.log("  合格判定: 合格");
  } else {
    console.log("  合格判定: 不合格");
  }
}
TypeScript

深掘りポイント：

  • 外側の for で「学生」を回し、内側の for...of で「点数」を回しています。
  • 「ループの中にループがある」形は、最初は少しだけ頭を使いますが、慣れると自然に読めるようになります。
  • ここまでで、変数・条件分岐・ループ・配列 がすべて登場しています。

Step 8：平均点を計算（練習課題）

練習課題のひとつ「平均点を計算」は、すでに上で実装しています。 ここでは、平均点だけをシンプルに表示するバージョンも書いておきます。

console.log("\n=== 各学生の平均点一覧 ===");

for (let i = 0; i < studentNames.length; i++) {
  const name: string = studentNames[i];
  const scores: number[] = studentScores[i];

  let sum: number = 0;

  for (const score of scores) {
    sum += score;
  }

  const average: number = sum / scores.length;

  console.log(`${name} の平均点: ${average}`);
}
TypeScript

Step 9：80点以上だけ表示（練習課題）

次は、「平均点が80点以上の学生だけ」を表示してみます。

console.log("\n=== 平均点が80点以上の学生 ===");

for (let i = 0; i < studentNames.length; i++) {
  const name: string = studentNames[i];
  const scores: number[] = studentScores[i];

  let sum: number = 0;

  for (const score of scores) {
    sum += score;
  }

  const average: number = sum / scores.length;

  if (average >= 80) {
    console.log(`${name}（平均点: ${average}）`);
  }
}
TypeScript

深掘りポイント：

  • 「平均点を計算するロジック」は同じで、条件だけを変えています。
  • 条件を変えるだけで、「80点以上」「70点以上」「合格ライン」など、いろいろなフィルタリングができます。

Step 10：60点未満を抽出（練習課題）

次は、「平均点が60点未満の学生」を抽出して表示します。

console.log("\n=== 平均点が60点未満の学生 ===");

for (let i = 0; i < studentNames.length; i++) {
  const name: string = studentNames[i];
  const scores: number[] = studentScores[i];

  let sum: number = 0;

  for (const score of scores) {
    sum += score;
  }

  const average: number = sum / scores.length;

  if (average < 60) {
    console.log(`${name}（平均点: ${average}）`);
  }
}
TypeScript

深掘りポイント：

  • average < 60 という条件が、「不合格ライン」をそのままコードで表現しています。
  • Day 4で学んだ「条件分岐」が、ここでもそのまま使われています。

Step 11：合格者数を計算（練習課題）

最後に、「平均点が60点以上の学生が何人いるか」を数えてみます。

合格者数のロジック

  • 最初に passedCount = 0 を用意しておく
  • 各学生の平均点を計算し、条件を満たしたら passedCount++ する
console.log("\n=== 合格者数の計算 ===");

let passedCount: number = 0;

for (let i = 0; i < studentNames.length; i++) {
  const scores: number[] = studentScores[i];

  let sum: number = 0;

  for (const score of scores) {
    sum += score;
  }

  const average: number = sum / scores.length;

  if (average >= 60) {
    passedCount++; // 合格者を1人カウント
  }
}

console.log("合格者数:", passedCount, "人");
TypeScript

深掘りポイント：

  • 「合計を計算する」ときと同じように、「カウントを増やす」という形で考えます。
  • passedCount++ は、「合格者が1人増えた」という意味です。
  • こうした「カウンタ変数」は、ループと条件分岐の組み合わせでよく登場します。

Day 7 総合練習テンプレート

最後に、今日の内容をひとつのファイルにまとめたテンプレートを載せておきます。 このままコピーして、点数や合格ラインを変えたり、学生を増やしたりしながら、自分なりの成績管理プログラムに育ててみてください。

// day7-practice.ts
// Day 7：第1週総合練習 成績管理プログラム

// 学生名一覧
const studentNames: string[] = ["Alice", "Bob", "Charlie", "Diana", "Edward"];

// 各学生の点数一覧（例：国語・数学・英語・理科・社会）
const studentScores: number[][] = [
  [80, 90, 75, 88, 92], // Alice
  [60, 70, 65, 58, 62], // Bob
  [95, 85, 90, 93, 88], // Charlie
  [50, 55, 45, 60, 52], // Diana
  [78, 82, 80, 76, 79], // Edward
];

console.log("=== 学生一覧と点数 ===");
console.log("学生名:", studentNames);
console.log("点数一覧:", studentScores);

console.log("\n=== 各学生の合計点・平均点・最高点・最低点・合格判定 ===");

for (let i = 0; i < studentNames.length; i++) {
  const name: string = studentNames[i];
  const scores: number[] = studentScores[i];

  let sum: number = 0;
  let maxScore: number = scores[0];
  let minScore: number = scores[0];

  for (const score of scores) {
    sum += score;

    if (score > maxScore) {
      maxScore = score;
    }

    if (score < minScore) {
      minScore = score;
    }
  }

  const average: number = sum / scores.length;
  const isPassed: boolean = average >= 60;

  console.log(`\n${name} の成績:`);
  console.log("  点数一覧:", scores);
  console.log("  合計点:", sum);
  console.log("  平均点:", average);
  console.log("  最高点:", maxScore);
  console.log("  最低点:", minScore);
  console.log("  合格判定:", isPassed ? "合格" : "不合格");
}

console.log("\n=== 平均点が80点以上の学生 ===");

for (let i = 0; i < studentNames.length; i++) {
  const name: string = studentNames[i];
  const scores: number[] = studentScores[i];

  let sum: number = 0;

  for (const score of scores) {
    sum += score;
  }

  const average: number = sum / scores.length;

  if (average >= 80) {
    console.log(`${name}（平均点: ${average}）`);
  }
}

console.log("\n=== 平均点が60点未満の学生 ===");

for (let i = 0; i < studentNames.length; i++) {
  const name: string = studentNames[i];
  const scores: number[] = studentScores[i];

  let sum: number = 0;

  for (const score of scores) {
    sum += score;
  }

  const average: number = sum / scores.length;

  if (average < 60) {
    console.log(`${name}（平均点: ${average}）`);
  }
}

console.log("\n=== 合格者数の計算 ===");

let passedCount: number = 0;

for (let i = 0; i < studentNames.length; i++) {
  const scores: number[] = studentScores[i];

  let sum: number = 0;

  for (const score of scores) {
    sum += score;
  }

  const average: number = sum / scores.length;

  if (average >= 60) {
    passedCount++;
  }
}

console.log("合格者数:", passedCount, "人");
TypeScript

Day 7のまとめ：つながった瞬間が「第1週クリア」のサイン

Day 7では、

  • 変数でデータを持ち
  • 配列で複数人・複数科目の点数をまとめ
  • ループで合計・平均・最高点・最低点を計算し
  • 条件分岐で合格判定やフィルタリングを行う

という流れを、一つの成績管理プログラムの中で体験しました。

「ここで使っているループはDay 5でやった形だな」「この条件分岐はDay 4の応用だな」「配列はDay 6で練習したやつだ」と、頭の中でつながりを感じられたら、第1週の到達目標はしっかりクリアできています。

このプログラムは、ぜひ自分なりにアレンジしてみてください。 科目を増やす、合格ラインを変える、合格者一覧を表示する——そうやって少しずつ“自分のプログラム”にしていくことが、次のステップへのいちばんの近道になります。

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