JavaScript | 1 日 90 分 × 7 日アプリ学習：ランダム表示アプリ（初級編）

JavaScript
スポンサーリンク

1日目のゴールと今日のテーマ

1日目のテーマは
「ランダムに1つ選んで表示する感覚をつかむ」 ことです。

目指すのは、とてもシンプルなランダム表示アプリ。

ボタンを押すと
「今日の運勢」や「おみくじ結果」が
ランダムで1つだけ表示される。

そのために、今日はこの2つを使います。

Math（特に Math.random）
配列操作（配列から1つ取り出す）

「運勢アプリ」という“遊び”の中で、
ランダムと配列の超基本を体に入れていきます。

ランダムの入口：Math.random を理解する

Math.random は「0以上1未満のランダムな数」をくれる

まずは JavaScript のランダムの出発点。

Math.random()
JavaScript

これは、実行するたびに
0以上1未満の小数（0〜0.9999…） を返します。

例えば、こんな値が返ってきます（イメージです）。

0.123456
0.789012
0.005432

実際のコード例：

console.log(Math.random());
console.log(Math.random());
console.log(Math.random());
JavaScript

実行するたびに、違う数が表示されます。

ここで大事なのは、

Math.random だけだと、
「0〜1の間の小数」しかくれない。

ということです。

でも、運勢アプリで欲しいのは
「配列の中からの1つ」なので、
このランダムな小数を「インデックス」に変換していきます。

配列で「候補」をまとめて持つ感覚

おみくじ候補を配列で用意する

例えば、おみくじの結果を
こうやって配列で持ちます。

const fortunes = [
  "大吉",
  "中吉",
  "小吉",
  "吉",
  "末吉",
  "凶"
];
JavaScript

ここでのポイントは、

複数の候補（文字）を
1つの配列にまとめて管理していることです。

fortunes[0] → “大吉”
fortunes[1] → “中吉”
fortunes[2] → “小吉”
…というふうに、数字でアクセスできます。

配列の長さ（要素数）は fortunes.length で分かります。

console.log(fortunes.length); // 6
JavaScript

「6種類の結果があるおみくじ」だ、とわかります。

ランダムな配列の要素を選ぶまでの流れ

ステップを日本語で整理する

やりたいことはこうです。

  1. fortunes の中から
  2. ランダムに1つインデックスを決めて
  3. そのインデックスの要素を取り出す

つまり、

「0〜(配列の長さ − 1)のどれか」を
ランダムに選べればOKです。

fortunes.length は 6 なので、

0〜5 のどれかをランダムに選びたい。

これを Math.random で作ります。

Math.random から「0〜配列長−1の整数」を作る

まずは「0以上 length 未満」の小数を作る

Math.random() は 0〜1未満なので、

Math.random() * fortunes.length

とすると、
0 以上 6 未満 の小数になります。

例（イメージ）：

Math.random() → 0.2 → 0.2 * 6 = 1.2
Math.random() → 0.8 → 0.8 * 6 = 4.8

ここまでで、「範囲の拡大」はできました。
次は“小数を整数にする”です。

Math.floor で「小数点以下を切り捨てる」

JavaScript には、
「小数点以下を切り捨てる」関数があります。

Math.floor(1.2); // 1
Math.floor(4.8); // 4
Math.floor(0.0); // 0
JavaScript

これを組み合わせると、

const index = Math.floor(Math.random() * fortunes.length);
JavaScript

で、
0〜5 のいずれかの整数が手に入ります。

ここが今日の超重要ポイントです。

「配列のランダム要素を取る =
Math.floor(Math.random() * 配列.length) をインデックスにする」

この形は、何度も何度も使います。

実際にランダムおみくじを1回実行するコード

コンソールで動かす一番小さい例

ここまでを使って、
「おみくじ結果を1回表示するだけ」のコードを書いてみます。

const fortunes = [
  "大吉",
  "中吉",
  "小吉",
  "吉",
  "末吉",
  "凶"
];

const index = Math.floor(Math.random() * fortunes.length);
const result = fortunes[index];

console.log("今日の運勢は……");
console.log(result + "です！");
JavaScript

