はじめてのTypeScriptプログラミング入門 30日コース | TypeScriptとプログラミング基礎 － Day 5：繰り返し

TypeScript 30日で身につけるTypeScript
スポンサーリンク
スポンサーリンク
  1. Day 5：繰り返しで「同じ処理を何度も回す」感覚をつかむ
  2. 繰り返しの基本イメージ
  3. for 文：いちばん基本の「回数指定のループ」
    1. 1〜100までの数字を表示する
  4. 偶数だけ表示する（for + 条件分岐）
    1. 偶数判定のロジック
  5. 3の倍数だけ表示する
    1. 3の倍数判定のロジック
  6. 合計を計算する：ループで「足し合わせる」
    1. 合計のロジック
  7. while 文：条件が true の間、ずっと回す
    1. 1〜100までを while で表示する
  8. do…while 文：最低1回は実行するループ
    1. 1〜100までを do…while で表示する
  9. for…of と for…in：配列やオブジェクトを回す
    1. for…of：配列の「中身」を順番に取り出す
    2. for…in：オブジェクトの「キー」を順番に取り出す
  10. break と continue：ループの流れをコントロールする
    1. break：ループを途中で抜ける
    2. continue：その回だけスキップする
  11. 実践テンプレート：1〜100表示＋偶数＋3の倍数＋合計
  12. Day 5のまとめ
  13. Day 5：繰り返しで「流れをコントロールする」感覚を身につける
  14. 繰り返しの基本イメージをもう一度整理する
    1. 繰り返し構文の役割
  15. 1〜10の合計を求める：for 文で「足し合わせる」
    1. 合計の考え方
  16. 1〜100の偶数合計：条件付きで足し合わせる
    1. 偶数合計の考え方
  17. 5の倍数表示：条件に合うものだけを出力する
    1. 5の倍数の考え方
  18. 10から1までカウントダウン：逆方向のループ
    1. カウントダウンの考え方
  19. 条件に一致したらループ終了：break の使い方
    1. 「見つかったら終わり」の考え方
  20. while 文で同じことをやってみる
    1. while で 1〜10の合計
    2. while + break で「条件に一致したら終了」
  21. do…while の軽い体験：最低1回は実行するループ
  22. for…of / for…in のイメージを少しだけ
    1. for…of：配列の要素を回す
    2. for…in：オブジェクトのキーを回す
  23. Day 5 練習まとめテンプレート
  24. Day 5のまとめ

Day 5：繰り返しで「同じ処理を何度も回す」感覚をつかむ

Day 5では、プログラムの世界でとてもよく使われる「繰り返し」を扱います。 1〜100までの数字を表示しながら、偶数だけ表示したり、3の倍数だけ表示したり、合計を計算したり——まさに「ループの基本セット」を一気に体験していきます。

繰り返しの基本イメージ

まず、ざっくりイメージをつかんでおきます。

  • for：回数がはっきりしているときの繰り返し
  • while：条件が true の間、ずっと繰り返す
  • do…while：最低1回は実行してから、条件を見て繰り返す
  • for…of：配列など「中身の要素」を順番に取り出す
  • for…in：オブジェクトなど「キー」を順番に取り出す
  • break：ループを途中で抜ける
  • continue：その回だけスキップして、次のループに進む

これらを、1〜100の数字を題材にしながら、少しずつ手触りよく見ていきます。

for 文：いちばん基本の「回数指定のループ」

1〜100までの数字を表示する

まずは、for 文で「1から100まで」を表示してみます。

// for-loop-basic.ts
// for 文で 1〜100 を表示する

for (let i = 1; i <= 100; i++) {
  // i は 1 から始まり、毎回 1 ずつ増えていく
  console.log(i);
}
TypeScript

分解して考えると：

  • let i = 1;
    • ループ用の変数 i を 1 で初期化します。
  • i <= 100;
    • i が 100以下の間、ループを続けます。
  • i++
    • ループのたびに i を 1ずつ増やします。

この3つが、for 文の「お約束パターン」です。

偶数だけ表示する（for + 条件分岐）

次に、「1〜100の中から偶数だけ」を表示してみます。

