7日目のゴールと今日のテーマ
7日目のテーマは
「ランダム表示アプリを“自分で説明できるところ”まで落とし込むこと」 です。
新しく覚える文法はほとんど増えません。
代わりに、これまで使ってきた
Math.random / Math.floor
配列と配列操作
ランダム関数（getRandomItem）
運勢＋ラッキーアイテムの表示
この全部を、ひとつの“完成したアプリの設計”としてまとめます。
ここまで来ると、
「ボタンを押したら、ランダムで運勢とアイテムを出すアプリくらいなら、自分で一から作れそう」
と感じられるところまで到達できます。
ランダム表示アプリの「全体像」を言葉でつかみ直す
アプリの一文説明を自分の言葉で作る
まずは、ランダム表示アプリを
一文で説明してみます。
例えば、こんな感じです。
「ボタンを押すと、運勢の候補とアイテムの候補の中からランダムに1つずつ選んで、“今日のおみくじ結果”として画面に表示するアプリ」
この一文には、もうアプリの要素が全部入っています。
運勢の候補 → 配列 fortunes
アイテムの候補 → 配列 luckyItems
ランダムに1つ選ぶ → getRandomItem（中で Math.random を使っている）
画面に表示する → DOM 要素の textContent を書き換える
7日目では、この“一文の説明”を
コードの各部分と結びつけていきます。
データ部分：何をランダムにしたいのかを全部配列に出す
運勢データの配列の役割
まず、運勢の候補一覧を配列で持っています。
const fortunes = [
{
fortune: "大吉",
rank: 5,
message: "やることが全部うまくいきそう",
luckyColor: "赤"
},
{
fortune: "中吉",
rank: 4,
message: "落ち着いて行動すると良い日",
luckyColor: "青"
},
{
fortune: "小吉",
rank: 3,
message: "小さなラッキーに気づけそう",
luckyColor: "緑"
},
{
fortune: "吉",
rank: 2,
message: "いつも通りが一番",
luckyColor: "黄色"
},
{
fortune: "末吉",
rank: 1,
message: "あと一歩でチャンスが来そう",
luckyColor: "紫"
},
{
fortune: "凶",
rank: 0,
message: "無理せず休むのが吉",
luckyColor: "白"
}
];
ここでの大事なポイントは、
配列の1要素＝“運勢1件分の情報” になっていることです。
fortune → 「大吉」「中吉」などの名前
rank → 良さを数値で表したもの
message → その運勢に対応するメッセージ
luckyColor → ラッキーカラー
この1セットがオブジェクトになっていて、
それが複数集まって配列になっています。
つまり、
「運勢の世界」をまるごと fortunes 配列で表現している、
と言ってもいい状態です。
ラッキーアイテムの配列の役割
ラッキーアイテムは、もっとシンプルな配列でした。
const luckyItems = [
"お気に入りのペン",
"新しいノート",
"温かいコーヒー",
"いつもより少し良いお茶",
"散歩用のスニーカー",
"好きな音楽のプレイリスト"
];
運勢と同じく、
「何から選ぶか」を全部ここに並べておいて、
あとは“どれを選ぶか”を Math に任せる構造です。
ランダム部分：配列から「何番目」を選ぶかをMathで決める
getRandomItem の意味を、自分の言葉で説明する
ランダムで1件を取る関数は、こうでした。
function getRandomItem(array) {
const index = Math.floor(Math.random() * array.length);
return array[index];
}
やっていることを順番に説明すると、こうなります。
渡された配列 array の長さを array.length で取る。Math.random() で 0以上1未満のランダムな小数を作る。
それに array.length を掛けて、0以上 length 未満の小数にする。Math.floor で小数点以下を切り捨て、0〜length−1 の整数を得る。
その整数をインデックスとして array[index] を返す。
つまり、
「渡された配列の中から、ランダムに1件返す汎用の道具」
です。
getRandomItem(fortunes)
→ ランダムな運勢1件（オブジェクト）が返ってくるgetRandomItem(luckyItems)
→ ランダムなアイテム1件（文字列）が返ってくる
7日目では、
この説明を“人に話せるレベル”で言えるかどうかを意識してみてください。
表示部分：決まった結果を「画面1枚の体験」にする
コンソール版の例で流れを確認する
例えば、コンソールに出すだけならこんな形です。
const fortune = getRandomItem(fortunes);
const luckyItem = getRandomItem(luckyItems);
console.log("========== 今日のおみくじ ==========");
console.log();
console.log("【運勢】 " + fortune.fortune);
console.log("メッセージ: " + fortune.message);
console.log("ラッキーカラー: " + fortune.luckyColor);
console.log();
console.log("【ラッキーアイテム】 " + luckyItem);
if (fortune.rank >= 4) {
console.log("コメント: 良い流れに、このアイテムがさらに追い風をくれそうです。");
} else if (fortune.rank >= 2) {
console.log("コメント: いつも通りの一日を、このアイテムがそっと支えてくれそうです。");
} else {
console.log("コメント: 少し疲れたら、このアイテムと一緒に一息つきましょう。");
}
console.log("====================================");
ここでは、
運勢データ（オブジェクト）
アイテム（文字列）
という「決まった結果」を、
タイトル・空行・見出し・コメント などで
“1枚の画面”に組み立てています。
ランダムなのは中身だけで、
「どこに何を表示するか」という構造は固定です。
これが 「ランダムな内容を、安定した枠に流し込む」 という設計です。
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 id="lucky-item"></div>
<div id="item-comment"></div>
</div>
JavaScriptは、こんな構造でした。
function showResult(fortune, luckyItem) {
const fortuneEl = document.getElementById("fortune");
const messageEl = document.getElementById("message");
const luckyColorEl = document.getElementById("lucky-color");
const luckyItemEl = document.getElementById("lucky-item");
const itemCommentEl = document.getElementById("item-comment");
fortuneEl.textContent = "今日の運勢: " + fortune.fortune;
messageEl.textContent = "メッセージ: " + fortune.message;
luckyColorEl.textContent = "ラッキーカラー: " + fortune.luckyColor;
luckyItemEl.textContent = "ラッキーアイテム: " + luckyItem;
if (fortune.rank >= 4) {
itemCommentEl.textContent = "このアイテムが、今日の良い流れをさらに後押ししそうです。";
} else if (fortune.rank >= 2) {
itemCommentEl.textContent = "そっと使うことで、落ち着いた一日を支えてくれそうです。";
} else {
itemCommentEl.textContent = "少し疲れたとき、このアイテムに頼ってみると良さそうです。";
}
}
const buttonEl = document.getElementById("omikuji-button");
buttonEl.addEventListener("click", () => {
const fortune = getRandomItem(fortunes);
const luckyItem = getRandomItem(luckyItems);
showResult(fortune, luckyItem);
});
この構造を言葉にすると、
ボタンがクリックされたら
→ 運勢をランダムに1件選ぶ
→ ラッキーアイテムをランダムに1件選ぶ
→ その2つを使って showResult で画面を書き換える
という流れです。
7日目では、この「イベントから表示までの一連の流れ」を
頭の中でスッと追えるかどうかを意識してみてください。
「自分で一から書くとしたら」を軽くシミュレーションしてみる
手順を言葉だけで並べてみる
もしこのアプリを、
何も見ずに一から作るとしたら、
どんな順番で考えますか？
だいたい、こうなります。
運勢の候補を配列にまとめる（オブジェクトの配列にする）
ラッキーアイテムの候補を配列にまとめる
配列からランダムに1件取る関数 getRandomItem を作る
HTML にボタンと表示用の要素を用意する
クリックイベントで、
運勢とアイテムをランダムに選ぶ
結果を画面に表示する関数 showResult を呼ぶ
この「手順リスト」が、
実際のコード構造とほぼ一致していたら、
もう頭の中で設計できている状態です。
あとは、1つひとつをコードにしていくだけ。
この感覚まで来ていれば、
初級のランダム表示アプリはちゃんと卒業です。
7日目のまとめと、これからの一歩
7日目では、新しいテクニックよりも
「ここまで学んだことを、自分の言葉で整理する」 ことをやりました。
Math.random と Math.floor で「0〜1の小数」から「配列のインデックス」を作るイメージを、自分の言葉で説明できるようになった。
配列は「候補の一覧」であり、運勢やラッキーアイテムなど“選ばれる側”を全部そこにまとめておく、という感覚を持てた。
getRandomItem のような汎用関数を作って、「ランダムで1件取る」という考え方を道具として再利用できるようになった。
ランダムで決まった結果を、HTMLや console.log を使って「1枚の画面」として組み立てる設計（ヘッダー・中身・コメント）を意識できた。
ボタンを押してから表示されるまでの流れを、「イベント → ランダム選択 → 表示」のストーリーとして追えるようになった。
ここから先は、あなた次第でいくらでも遊べます。
運勢の種類を増やす
ラッキーアイテムを増やす
ラッキーフードやラッキー時間帯を追加する
大吉のときだけ背景色を変える
すべて、
配列に候補を足す
getRandomItem で1件取る
表示の枠に流し込む
というパターンの延長です。
最後にひとつだけ、あなたに聞きたい。
このランダム表示アプリを、
もし自分の生活のどこかに“本気で使う”としたら、
どんなテーマにしますか？
朝の一言メッセージでもいいし、
勉強メニューのランダム選択でもいいし、
今日やることの中から“ひとつだけやること”を選ぶアプリでもいい。
その「使ってみたい場面」が浮かんだ瞬間、
この7日間で学んだランダム表示の知識は、
もう“サンプル”ではなく、あなたの道具になります。