流れを日本語にすると：

  1. fortunes 配列に全部の結果を入れる
  2. Math.random() で 0〜1 の小数を得る
  3. それに fortunes.length（6）を掛けて 0〜6未満に広げる
  4. Math.floor で 0〜5 のどれかの整数を作る
  5. その整数をインデックスとして fortunes[index] を取り出す
  6. 「今日の運勢は……」「◯◯です！」と表示する

頭の中で動きを追ってみてください。

HTMLと組み合わせて「ボタン付きおみくじ」にするイメージ

超シンプルな画面の形

1日目はイメージレベルでOKですが、
HTML と組み合わせるとこんな感じになります。

<button id="omikuji-button">おみくじをひく</button>
<div id="result"></div>

JavaScript 側ではこう。

const fortunes = [
  "大吉",
  "中吉",
  "小吉",
  "吉",
  "末吉",
  "凶"
];

const buttonEl = document.getElementById("omikuji-button");
const resultEl = document.getElementById("result");

buttonEl.addEventListener("click", () => {
  const index = Math.floor(Math.random() * fortunes.length);
  const result = fortunes[index];
  resultEl.textContent = "今日の運勢: " + result;
});
JavaScript

ボタンを押すたびに、

インデックスをランダムに作る
配列からその要素を取り出す
画面の <div> に表示する

という流れになります。

今日は「こうつながるんだな」と
ざっくりイメージできれば十分です。

1日目で特に深掘りしておきたいポイント

1つ目：Math.random と配列.length の組み合わせ

ここは本当に大事なので、もう一度式だけ整理します。

const index = Math.floor(Math.random() * fortunes.length);
JavaScript

Math.random() → 0〜1未満
Math.random() * fortunes.length → 0〜 length 未満
Math.floor(…) → 0〜 length-1 の整数

配列のインデックスは 0 から始まります。
要素数が 6 のとき、
インデックスは 0〜5 です。

だから、

0〜(length−1) の整数を作る
→ その値をインデックスに使う

という流れが、配列とランダムをつなぐ“橋”になります。

2つ目：候補を配列にまとめると「増やすのが楽」になる

もし fortunes を配列ではなく
バラバラの変数で持っていたらどうでしょう。

const f1 = "大吉";
const f2 = "中吉";
// ...
JavaScript

ランダムに選ぶ処理が一気に面倒になります。

配列にしておくと、

候補を増やしたくなったら、

const fortunes = [
  "大吉",
  "中吉",
  "小吉",
  "吉",
  "末吉",
  "凶",
  "大凶"      // ← こうやって足すだけ
];
JavaScript

と追加するだけでOK。
ランダムの式は fortunes.length を使っているので、
要素数が増えても勝手に対応してくれます。

「候補の一覧は配列にまとめる」

この癖をつけておくと、
ランダム系のアプリがぐっと作りやすくなります。

1日目のまとめと、2日目へのつなぎ

今日やったことを整理すると、こうなります。

Math.random が「0以上1未満の小数」を返すことを知った。
配列に「おみくじの候補」（大吉〜凶）をまとめて持つ形を学んだ。
Math.floor(Math.random() * 配列.length) で、0〜length−1のランダムな整数を作れるようになった。
その整数をインデックスにして、fortunes[index] でランダムな要素を取り出す流れを理解した。
コンソール表示、およびボタン＋表示エリアのイメージで、ランダムおみくじアプリの全体像を掴んだ。

2日目からは、ここに

運勢にメッセージをつける（「ラッキーカラー」など）
配列の中身をもう少し構造的にする
ボタンを押すたびに見た目をちょっと工夫する

などを足しながら、
「ランダム表示アプリ」を少しずつ“アプリらしく”育てていきます。

最後にひとつだけ。

今日の中で、「あ、これランダムっぽくて面白いな」と感じたのはどこでしたか？
Math.random の数字の変わり方か、
fortunes[index] で毎回違う結果が出るところか。

その「面白い」と感じた瞬間が、
あなたとランダムアプリの一番大事な接点です。
そこを意識しながら、2日目も一緒に育てていきましょう。

次へ
1234567
スポンサーリンク
タイトルとURLをコピーしました