偶数判定のロジック

  • i % 2 === 0 → 偶数
// even-numbers.ts
// 1〜100 の偶数だけ表示する

for (let i = 1; i <= 100; i++) {
  // 偶数かどうかを判定
  if (i % 2 === 0) {
    console.log(i);
  }
}
TypeScript

ポイント：

  • ループの中で if を使うことで、「条件に合うものだけ」を選んで表示できます。
  • %（剰余）は、繰り返しと相性がとても良い演算子です。

3の倍数だけ表示する

同じ考え方で、「3の倍数だけ」を表示してみます。

3の倍数判定のロジック

  • i % 3 === 0 → 3の倍数
// multiples-of-3.ts
// 1〜100 のうち 3の倍数だけ表示する

for (let i = 1; i <= 100; i++) {
  if (i % 3 === 0) {
    console.log(i);
  }
}
TypeScript

ポイント：

  • 条件の中身を変えるだけで、「偶数」「3の倍数」「5の倍数」など、いろいろなパターンに応用できます。
  • 「ループ + 条件分岐」の組み合わせは、プログラミングの基本パターンのひとつです。

合計を計算する：ループで「足し合わせる」

次は、「1〜100までの合計」を計算してみます。

合計のロジック

  • 最初に sum = 0 を用意しておく
  • ループの中で sum += i として、毎回足していく
// sum-1-to-100.ts
// 1〜100 の合計を計算する

let sum: number = 0; // 合計を入れる変数。最初は 0 からスタート

for (let i = 1; i <= 100; i++) {
  sum += i; // sum = sum + i と同じ意味
}

console.log("1〜100 の合計:", sum);
TypeScript

ポイント：

  • 「ループの外で初期値を用意しておく」
  • 「ループの中で少しずつ更新していく」

という流れは、合計だけでなく、カウントや最大値・最小値の計算などにも応用できます。

while 文：条件が true の間、ずっと回す

for 文は「回数がはっきりしているとき」に向いていますが、while 文は「条件が true の間、ずっと回す」タイプのループです。

1〜100までを while で表示する

// while-loop-basic.ts
// while 文で 1〜100 を表示する

let i: number = 1; // ループ用の変数を用意

while (i <= 100) {
  console.log(i);
  i++; // 忘れると無限ループになるので注意
}
TypeScript

ポイント：

  • while (条件) の形で書きます。
  • 条件が true の間、ずっと中身が実行されます。
  • i++ を書き忘れると、条件がずっと true のままになり、止まらなくなります。

do…while 文：最低1回は実行するループ

do…while 文は、「最低1回は実行してから、条件を見て繰り返す」タイプのループです。

1〜100までを do…while で表示する

// do-while-loop-basic.ts
// do...while 文で 1〜100 を表示する

let i: number = 1;

do {
  console.log(i);
  i++;
} while (i <= 100);
TypeScript

ポイント：

  • do { ... } while (条件); という形で書きます。
  • 条件が false でも、最初の1回は必ず実行されます。
  • 「とりあえず1回はやってみて、そのあと続けるか決める」という場面に向いています。

for…of と for…in：配列やオブジェクトを回す

Day 5のテーマは「1〜100」ですが、せっかくなので for…of と for…in も軽く触れておきます。

for…of：配列の「中身」を順番に取り出す

// for-of-basic.ts
// 配列の要素を for...of で回す

const numbers: number[] = [1, 2, 3, 4, 5];

for (const n of numbers) {
  console.log("要素:", n);
}
TypeScript

ポイント：

  • for (const n of numbers) の形で、「配列の中身」を順番に取り出します。
  • インデックス（0, 1, 2…）ではなく、要素そのものを扱いたいときに便利です。

for…in：オブジェクトの「キー」を順番に取り出す

// for-in-basic.ts
// オブジェクトのキーを for...in で回す

const profile = {
  name: "Alice",
  age: 25,
  email: "alice@example.com",
};

for (const key in profile) {
  // key は "name", "age", "email" などの文字列
  console.log("キー:", key, "値:", (profile as any)[key]);
}
TypeScript

ポイント：

  • for (const key in profile) の形で、「キー」を順番に取り出します。
  • オブジェクトの中身をざっと確認したいときに便利です。

