JavaScriptの関数とプロパティを使ってランダムな処理を体験しよう！

作成ファイル・保存場所

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

ファイル名	内容
js-basic08.html	オブジェクト（連想配列）体験用HTMLファイル

基本コード(HTML)は下記からコピー

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JS Practice 09</title>
</head>
<body>
  <h1>関数とプロパティの体験</h1>

  <script>
    // 1) ランダムな小数
 
    // 2) 0〜9のランダムな整数
 
    // 3) 配列からランダムに1つ選ぶ
 
    // 配列の長さを表示
 
    // 4) 0〜100のランダムな整数を使って偶数・奇数を判定
 
 /script>
</body>
</html>

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

今回のテーマ

JavaScriptには「値を返すメソッド」や「情報を持つプロパティ」が、事前に用意されています。今回は Math.random()「メソッド」や .length「プロパティ」を使って、ランダムな処理やデータの取得に挑戦してみましょう！

目的

関数（Math.random()）の使い方を知る
プロパティ（.length）の意味と使い方を体験する
ランダムな値の生成や、配列からランダムに1つ選ぶロジックを理解する
条件（if）と組み合わせた簡単なロジックを組めるようになる

チェックポイント

Math.random() で 0〜1未満のランダム値を生成できているか
Math.floor() で整数に変換できているか
.length で配列の要素数を取得できているか
配列からランダムに1つ取り出せているか

解説ポイント

関数は「ある処理をして結果を返す命令」です。呼び出すときは () をつけます。

let rand = Math.random(); // 0〜1未満の乱数を返す
console.log(rand);

let n = Math.floor(Math.random() * 100); // 0〜99の整数
console.log(n);

画面を読み込むたびに異なる数字が表示されます。consoleで確認してみましょう。

プロパティとは？

プロパティはデータの「情報」そのものです。関数と違って () をつけません。

let fruits = ['りんご', 'バナナ', 'みかん'];
console.log(fruits.length); // 3

HTML/JavaScriptトレーニング

関数とは？ Math.random()関数を試してみましょう。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>JS Practice 09</title>
</head>

<body>
    <h1>関数とプロパティの体験</h1>

    <script>
        // 1) ランダムな小数
        let rand1 = Math.random();
        console.log(`ランダムな小数：${rand1}`);

        // 2) 0〜9のランダムな整数
        let rand2 = Math.floor(Math.random() * 10);
        console.log(`0〜9のランダムな整数：${rand2}`);

        // 3) 小数点を整数に変換する：切り捨て・切り上げ・四捨五入
        let num = 74.6;
        console.log(`元の値：${num}`);

        let floorNum = Math.floor(num);
        console.log(`切り捨て：${floorNum}`);//74

        let ceilNum = Math.ceil(num);
        console.log(`切り上げ：${ceilNum}`);//75

        let roundNum = Math.round(num);
        console.log(`四捨五入：${roundNum}`);//75

        // 4) 配列からランダムに1つ選ぶ
        let colors = ['赤', '青', '緑', '黄', '紫'];
        let index = Math.floor(Math.random() * colors.length);
        console.log(`選ばれた色：${colors[index]}`);

        // 5) 配列の長さを表示
        console.log(`配列の要素数：${colors.length}`);

        // 6) 指定した値の中での最大値・最小値
        let a = 12;
        let b = 5;
        let c = 20;

        let maxValue = Math.max(a, b, c);
        let minValue = Math.min(a, b, c);

        console.log(`最大値は ${maxValue} です`);
        console.log(`最小値は ${minValue} です`);

        // ランダムおみくじを作ってみよう
        let omikuji = ['大吉', '中吉', '小吉', '吉', '末吉', '凶'];
        let result = omikuji[Math.floor(Math.random() * omikuji.length)];

        console.log('あなたの今日の運勢を占います');
        console.log(`今日の運勢「${result}」です！`);
        console.log(`${omikuji.length}種類の結果から選ばれました`);

        if (result === '大吉') {
            console.log('ラッキー！今日は何でもうまくいきそう！');
        } else if (result === '凶') {
            console.log(' あわてず慎重。落ち着いて行動しよう');
        }
    </script>
</body>

</html>

応用トレーニング　じゃんけん

配列で出せる手を用意（グー・チョキ・パー）
Math.random() + .length を使ってランダムに1つ選ぶ
if 文で勝敗を判定して、特別なメッセージを表示してみましょう！

//じゃんけんを作ってみよう

// 出せる手を配列で用意
let hands = ['グー', 'チョキ', 'パー'];

// プレイヤーとCPUの手をランダムに決定
let player = hands[Math.floor(Math.random() * hands.length)];
let cpu = hands[Math.floor(Math.random() * hands.length)];

console.log(`あなたの手は「${player}」です`);
console.log(`コンピュータの手は「${cpu}」です`);
console.log(`${hands.length}種類の手からランダムに選ばれました`);

// 勝敗を判定（あいこは除く）
if (player === cpu) {
  console.log('あいこです！もう一回？');
} else if (
  (player === 'グー' && cpu === 'チョキ') ||
  (player === 'チョキ' && cpu === 'パー') ||
  (player === 'パー' && cpu === 'グー')
) {
  console.log('あなたの勝ちです！おめでとう！');
} else {
  console.log('あなたの負けです…ドンマイ！');
}