作成ファイル・保存場所
js-basic フォルダに以下のファイルを作成してください。
| ファイル名 | 内容 |
|---|---|
| js-basic05.html | ロジック構築トレーニング用HTMLファイル |
JavaScriptは <script> タグの中に直接書きましょう（内部JS）
今回のテーマ
これまでに学んだ if 文、for 文、変数、演算子などを使って、「文章で書かれた問題」をコードに変換する力（ロジック構築）」を鍛えましょう。
目的
- 問題文を読んで、必要な変数・条件・繰り返しを考える力を養う
if,for,console.logなどを組み合わせてロジックを作成する力を身につける- **「読解 → 設計 → 実装」**の流れを体験する
チェックポイント
- 問題文を正確に読み取り、必要な変数やループ処理を使えているか
- 条件分岐（if文）で出し分けができているか
console.log()で適切に出力しているか- 複数の命令（変数 → if → 出力）の順番が正しく組めているか
解説ポイント
- 条件の言葉（〜なら、〜より多ければ）は
ifを使う - 回数や「〜回繰り返す」は
forを使う - 出力はすべて
console.log()で確認しよう
HTML/JavaScriptトレーニング
下記のHTMLをコピーして、下記の練習問題１から５までを行いましょう。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>JS Practice 05</title> </head> <body> <h1>ロジックトレーニング</h1> <script> // 練習1：条件によって出力を変える //let score で定義し、75 を代入 //「score が 80 以上なら 'よくできました'、 // 50以上なら 'もう少し'、それ未満なら '頑張りましょう'」 //練習2：掛け算の結果で条件を分岐 // //「2つの数字 a, b を掛けた結果が 50 以上なら // '大きい数です'、それ未満なら '小さい数です'」 //練習3：割り算と余りを判定 //「a を b で割ったとき、余りが 0 なら // '割り切れます'、そうでなければ '余りがあります'」 //練習4：1〜20の中から 5 の倍数だけ表示 //「1〜20までの数値を繰り返し、 // 5の倍数のときだけ '〇は5の倍数です' // と表示してください」 //練習5：偶数か奇数かを判定 //「1〜10までの数値について、 // 偶数なら '〇は偶数'、奇数なら // '〇は奇数' と表示してください」 </script> </body> </html>
練習1：条件によって出力を変える
score が 80 以上なら ‘よくできました’、50以上なら ‘もう少し’、それ未満なら ‘頑張りましょう’
上記をif文を使って作成してみましょう。
解答例
let score = 75;
if (score >= 80) {
console.log('よくできました');
} else if (score >= 50) {
console.log('もう少し');
} else {
console.log('頑張りましょう');
}
練習2：掛け算の結果で条件を分岐
2つの数字 a, b を掛けた結果が 50 以上なら大きい数です、それ未満なら 小さい数です
上記の条件分岐をプログラミングしてみましょう。
解答例
let a1 = 7;
let b1 = 8;
let result = a1 * b1;
if (result >= 50) {
console.log(`大きい数です${result}`);
} else {
console.log(`小さい数です${result}`);
}
練習3：割り算と余りを判定
「a を b で割ったとき、余りが 0 なら ‘割り切れます’、そうでなければ ‘余りがあります’
上記の条件分岐を作成してみましょう
解答例
let a2 = 21;
let b2 = 5;
if (a2 % b2 === 0) {
console.log(`${a2} は ${b2} で割り切れます`);
} else {
console.log({`${a2} は ${b2} で割ると余りがあります');
}
練習4：1〜20の中から 5 の倍数だけ表示
1〜20までの数値を繰り返し、 5の倍数のときだけ ‘〇は5の倍数です’と表示してください
上記の処理をfor文とif文を使用してプログラミングしてみましょう
解答例
for (let i = 1; i <= 20; i++) {
if (i % 5 === 0) {
console.log(`${i} は5の倍数です`);
} else {
console.log(i);
}
練習5：偶数か奇数かを判定
1〜10までの数値について、偶数なら ‘〇は偶数’、奇数なら ‘〇は奇数’ と表示してください
上記をfor文とif文を使ってプログラミングしてみましょう。
解答例
for (let i = 1; i <= 10; i++) {
if (i % 2 === 0) {
console.log(`${i} は偶数`);
} else {
console.log(`${i} は奇数`);
}
}
応用してみよう！
- 数値を変えて、繰り返しの範囲や条件を工夫してみよう
- if (i % 3 === 0 && i % 5 === 0) のような複数条件も試してみよう
- 「3の倍数のときは ‘Fizz’、5の倍数のときは ‘Buzz’、両方のときは ‘FizzBuzz’」などに挑戦してみよう！
補足：変数とスコープのルール
変数名が重なるとどうなるの？
JavaScriptでは、同じスコープ（＝同じブロックの中）で 同じ名前の let 変数をもう一度使うことはできません。
let a = 10; let a = 20; // ❌ エラーになります！
そのため、同じファイルにいろんな練習を「追記していく」場合は、
let a1 = 10; let a2 = 20;
のように 変数名を少しずつ変える必要があります。
for や if の中の変数は「中だけのもの」
for (let i = 0; i < 5; i++) {
console.log(i); // i はこの中では使える
}
console.log(i); // ❌ ここでは使えない（iはfor文の中だけの変数）
let で宣言された変数は、宣言したブロック（{ … }）の中だけで使えるというルールがあります。
これは「ブロックスコープ」と呼ばれています。
困った時は、、、
- let は「一度使った名前は再利用できない」と覚えておこう
- 同じ名前を使いたい場合は、変数名を変える or 中身をブロック {} に分けてみよう