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

JavaScript
スポンサーリンク

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

3日目のテーマは
「“ランダムおみくじ”の中身と見せ方を整理して、アプリとしての形を整えること」 です。

やることは変わりません。

Math（特に Math.random）
配列操作（配列からランダムに1件取り出す）

でも今日はここまで踏み込みます。

同じランダムでも「運勢」「アドバイス」「ラッキーな一言」など、表示の“役割”を分ける
配列＋オブジェクトを、読んで分かりやすい形に整理する
「ランダム処理」と「表示処理」を分けて、アプリらしい構造に近づける

昨日作った「運勢＋メッセージ＋ラッキーカラー」を、
今日は“設計”の目線から整えていきます。

これまでのおさらい：ランダムで1件の「運勢データ」を取る

オブジェクトの配列＋ランダムインデックス

2日目までに、こんな形を作りました。

const fortunes = [
  {
    fortune: "大吉",
    message: "やることが全部うまくいきそう",
    luckyColor: "赤"
  },
  {
    fortune: "中吉",
    message: "落ち着いて行動すると良い日",
    luckyColor: "青"
  },
  {
    fortune: "小吉",
    message: "小さなラッキーに気づけそう",
    luckyColor: "緑"
  },
  {
    fortune: "吉",
    message: "いつも通りが一番",
    luckyColor: "黄色"
  },
  {
    fortune: "末吉",
    message: "あと一歩でチャンスが来そう",
    luckyColor: "紫"
  },
  {
    fortune: "凶",
    message: "無理せず休むのが吉",
    luckyColor: "白"
  }
];
JavaScript

そして、

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

console.log(result.fortune);
console.log(result.message);
console.log(result.luckyColor);
JavaScript

という流れで、
“1件の運勢データ” をランダムに取り出していました。

3日目はここから、

「ランダム処理は一箇所にまとめる」
「表示処理は別の場所でやる」

という整理をしていきます。

ランダム処理を「小さな汎用関数」にする

配列からランダムに1件取る関数を作る

昨日は getRandomFortune を作りましたが、
今日はもう少し汎用的にしてみます。

function getRandomItem(array) {
  const index = Math.floor(Math.random() * array.length);
  return array[index];
}
JavaScript

この関数は、

「どんな配列でも、ランダムに1件返してくれる」

という汎用的な道具です。

運勢用にはこう使えます。

const result = getRandomItem(fortunes);
JavaScript

ここでの重要ポイントは、

Math.random と Math.floor と array.length の組み合わせを
毎回書かなくてよくなることです。

“ランダムで1件取る”という考え方を getRandomItem に名前として閉じ込めた

この感覚を持てると、一気にコードが読みやすくなります。

「ランダム取得」と「表示」をきれいに分ける

ランダム取得は getRandomItem に任せる

今の情報を整理すると、役割はこう分かれます。

ランダムな1件を選ぶ → getRandomItem
おみくじ全体のデータ → fortunes 配列
画面にどう見せるか → 表示処理（console.log や textContent など）

まず、ランダムに1件取る部分を書きます。

const result = getRandomItem(fortunes);
JavaScript

次に、「どう見せるか」を書きます。

console.log("今日の運勢は……");
console.log(result.fortune + "です！");
console.log("メッセージ: " + result.message);
console.log("ラッキーカラー: " + result.luckyColor);
JavaScript

ここでの深掘りポイントは、

「result が何なのか」を自分の言葉で説明できるかどうかです。

result は、「運勢・メッセージ・ラッキーカラーを持った1件のオブジェクト」です。
この意味がハッキリしていれば、
result.fortune や result.message が自然に読めるようになります。

表示を“ちょっとアプリっぽく”整える

1回の実行で、ちゃんと「画面1枚」を作る

コンソール出力でも、構造を意識して並べると
一気に“アプリっぽく”なります。

const result = getRandomItem(fortunes);

console.log("========== 今日の運勢 ==========");
console.log();
console.log("結果: " + result.fortune);
console.log("メッセージ: " + result.message);
console.log("ラッキーカラー: " + result.luckyColor);
console.log("================================");
JavaScript

ここでも、

ヘッダー（タイトル）
空行
中身（結果・メッセージ・カラー）
フッター（締めの線）

という構造になっています。

ランダムなのは「中身」だけで、
「枠の形」は固定です。

“変わるところ”と“変わらないところ”を分けて考える

これは、昨日の Python の print と同じ感覚です。
JavaScript でも、表示の設計は全く同じです。

HTML 版：ボタンで引く「おみくじ画面」を整理する

