第3部 JavaScript — Day 24 / 30
演習:ミニアプリ
「おみくじアプリ」を作りましょう。ボタンを押すと「大吉」「中吉」「小吉」のどれかがランダムに表示されるページです。Day 23 のHTMLを流用して、scriptだけ次のように変えます。
const results = ["大吉", "中吉", "小吉"];
document.getElementById("btn").addEventListener("click", function () {
const i = Math.floor(Math.random() * results.length);
document.getElementById("message").textContent = results[i];
});Math.random() は0以上1未満の乱数、Math.floor は小数点以下の切り捨てです。組み合わせると「0〜2のランダムな整数」が作れて、配列から1つを選べます。
今日の練習
結果の種類を増やしたり、CSSで結果の文字を大きく目立たせたりして、自分らしいおみくじに仕上げましょう。
模範解答を見る
const results = ["大吉", "中吉", "小吉", "吉", "末吉"];
document.getElementById("btn").addEventListener("click", function () {
const i = Math.floor(Math.random() * results.length);
document.getElementById("message").textContent = results[i];
});#message {
font-size: 2rem;
font-weight: bold;
color: #b91c1c;
text-align: center;
}results.length を使っているので、配列に結果を追加するだけで種類を増やせます。CSSで結果の文字を大きく目立たせました。
理解度チェック
学籍番号と氏名を入力してクイズに正解すると、確認コード付きの提出用画面が表示されます。スクリーンショットを撮って Teams の Class Notebook に提出してください。
Q. Math.floor(Math.random() * 3) が返す可能性があるのはどれでしょうか?
Completed
正解です！Day 24 の学習を確認しました
| 科目 | 経営情報 2026 |
|---|---|
| 教材 | プログラミング入門30日 Day 24 演習:ミニアプリ |
| 学籍番号 | |
| 氏名 | |
| 提出時間 | |
| 確認コード |
提出時間はサーバー時刻に基づきます。
この画面のスクリーンショットを撮り、Teams の Class Notebook に提出してください。