break と continue：ループの流れをコントロールする

break：ループを途中で抜ける

// break-example.ts
// 1〜100 の中で、最初に 50 に達したらループを抜ける

for (let i = 1; i <= 100; i++) {
  console.log(i);

  if (i === 50) {
    console.log("50 に達したのでループを終了します。");
    break; // ここでループを抜ける
  }
}
TypeScript

ポイント：

  • break は「もうこれ以上回さなくていい」と判断したときに使います。
  • 条件に応じて、ループを早めに終わらせることができます。

continue：その回だけスキップする

// continue-example.ts
// 1〜20 のうち、3の倍数だけをスキップして表示する

for (let i = 1; i <= 20; i++) {
  if (i % 3 === 0) {
    // 3の倍数のときは表示せず、次のループへ
    continue;
  }

  console.log(i);
}
TypeScript

ポイント：

  • continue は「この回の残りはスキップして、次のループに進む」という意味です。
  • 「特定の条件のときだけ処理を飛ばしたい」ときに使います。

実践テンプレート：1〜100表示＋偶数＋3の倍数＋合計

最後に、今日の実践テーマをまとめたテンプレートを用意します。 このファイルをベースに、少しずつ条件や範囲を変えながら遊んでみてください。

// day5-practice.ts
// Day 5 練習：1〜100表示・偶数・3の倍数・合計

console.log("=== 1〜100 を表示 ===");

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

console.log("\n=== 偶数だけ表示 ===");

for (let i = 1; i <= 100; i++) {
  if (i % 2 === 0) {
    console.log(i);
  }
}

console.log("\n=== 3の倍数だけ表示 ===");

for (let i = 1; i <= 100; i++) {
  if (i % 3 === 0) {
    console.log(i);
  }
}

console.log("\n=== 1〜100 の合計を計算 ===");

let sum: number = 0;

for (let i = 1; i <= 100; i++) {
  sum += i; // sum = sum + i
}

console.log("1〜100 の合計:", sum);

// おまけ：while でも同じことをしてみる

console.log("\n=== while で 1〜100 の合計を計算 ===");

let j: number = 1;
let sumWhile: number = 0;

while (j <= 100) {
  sumWhile += j;
  j++;
}

console.log("1〜100 の合計（while版）:", sumWhile);
TypeScript

Day 5のまとめ

Day 5では、

  • for / while / do…while で「繰り返しの基本形」を押さえ
  • for…of / for…in で「配列やオブジェクトを回す」感覚に触れ
  • break / continue で「ループの流れをコントロールする」方法を知り
  • 実践として、1〜100表示・偶数表示・3の倍数表示・合計計算を行いました。

繰り返しは、プログラミングの中でも特に出番が多い考え方です。 今日のコードは、ぜひ数字の範囲を変えたり、条件を増やしたりして、自分なりの「ループ遊び」をしてみてください。 同じパターンを何度も書いているうちに、「あ、これ前にも書いたな」という感覚が出てきて、それがもうひとつの“上達のサイン”になっていきます。

Day 5：繰り返しで「流れをコントロールする」感覚を身につける

Day 5では、繰り返し処理をもう一歩踏み込んで練習していきます。 1〜10の合計、1〜100の偶数合計、5の倍数表示、10から1までのカウントダウン、そして「条件に一致したらループ終了」という、ループの定番パターンをまとめて体験していきます。 雑誌の記事を読むような感覚で、コードの流れをイメージしながら進んでいきましょう。

繰り返しの基本イメージをもう一度整理する

繰り返し構文の役割

  • for：回数がはっきりしているときの繰り返し
  • while：条件が true の間、ずっと繰り返す
  • do…while：最低1回は実行してから、条件を見て繰り返す
  • for…of：配列など「中身の要素」を順番に取り出す
  • for…in：オブジェクトなど「キー」を順番に取り出す
  • break：ループを途中で抜ける
  • continue：その回だけスキップして、次のループに進む

今日はこのうち、特に for / while / break / continue を中心に、実践的なパターンを見ていきます。

1〜10の合計を求める：for 文で「足し合わせる」