HTMLの構造（シンプル版）

画面側の構造を、まずはシンプルにこう決めます。

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

<div id="result-area">
  <div id="fortune"></div>
  <div id="message"></div>
  <div id="lucky-color"></div>
</div>

ここでの役割は、

#omikuji-button → 引くボタン
#result-area → 結果全体の表示エリア
#fortune → 運勢
#message → メッセージ
#lucky-color → ラッキーカラー

です。

JavaScript側の構造を“役割ごと”に分ける

JavaScript 側を、役割ごとに整理して書きます。

まずデータ。

const fortunes = [
  {
    fortune: "大吉",
    message: "やることが全部うまくいきそう",
    luckyColor: "赤"
  },
  // ...（他の運勢も同様）
];
JavaScript

次に、ランダム取得の道具。

function getRandomItem(array) {
  const index = Math.floor(Math.random() * array.length);
  return array[index];
}
JavaScript

次に、「1件の結果を画面に表示する」関数。

function showFortune(result) {
  const fortuneEl = document.getElementById("fortune");
  const messageEl = document.getElementById("message");
  const luckyColorEl = document.getElementById("lucky-color");

  fortuneEl.textContent = "今日の運勢: " + result.fortune;
  messageEl.textContent = "メッセージ: " + result.message;
  luckyColorEl.textContent = "ラッキーカラー: " + result.luckyColor;
}
JavaScript

最後に、ボタンのイベント。

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

buttonEl.addEventListener("click", () => {
  const result = getRandomItem(fortunes);
  showFortune(result);
});
JavaScript

ここでの重要ポイントは、

ランダムを決める
→ getRandomItem

画面に表示する
→ showFortune

と、役割がきれいに分かれていることです。

「ランダムのことは getRandomItem に聞く」
「画面のことは showFortune に任せる」

こうやって“誰が何をやるか”を分けていく感覚が、
初級から中級への土台になります。

3日目で特に深掘りしておきたいこと

1つ目：Math.random の「意味」を自分の言葉で言えるか

式としては、

Math.floor(Math.random() * fortunes.length);
JavaScript

ですが、
これをただ暗記するのではなく、

「0以上1未満のランダムな小数を、
0〜length未満に広げて、
小数点以下を切り捨てて、
0〜length−1 の整数を作っている」

と自分の言葉で説明できるかどうかが大事です。

これは、配列からランダムに要素を取る
“定番パターン”です。

2つ目：配列＋オブジェクトの「形」が見えているか

fortunes の中身を見たときに、

「配列の一つひとつが、
運勢・メッセージ・カラーを持つ1件のデータだ」

と、自然に思えるかどうか。

1件の形
→ { fortune, message, luckyColor }

それが集まる
→ fortunes という配列

という二段構造が見えていると、
データを扱うのがぐっと楽になります。

3つ目：「ランダム」と「表示」を頭の中で分離できているか

今日のコードでいうと、

getRandomItem は「何を選ぶか」
showFortune は「どう見せるか」

を担当しています。

この2つを混ぜずに考えられるかどうかが、
アプリを大きくしていけるかどうかに関わってきます。

3日目のまとめと、4日目へのつなぎ

今日やったことを整理します。

Math.random と配列.length を組み合わせて、「0〜length−1 のランダムな整数」を作る意味を再確認した。
配列の中身を「オブジェクト1件」にして、運勢・メッセージ・ラッキーカラーをセットで扱う形を読み解けるようにした。
getRandomItem という汎用関数で、「配列からランダムに1件取る」処理を道具化した。
showFortune のような“表示専用関数”を作り、「ランダムを決める」「画面に出す」の役割を分けた。
HTML と組み合わせて、「ボタンを押したらランダムおみくじが更新される」アプリ構造をイメージできるようになった。

4日目からは、ここに

運勢を“強さ”ごとに並べ替えたくなるかもしれない
「大吉だけ別の演出」にしたくなるかもしれない
複数パターンのランダム（運勢とラッキーアイテムなど）を組み合わせたくなるかもしれない

そういう“欲張りな気持ち”を、
Math と配列操作の設計で支えていきます。

最後にひとつ。

今日の中で、「あ、ここは自分で説明できそうだな」と感じた場所はどこでしたか？
getRandomItem の意味か、
fortunes の1件の形か、
showFortune の役割か。

その「説明できそう」という感覚が、
あなたの中で“理解が定着し始めている場所”です。
そこを頼りにしながら、4日目のランダムアプリに進んでいきましょう。

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