- Day 5：繰り返しで「同じ処理を何度も回す」感覚をつかむ
- 繰り返しの基本イメージ
- for 文：いちばん基本の「回数指定のループ」
- 偶数だけ表示する（for + 条件分岐）
- 3の倍数だけ表示する
- 合計を計算する：ループで「足し合わせる」
- while 文：条件が true の間、ずっと回す
- do…while 文：最低1回は実行するループ
- for…of と for…in：配列やオブジェクトを回す
- break と continue：ループの流れをコントロールする
- 実践テンプレート：1〜100表示＋偶数＋3の倍数＋合計
- Day 5のまとめ
- Day 5：繰り返しで「流れをコントロールする」感覚を身につける
- 繰り返しの基本イメージをもう一度整理する
- 1〜10の合計を求める：for 文で「足し合わせる」
- 1〜100の偶数合計：条件付きで足し合わせる
- 5の倍数表示：条件に合うものだけを出力する
- 10から1までカウントダウン：逆方向のループ
- 条件に一致したらループ終了：break の使い方
- while 文で同じことをやってみる
- do…while の軽い体験：最低1回は実行するループ
- for…of / for…in のイメージを少しだけ
- Day 5 練習まとめテンプレート
- 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);
}
分解して考えると：
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);
}
}
ポイント：
- ループの中で
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);
}
}
ポイント：
- 条件の中身を変えるだけで、「偶数」「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);
ポイント：
- 「ループの外で初期値を用意しておく」
- 「ループの中で少しずつ更新していく」
という流れは、合計だけでなく、カウントや最大値・最小値の計算などにも応用できます。
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++; // 忘れると無限ループになるので注意
}
ポイント：
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);
ポイント：
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);
}
ポイント：
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]);
}
ポイント：
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; // ここでループを抜ける
}
}
ポイント：
breakは「もうこれ以上回さなくていい」と判断したときに使います。- 条件に応じて、ループを早めに終わらせることができます。
continue：その回だけスキップする
// continue-example.ts
// 1〜20 のうち、3の倍数だけをスキップして表示する
for (let i = 1; i <= 20; i++) {
if (i % 3 === 0) {
// 3の倍数のときは表示せず、次のループへ
continue;
}
console.log(i);
}
ポイント：
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);
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);
深掘りポイント：
- 「ループの外で初期値を用意しておく」→ここでは
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);
深掘りポイント：
- 「ループ + 条件分岐 + 合計」の組み合わせは、かなりよく使うパターンです。
- 条件を変えれば、「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);
}
}
深掘りポイント：
- 「ループの中で条件をチェックして、合うものだけ表示する」という形は、フィルタリングの基本です。
- 実務でも、「条件に合うデータだけを処理する」という場面で頻繁に登場します。
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);
}
深掘りポイント：
- 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; // ここでループを抜ける
}
}
深掘りポイント：
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);
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++;
}
深掘りポイント：
- 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);
深掘りポイント：
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);
}
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]);
}
ポイント：
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;
}
}
Day 5のまとめ
Day 5では、
- 1〜10の合計
- 1〜100の偶数合計
- 5の倍数表示
- 10から1までのカウントダウン
- 条件に一致したらループ終了
という、繰り返し処理の定番パターンを一通り体験しました。 どれも、「ループの外で初期値を用意して」「ループの中で少しずつ更新して」「条件に応じて表示や終了をコントロールする」という、プログラミングの基本的な流れが詰まっています。
数字の範囲や条件を変えながら、「こう書くと結果がどう変わるか」を遊ぶように試してみてください。 ループの動きが頭の中で自然にイメージできるようになってきたら、それはもうひとつの“上達のサイン”です。