合計の考え方

  • 最初に sum = 0 を用意しておく
  • ループの中で sum += i として、毎回足していく
// sum-1-to-10.ts
// 1〜10 の合計を計算する

let sum: number = 0; // 合計を入れる変数。最初は 0 からスタート

for (let i = 1; i <= 10; i++) {
  // i は 1 から 10 まで増えていく
  sum += i; // sum = sum + i と同じ意味
}

console.log("1〜10 の合計:", sum);
TypeScript

深掘りポイント：

  • 「ループの外で初期値を用意しておく」→ここでは sum = 0
  • 「ループの中で少しずつ更新していく」→sum += i
  • このパターンは、合計だけでなく、カウントや最大値・最小値の計算などにも応用できます。

1〜100の偶数合計：条件付きで足し合わせる

偶数合計の考え方

  • 1〜100をループで回す
  • i % 2 === 0 のときだけ合計に足す
// sum-even-1-to-100.ts
// 1〜100 の偶数だけの合計を計算する

let evenSum: number = 0; // 偶数の合計を入れる変数

for (let i = 1; i <= 100; i++) {
  // 偶数かどうかを判定
  if (i % 2 === 0) {
    evenSum += i; // 偶数のときだけ合計に足す
  }
}

console.log("1〜100 の偶数の合計:", evenSum);
TypeScript

深掘りポイント：

  • 「ループ + 条件分岐 + 合計」の組み合わせは、かなりよく使うパターンです。
  • 条件を変えれば、「3の倍数だけの合計」「5の倍数だけの合計」などにも簡単に応用できます。

5の倍数表示：条件に合うものだけを出力する

5の倍数の考え方

  • i % 5 === 0 → 5の倍数
// multiples-of-5.ts
// 1〜100 のうち 5の倍数だけ表示する

for (let i = 1; i <= 100; i++) {
  if (i % 5 === 0) {
    console.log(i);
  }
}
TypeScript

深掘りポイント：

  • 「ループの中で条件をチェックして、合うものだけ表示する」という形は、フィルタリングの基本です。
  • 実務でも、「条件に合うデータだけを処理する」という場面で頻繁に登場します。

10から1までカウントダウン：逆方向のループ

カウントダウンの考え方

  • i を 10から始める
  • 条件は i >= 1
  • 毎回 i-- で1ずつ減らしていく
// countdown-10-to-1.ts
// 10 から 1 までカウントダウンする

for (let i = 10; i >= 1; i--) {
  console.log(i);
}
TypeScript

深掘りポイント：

  • for 文は「増やすだけ」ではなく、「減らす」方向にも使えます。
  • i++ を i-- に変えるだけで、カウントアップとカウントダウンを切り替えられます。
  • 条件も i <= 10 → i >= 1 のように、方向に合わせて変える必要があります。

条件に一致したらループ終了：break の使い方

「見つかったら終わり」の考え方

例えば、1〜100の中で「最初に 50 に達したらループを終了する」というような場面を考えてみます。

// break-example.ts
// 条件に一致したらループを終了する

for (let i = 1; i <= 100; i++) {
  console.log(i);

  if (i === 50) {
    console.log("50 に達したのでループを終了します。");
    break; // ここでループを抜ける
  }
}
TypeScript

深掘りポイント：

  • break は「もうこれ以上回さなくていい」と判断したときに使います。
  • 検索処理など、「条件に合うものを見つけたら終わり」という場面でよく使われます。
  • 無駄なループを減らすことで、処理の効率を上げることができます。

while 文で同じことをやってみる

for 文だけでなく、while 文でも同じようなことができます。 ここでは、「1〜10の合計」と「条件に一致したら終了」を while で書いてみます。

while で 1〜10の合計

// while-sum-1-to-10.ts
// while 文で 1〜10 の合計を計算する

let i: number = 1;
let sum: number = 0;

while (i <= 10) {
  sum += i;
  i++; // これを忘れると無限ループになるので注意
}

console.log("1〜10 の合計（while版）:", sum);
TypeScript

while + break で「条件に一致したら終了」

// while-break-example.ts
// while 文で、条件に一致したらループを終了する

let j: number = 1;

