5日目のゴールと今日のテーマ
5日目のテーマは
「ランダムを“1つ”から“組み合わせ”に広げる」 ことです。
やること・使う道具は変わりません。
Math（Math.random / Math.floor）
配列操作（配列からランダムに1件取り出す）
でも今日は、こういうところまでいきます。
同時に複数のランダム（運勢・ラッキーアイテムなど）を扱う
「共通のランダム関数」を使い回す気持ちよさを体感する
結果を「1つの画面」としてきれいにまとめる
機能としては、
今日の運勢（おみくじ）
ラッキーアイテム
がランダムで表示される“ちょっと豪華なおみくじアプリ”を目指します。
ここまでのおさらい：今の「1種類ランダムおみくじ」
いま持っている設計
4日目までで、だいたいこんな形ができているはずです。
運勢データの配列とランク付きオブジェクト。
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件取る汎用関数。
function getRandomItem(array) {
const index = Math.floor(Math.random() * array.length);
return array[index];
}
ランダム取得＋表示。
const result = getRandomItem(fortunes);
console.log("========== 今日の運勢 ==========");
console.log();
console.log("結果: " + result.fortune);
console.log("メッセージ: " + result.message);
console.log("ラッキーカラー: " + result.luckyColor);
console.log("================================");
5日目は、ここに「もう1種類のランダム」を足していきます。
Math と配列の使い方は変えません。
“使い回す”だけです。
新しいランダム①：ラッキーアイテムを別配列で持つ
運勢とは独立した「アイテムの配列」を作る
運勢とは別に、
「ラッキーアイテム」をランダムに決めたいとします。
例えば、こんな一覧を用意します。
const luckyItems = [
"お気に入りのペン",
"新しいノート",
"温かいコーヒー",
"いつもより少し良いお茶",
"散歩用のスニーカー",
"好きな音楽のプレイリスト"
];
ここでは、1件あたりはシンプルな文字列にしています。
配列 luckyItems からも、getRandomItem をそのまま使ってランダムに1つ取れます。
const item = getRandomItem(luckyItems);
この時点で、
運勢 → fortunes 配列からランダムに1件
ラッキーアイテム → luckyItems 配列からランダムに1件
という“2系統のランダム”を扱える状態になります。
同じ関数を使い回せる気持ちよさ
ここで感じてほしいのは、
getRandomItem の中身は一切変えていないのに、
使う配列を変えるだけで「別の種類のランダム」を扱えていることです。
こういう関数を持っていると、
今日の運勢
ラッキーアイテム
ラッキーフード
ラッキー音楽
…全部、
「配列を作る → getRandomItem で1件取る」
という同じパターンで書けてしまいます。
運勢とラッキーアイテムを「1回の実行で両方出す」
コンソール版のイメージ
ここまでのものを組み合わせて、
コンソールでの“2つのランダム結果”を表示してみます。
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);
console.log("これを身近に置いておくと、");
console.log("少しだけ運が味方してくれるかもしれません。");
console.log("====================================");
流れを言葉にすると、
運勢をランダムに1件取る
ラッキーアイテムをランダムに1件取る
ひとつの画面（出力）として並べて表示する
ということをしているだけです。
Math.random を使っているのは、
相変わらず getRandomItem の中だけ。
それを二回呼んで、“二種類のランダム”を組み合わせている状態です。
「運勢によってアイテムのコメントを変える」一歩先の工夫
条件で一言を変える
4日目でやったように、fortune.rank を使って、
アイテムのコメントも少し変えてみましょう。
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("====================================");
やっていることはシンプルです。
運勢は運勢でランダム
アイテムはアイテムでランダム
その二つを「条件分岐」でつないで、
文章の雰囲気だけ少し変えている
というだけです。
これで、
「Math と配列でランダムを作る」
＋
「if で結果の解釈を変える」
＋
「複数のランダムを組み合わせる」
という3つが一つのアプリにまとまっています。
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>
役割はこうです。
fortune → 運勢
message → 運勢のメッセージ
lucky-color → ラッキーカラー
lucky-item → ラッキーアイテム名
item-comment → アイテムに関するひとこと
JavaScript 側で「1回のクリックで全部決める」
const fortunes = [ /* さっきの配列 */ ];
const luckyItems = [
"お気に入りのペン",
"新しいノート",
"温かいコーヒー",
"いつもより少し良いお茶",
"散歩用のスニーカー",
"好きな音楽のプレイリスト"
];
function getRandomItem(array) {
const index = Math.floor(Math.random() * array.length);
return array[index];
}
function showResult() {
const fortune = getRandomItem(fortunes);
const luckyItem = getRandomItem(luckyItems);
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 = "そっと使うことで、落ち着いた1日を支えてくれそうです。";
} else {
itemCommentEl.textContent = "少し疲れたとき、このアイテムに頼ってみると良さそうです。";
}
}
const buttonEl = document.getElementById("omikuji-button");
buttonEl.addEventListener("click", showResult);
ここで大事なのは、「1回のクリックで何が起きているか」です。
ボタンを押す
→ 運勢をランダムに決定
→ ラッキーアイテムをランダムに決定
→ rank を見て、アイテムコメントを分ける
→ 5箇所の要素に文字を流し込む
Math と配列の役割は、
ずっと「getRandomItem におまかせ」です。
5日目で特に深掘りしておきたいポイント
1つ目：同じランダム関数を「別の配列」にも普通に使える感覚
getRandomItem(fortunes)getRandomItem(luckyItems)
この2つを並べて見たときに、
「やっていることは同じ。
ただ、データの種類が違うだけ。」
と、自然に感じられるかどうか。
関数を “思想ごと再利用している” 感覚が持てたら、それはかなり大きな一歩です。
2つ目：「1回のイベントで複数のランダムをまとめる」イメージ
ボタン1回で、
運勢
アイテム
をまとめて表示している状態。
これを頭の中で「タイムライン」として追いかけてみてください。
ランダムを決める
↓
それを表示する
この順番は変わりません。
ただ、「決める」が2種類に増えただけです。
順番を追えること＝プログラムを理解できること、です。
5日目のまとめと、6日目へのつなぎ
今日やったことを、言葉で整理します。
運勢とは別に「ラッキーアイテム」の配列を用意し、配列からのランダム取得を“2系統”で使えるようにした。getRandomItem を fortunes にも luckyItems にも使い回し、「ランダム処理の再利用の気持ちよさ」を体感した。
運勢とラッキーアイテムを、1回の実行（クリック）で同時に決めて、ひとつの画面として整えた。
運勢の rank によって、ラッキーアイテムのコメントの文章を変えることで、「ランダム結果の組み合わせ＋条件分岐」の形を作った。
HTML 版でも、ボタン → ランダム決定 → DOM への表示という流れを、複数のランダム結果で扱えるような構造をイメージできるようになった。
6日目以降は、
この「ランダムの組み合わせ」を土台にして、
ラッキーフードやラッキー時間帯を足してみたり
「今日のテーマ」みたいな一言を別配列から選んだり
軽くデザイン（色やクラス）と結びつけてみたり
して、アプリとしての「遊びの幅」を広げていきます。
最後に、ひとつだけ。
今日の中で、「あ、自分の書いたおみくじ、ちょっと豪華になってきたな」と感じた瞬間はありましたか？
運勢とアイテムが同時に出たときか、
同じ getRandomItem が別の配列にもそのまま使えたときか。
その「ちょっと豪華になった」という感覚が、
あなたと“組み合わせで遊べるプログラム”をつなぐ場所です。
その感覚のまま、6日目に進んでいきましょう。
