2日目のゴールと今日のテーマ
2日目のテーマは
「ランダムな“結果”だけでなく、ランダムな“セットの情報”を扱えるようになること」 です。
1日目は「ランダムに1つ文字列を選ぶ」まででした。
今日はそこから一歩進めて、
- 運勢と一緒に「メッセージ」や「ラッキーカラー」を表示する
- 配列の中に「セットの情報」を入れる
- ランダムに“1つのセット（オブジェクト）”を取り出す
というところまで行きます。
Math と配列の使い方は変わりません。
「中に入れるものの形」が、少しだけレベルアップします。
1日目の振り返り：ランダムに1つ文字列を選ぶ
1日目の最小おみくじ
まずは昨日の基本形を思い出します。
const fortunes = [
"大吉",
"中吉",
"小吉",
"吉",
"末吉",
"凶"
];
const index = Math.floor(Math.random() * fortunes.length);
const result = fortunes[index];
console.log("今日の運勢は……");
console.log(result + "です！");
ここでやっていたことは、
- 配列
fortunesに候補を全部入れる Math.random()とMath.floor()とfortunes.lengthを組み合わせて
0〜(length − 1) のランダムな整数indexを作る- その
indexで配列の要素を1つ取る
という流れでした。
今日は、この「1つの文字列」だった result を
「運勢＋メッセージ＋ラッキーカラー」みたいな“小さなセット”に変えていきます。
今日のステップ①：運勢ごとにメッセージをつけたい
文字列だけだと、すぐ限界がくる
例えば、こういう表示をしたいとします。
「大吉：やることが全部うまくいきそう」
「中吉：落ち着いて行動すると良い日」
「凶：無理せず休むのが吉」
「運勢」だけでなく「メッセージ」もほしいわけです。
最初に思いつく書き方は、こうかもしれません。
const fortunes = [
"大吉：やることが全部うまくいきそう",
"中吉：落ち着いて行動すると良い日",
"小吉：小さなラッキーに気づけそう",
"吉：いつも通りが一番",
"末吉：あと一歩でチャンスが来そう",
"凶：無理せず休むのが吉"
];
これでも動きますが、
「運勢だけを別で使いたい」「メッセージだけを別で使いたい」と思った瞬間、困ります。
運勢とメッセージがくっついた“ただの1本の文字列”だからです。
ここで出てくるのが「オブジェクト」の出番です。
今日のステップ②：「1件の結果」をオブジェクトとして持つ
1件分の情報の形を決める
「運勢」と「メッセージ」をセットで持つために、
1件をオブジェクトで表現します。
例えば、こうです。
{
fortune: "大吉",
message: "やることが全部うまくいきそう"
}
この形なら、
fortuneはそのまま運勢messageはその運勢に対応するメッセージ
と、意味が分かれています。
オブジェクトの配列にする
この1件オブジェクトを、配列の中に入れていきます。
const fortunes = [
{
fortune: "大吉",
message: "やることが全部うまくいきそう"
},
{
fortune: "中吉",
message: "落ち着いて行動すると良い日"
},
{
fortune: "小吉",
message: "小さなラッキーに気づけそう"
},
{
fortune: "吉",
message: "いつも通りが一番"
},
{
fortune: "末吉",
message: "あと一歩でチャンスが来そう"
},
{
fortune: "凶",
message: "無理せず休むのが吉"
}
];
これで、
fortunes[0].fortune → “大吉”fortunes[0].message → “やることが全部うまくいきそう”
というふうに、「運勢」と「メッセージ」を別々に取り出せます。
今日の重要ポイントのひとつは、
「配列の1要素 = オブジェクト」という形にすると、“セットの情報”をランダムに扱える
という感覚です。
今日のステップ③：オブジェクトをランダムに1つ選ぶ
やることの“ランダム部分”は昨日とまったく同じ
配列からランダムに1つ選ぶ仕組みは、
昨日とまったく変わりません。
const index = Math.floor(Math.random() * fortunes.length);
const result = fortunes[index];
ただ、result の中身が
“文字列” から “オブジェクト” に変わっただけです。
その結果、
result.fortune が運勢result.message がメッセージ
というふうに使えるようになります。
コンソールでの出力例
実際にコードを書いてみます。
const fortunes = [
{ fortune: "大吉", message: "やることが全部うまくいきそう" },
{ fortune: "中吉", message: "落ち着いて行動すると良い日" },
{ fortune: "小吉", message: "小さなラッキーに気づけそう" },
{ fortune: "吉", message: "いつも通りが一番" },
{ fortune: "末吉", message: "あと一歩でチャンスが来そう" },
{ fortune: "凶", message: "無理せず休むのが吉" }
];
const index = Math.floor(Math.random() * fortunes.length);
const result = fortunes[index];
console.log("今日の運勢は……");
console.log(result.fortune + "です！");
console.log("メッセージ: " + result.message);
流れを日本語にすると、
配列 fortunes からランダムに1つオブジェクトを選ぶ。
そのオブジェクトの fortune と message を使って出力する。
“ランダムで 1件の意味のあるデータ” を
ちゃんと扱えている感覚があればOKです。
今日のステップ④：「ラッキーカラー」も足してみる
情報を1つ増やしても形は変わらない
せっかくなので、「ラッキーカラー」も付けてみます。
1件分のオブジェクトは、こういう形になります。
{
fortune: "大吉",
message: "やることが全部うまくいきそう",
luckyColor: "赤"
}
配列全体はこうです。
const fortunes = [
{
fortune: "大吉",
message: "やることが全部うまくいきそう",
luckyColor: "赤"
},
{
fortune: "中吉",
message: "落ち着いて行動すると良い日",
luckyColor: "青"
},
{
fortune: "小吉",
message: "小さなラッキーに気づけそう",
luckyColor: "緑"
},
{
fortune: "吉",
message: "いつも通りが一番",
luckyColor: "黄色"
},
{
fortune: "末吉",
message: "あと一歩でチャンスが来そう",
luckyColor: "紫"
},
{
fortune: "凶",
message: "無理せず休むのが吉",
luckyColor: "白"
}
];
ランダムに選ぶコードは、まったく変えなくていいです。
const index = Math.floor(Math.random() * fortunes.length);
const result = fortunes[index];
出力だけ増やします。
console.log("今日の運勢は……");
console.log(result.fortune + "です！");
console.log("メッセージ: " + result.message);
console.log("ラッキーカラー: " + result.luckyColor);
今日の深掘りポイントの2つ目は、
「情報を増やしたいときは、オブジェクトのプロパティを足せばいい」
“ランダムに選ぶロジック”はそのまま使い回せる
ということです。
今日のステップ⑤：ランダム取得部分を関数にして“道具化”する
getRandomFortune という関数にまとめる
「ランダムに1件選ぶ」という処理は、
今後何回も使いたくなります。
なので、ここで関数にしてしまいます。
function getRandomFortune() {
const index = Math.floor(Math.random() * fortunes.length);
return fortunes[index];
}
この関数は、
「配列 fortunes の中から、ランダムに1件返す」
という“道具”です。
使う側は、こう書けます。
const result = getRandomFortune();
console.log("今日の運勢は……");
console.log(result.fortune + "です！");
console.log("メッセージ: " + result.message);
console.log("ラッキーカラー: " + result.luckyColor);
ここでの重要ポイントは、
Math.random
Math.floor
配列.length
といった細かい話はgetRandomFortune の中だけに閉じ込めてしまえる、ということです。
“ランダム取得”を関数として切り出した瞬間、
あなたのコードは一段「アプリっぽく」なっています。
HTML と組み合わせたイメージ（ボタンで表示）
1日目より少しリッチな表示
イメージとして、HTML 側はこうだとします。
<button id="omikuji-button">おみくじをひく</button>
<div id="fortune"></div>
<div id="message"></div>
<div id="lucky-color"></div>
JavaScript 側では、さきほどの fortunes と getRandomFortune を使って、こう書けます。
const buttonEl = document.getElementById("omikuji-button");
const fortuneEl = document.getElementById("fortune");
const messageEl = document.getElementById("message");
const luckyColorEl = document.getElementById("lucky-color");
buttonEl.addEventListener("click", () => {
const result = getRandomFortune();
fortuneEl.textContent = "今日の運勢: " + result.fortune;
messageEl.textContent = "メッセージ: " + result.message;
luckyColorEl.textContent = "ラッキーカラー: " + result.luckyColor;
});
ボタンを押すたびに、
ランダムに1件のオブジェクトを取得
その中身を3つの場所に表示
という動きになります。
ここまでイメージできれば、2日目としては十分です。
2日目で特に深掘りしておきたいこと
「配列 × オブジェクト」という形の威力
1日目は「文字列の配列」でした。
2日目は「オブジェクトの配列」になりました。
この違いはとても大きいです。
文字列の配列
→ 1つの情報しか持てない（運勢だけ）
オブジェクトの配列
→ 1件ごとに複数の情報をセットで持てる
（運勢＋メッセージ＋ラッキーカラー など）
ランダムに選ぶロジックは同じ。
中に入っている“1件の重さ”が変わっただけです。
「1件の情報 = 1つのオブジェクト」
「それが複数集まる = オブジェクトの配列」
この形に慣れておくと、
今後どんなアプリを作るときも、ほぼ必ず役に立ちます。
ランダム取得を「関数」にした意味
getRandomFortune を作ったことで、
「ランダムに取る」という複雑な部分は、この関数の中だけに閉じ込められました。
使う側のコードは、
const result = getRandomFortune();
の一行で済みます。
何を返してくれるのか
（「ランダムな 1件の運勢データ」）
が自分で説明できるなら、
それはもう立派な“自作の道具”です。
2日目のまとめと、3日目へのつなぎ
今日やったことを整理します。
- 運勢だけでなく、「メッセージ」「ラッキーカラー」などの情報も扱うために、1件をオブジェクト
{ fortune, message, luckyColor }で表現した。 - そのオブジェクトを配列に並べて、「オブジェクトの配列」として候補を管理した。
Math.floor(Math.random() * fortunes.length)で、0〜length−1 のランダムな整数を作り、そのインデックスで“1件のオブジェクト”を取り出した。result.fortune/result.message/result.luckyColorのように、1件の中の複数情報を取り出して表示した。- ランダム取得処理を
getRandomFortune関数にまとめ、“自分用のランダム道具”として再利用できる形にした。
3日目からは、ここに
- 「今日の運勢」だけでなく「ラッキーアイテム」「ひとことアドバイス」などを足してみる
- 表示の仕方（テキストだけでなく、見た目）も少しだけ工夫する
- 場合によっては「別の種類のランダム」（例えば「ラッキーフード一覧」）を追加する
といった形で、
「ランダム表示アプリ」を少しずつ拡張していきます。
最後にひとつ、あなたに聞きたい。
今日の中で、「あ、1件を“オブジェクト”にすると気持ちいいな」と感じた瞬間はありましたか？
運勢・メッセージ・ラッキーカラーが1まとまりになった瞬間か、result.fortune と書いたときか。
その「気持ちよさ」が、
あなたと“データ設計”をつなぐ一番大事なポイントです。
その感覚を持ったまま、3日目のランダムアプリに進んでいきましょう。