while (j <= 100) {
  console.log(j);

  if (j === 50) {
    console.log("50 に達したのでループを終了します。（while版）");
    break;
  }

  j++;
}
TypeScript

深掘りポイント：

  • while 文では、「ループ用の変数の初期化」と「更新」を自分で書く必要があります。
  • そのぶん柔軟ですが、j++ を忘れると止まらなくなるので注意が必要です。

do…while の軽い体験：最低1回は実行するループ

do…while 文は、「最低1回は実行してから、条件を見て続けるか決める」ループです。 ここでは、1〜10の合計を do…while で書いてみます。

// do-while-sum-1-to-10.ts
// do...while 文で 1〜10 の合計を計算する

let k: number = 1;
let sumDoWhile: number = 0;

do {
  sumDoWhile += k;
  k++;
} while (k <= 10);

console.log("1〜10 の合計（do...while版）:", sumDoWhile);
TypeScript

深掘りポイント：

  • do { ... } while (条件); の形で書きます。
  • 条件が最初から false でも、1回は必ず実行されます。
  • 「とりあえず1回はやってみて、そのあと続けるか決める」という場面に向いています。

for…of / for…in のイメージを少しだけ

Day 5の練習テーマは数字ですが、繰り返しの仲間として for…of と for…in のイメージも軽く触れておきます。

for…of：配列の要素を回す

// for-of-example.ts
// 配列の要素を for...of で回す

const numbers: number[] = [1, 2, 3, 4, 5];

for (const n of numbers) {
  console.log("要素:", n);
}
TypeScript

for…in：オブジェクトのキーを回す

// for-in-example.ts
// オブジェクトのキーを for...in で回す

const profile = {
  name: "Alice",
  age: 25,
  email: "alice@example.com",
};

for (const key in profile) {
  console.log("キー:", key, "値:", (profile as any)[key]);
}
TypeScript

ポイント：

  • for...of は「配列の中身」、for...in は「オブジェクトのキー」を回すイメージです。
  • 実務では、配列やオブジェクトを扱う場面でよく登場します。

Day 5 練習まとめテンプレート

最後に、今日の練習テーマをひとつのファイルにまとめたテンプレートを用意します。 このままコピーして、少しずつ値や条件を変えながら遊んでみてください。

// day5-practice.ts
// Day 5 練習まとめ：1〜10合計・偶数合計・5の倍数・カウントダウン・条件終了

console.log("=== 1〜10 の合計 ===");

let sum1to10: number = 0;

for (let i = 1; i <= 10; i++) {
  sum1to10 += i;
}

console.log("1〜10 の合計:", sum1to10);

console.log("\n=== 1〜100 の偶数合計 ===");

let evenSum: number = 0;

for (let i = 1; i <= 100; i++) {
  if (i % 2 === 0) {
    evenSum += i;
  }
}

console.log("1〜100 の偶数の合計:", evenSum);

console.log("\n=== 5の倍数表示 ===");

for (let i = 1; i <= 100; i++) {
  if (i % 5 === 0) {
    console.log(i);
  }
}

console.log("\n=== 10 から 1 までカウントダウン ===");

for (let i = 10; i >= 1; i--) {
  console.log(i);
}

console.log("\n=== 条件に一致したらループ終了（50で終了） ===");

for (let i = 1; i <= 100; i++) {
  console.log(i);

  if (i === 50) {
    console.log("50 に達したのでループを終了します。");
    break;
  }
}
TypeScript

Day 5のまとめ

Day 5では、

  • 1〜10の合計
  • 1〜100の偶数合計
  • 5の倍数表示
  • 10から1までのカウントダウン
  • 条件に一致したらループ終了

という、繰り返し処理の定番パターンを一通り体験しました。 どれも、「ループの外で初期値を用意して」「ループの中で少しずつ更新して」「条件に応じて表示や終了をコントロールする」という、プログラミングの基本的な流れが詰まっています。

数字の範囲や条件を変えながら、「こう書くと結果がどう変わるか」を遊ぶように試してみてください。 ループの動きが頭の中で自然にイメージできるようになってきたら、それはもうひとつの“上達のサイン”です。

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