JavaScriptで文章からロジックを組み立てよう！第2弾（配列・関数・ランダム）

作成ファイル・保存場所

js-basic フォルダに以下のファイルを作成してください。

ファイル名	内容
js-basic09.html	ロジック構築トレーニング用HTMLファイル（第2弾）

JavaScriptは <script> タグの中に直接書きましょう（内部JS）

今回のテーマ

これまでに学んだ 配列, for, if, 関数, .length などを使って、
「文章で書かれた問題」をJavaScriptで表現するロジック力をさらに強化します。

目的

問題文を読んで、必要な変数・条件・繰り返しを考える力を養う
配列, for, Math.random(), .length などを組み合わせて使う力を身につける
**「読解 → 設計 → 実装」**の思考プロセスに慣れる

チェックポイント

配列と for を組み合わせて使えているか
.length を活用して要素数を取得できているか
Math.random() と Math.floor() でランダムな処理ができているか
条件分岐を使って出力をコントロールできているか

解説ポイント

「〇以上／未満」 は if 文で条件を分岐する
配列からランダムに選ぶ には

  Math.floor(Math.random() * 配列.length)

.length は配列の長さ（要素数）を取得するプロパティ

HTML/JavaScriptトレーニング

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JS Practice 09</title>
</head>
<body>
  <h1>ロジックトレーニング 09</h1>

  <script>
    //練習1
    //0〜19のランダムな整数を生成し、
    //10以上なら「大きい」、未満なら「小さい」と表示しましょう。
　　　let num = Math.floor(Math.random() * 20);



    //練習2
    // 配列からランダムに１つを出力
    //さらに配列全体の数を表示しましょう。
    //ランダムに出力した値が「バナナ」だったら、'バナナが選ばれました！'と表示
    //そうでなければ、'バナナ以外が選ばれました'と表示
    let fruits = ['りんご', 'バナナ', 'みかん', 'もも'];



    //練習3
    //配列から、スコア一覧を表示します。
    //さらにその点数が、100点 → 「満点です！素晴らしい！」と表示し、
    //80以上 → 「score 点は優秀です」
    //60以上 → 「score 点は合格です」
    //それ未満 → 「score 点は不合格です」と表示しましょう。
　　　let scores = [100, 85, 62, 59, 90, 45];




    //練習4　得点勝負で最大値を見つけよう
    //3人の得点を Math.random() を使ってランダムに生成します。
    //Math.max() を使って最も高い得点を取り出します
    //if 文で90点以上だったら「すばらしい成績」
    //70点以上だったら、「よくがんばりました！」
    //それ以外は、「次回に期待しましょう」と評価を出力してみましょう。

    let a = Math.floor(Math.random() * 100);
    let b = Math.floor(Math.random() * 100);
    let c = Math.floor(Math.random() * 100);
    console.log(`3人の得点：${a}, ${b}, ${c}`);


  </script>
</body>
</html>

練習1：ランダムな整数を生成し、10以上かどうかを判断する

0〜19のランダムな整数を生成
その整数が、10以上なら「大きい」と表示
未満なら「小さい」と表示しましょう。

解答例

// 0〜19のランダムな整数を生成
let num = Math.floor(Math.random() * 20);

// 生成した数を表示
console.log('生成された数：' + num);

// 10以上かどうかを判定
if (num >= 10) {
  console.log('10以上 → 大きい数です');
} else {
  console.log('10未満 → 小さい数です');
}

練習2：配列からランダムに1つ選び、条件によってコメントを変える

配列からランダムに１つを出力
さらに配列全体の数を表示しましょう。
ランダムに出力した値が「バナナ」だったら、’バナナが選ばれました！’とメッセージを表示しましょう。
そうでなければ、’バナナ以外が選ばれました’と表示しましょう。

解答例

// 果物リストからランダムに1つ選んで出力
let fruits = ['りんご', 'バナナ', 'みかん', 'もも'];
let pick = fruits[Math.floor(Math.random() * fruits.length)];

// 選ばれた果物と、リスト全体の数を出力
console.log(`選ばれたのは：${pick}`);
console.log(`全体の数は：${fruits.length}個`);

// 「バナナ」だったら特別なメッセージを出す
if (pick === 'バナナ') {
  console.log('バナナが選ばれました！');
} else {
  console.log('バナナ以外が選ばれました');
}

練習3：スコア配列をループして合否・評価を出力しよう

let scores = [100, 85, 62, 59, 90, 45]; 配列から、スコア一覧を表示します。
さらにその点数が、100点 → 「満点です！素晴らしい！」と表示
80以上 → 「score 点は優秀です」
60以上 → 「score 点は合格です」　　
それ未満 → 「score 点は不合格です」と表示しましょう。

解答例

let scores = [100, 85, 62, 59, 90, 45];

for (let score of scores) {
  if (score === 100) {
    console.log(`${score} 点 → 満点です！素晴らしい！`);
  } else if (score >= 80) {
    console.log(`${score} 点 → 優秀です`);
  } else if (score >= 60) {
    console.log(`${score} 点 → 合格です`);
  } else {
    console.log(`${score} 点 → 不合格です`);
  }
}

練習4：得点勝負でロジックを学ぼう！

3人の得点を Math.random() を使ってランダムに生成します。
Math.max() を使って最も高い得点を取り出します
if 文で90点以上だったら「すばらしい成績」
70点以上だったら、「よくがんばりました！」
それ以外は、「次回に期待しましょう」と評価を出力してみましょう。

解答例

// 練習4：得点勝負でロジックを学ぼう

// 3人の得点（0〜99）をランダムに生成
let a = Math.floor(Math.random() * 100);
let b = Math.floor(Math.random() * 100);
let c = Math.floor(Math.random() * 100);

console.log(`3人の得点：${a}, ${b}, ${c}`);

// 最大値を取り出す
let highest = Math.max(a, b, c);
console.log(`一番高い得点は ${highest} 点です！`);

// 得点に応じた評価を表示
if (highest >= 90) {
  console.log('すばらしい成績！');
} else if (highest >= 70) {
  console.log('よくがんばりました！');
} else {
  console.log('次回に期待しましょう');
}

ステップアップ！：Math.maxを使わず、if文でできるかを考えてみましょう！