6日目のゴールと今日のテーマ
6日目のテーマは
「ランダム表示アプリの“中身の流れ”を、設計レベルで理解する」 ことです。
使う道具はいつも通りです。
Math（Math.random / Math.floor）
配列操作（配列からランダムに1件取り出す）
ただ今日は、
ランダムの“核”がどこにあるかをはっきりさせる
「データ」・「ランダム処理」・「表示処理」を頭の中で分離する
コードを読み返して、“自分で説明できる構造”にする
ここまでを狙います。
機能は変わりません。
今日の運勢
おみくじ（＋ラッキーアイテムなど）
でも、「なんとなくできた」から
「こういう構造になっている」と言えるところまで 持っていきます。
いまのランダムおみくじアプリを“パーツ”に分解して見る
データ（何をランダムにするのか）
まず、「何をランダムにしたいのか」を全部データとして持っています。
運勢の配列（オブジェクトの配列）例：
const fortunes = [
{
fortune: "大吉",
rank: 5,
message: "やることが全部うまくいきそう",
luckyColor: "赤"
},
{
fortune: "中吉",
rank: 4,
message: "落ち着いて行動すると良い日",
luckyColor: "青"
},
// ... 他の運勢たち
];
ラッキーアイテムの配列（文字列の配列）例：
const luckyItems = [
"お気に入りのペン",
"新しいノート",
"温かいコーヒー",
"散歩用のスニーカー"
];
ここで重要なのは、
運勢の「候補の一覧」
ラッキーアイテムの「候補の一覧」
を、まず配列として全部用意している ということです。
「ランダムで選ぶ前に、“何から選ぶのか”をはっきりさせている」とも言えます。
ランダム処理（どう選ぶか）
次に、その配列からランダムに1件取る“核”があります。
function getRandomItem(array) {
const index = Math.floor(Math.random() * array.length);
return array[index];
}
ここに Math.random と Math.floor が集中しています。
0以上1未満の小数を
0以上 length 未満の小数に広げて
小数点以下を切り捨て、0〜length−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);
console.log("====================================");
HTML版なら、各要素の textContent に代入していきます。
データ（配列）
ランダム（getRandomItem）
表示（console.log や DOM 操作）
この3つにコードを“分けて見る”のが、6日目のテーマの中心です。
Math.random の“役割”をもう一度、自分の言葉にしてみる
0〜1 の世界から、配列の世界へ
式はもうおなじみだと思います。
const index = Math.floor(Math.random() * array.length);
ここで起きていることを、あえて丁寧に言葉にするとこうです。
まず、
Math.random()
ここで得られるのは、
0以上1未満（0〜0.9999…）のランダムな小数です。
次に、
Math.random() * array.length
とすると、
0以上 length 未満 の小数になります。
例えば length が 4 なら、0〜3.999… の範囲。
配列の要素数に合わせて“幅”が広がりました。
最後に、
Math.floor(...)
で小数点以下を切り捨てて、
0〜length−1 の整数にします。
配列のインデックスとしてちょうど使える数字です。
つまり Math.random は、
「0〜1の世界から始めて、配列のインデックスの世界まで連れてきてくれる」
ための入口なのだ、と整理できます。
ランダムに“何番目か”を決める → その番目の要素を使う。
これがランダム表示アプリの根っこです。
複数のランダムを「1つの流れ」として頭の中で追ってみる
運勢＋ラッキーアイテムの流れを言葉で説明する
例えば、ボタンを押したときにこうなっているとします。
const fortune = getRandomItem(fortunes);
const luckyItem = getRandomItem(luckyItems);
showResult(fortune, luckyItem);
ここで起きている流れを、上から順番に言葉で追いかけてみます。
まず getRandomItem(fortunes) が呼ばれる。
Math.random で「何番目の運勢を使うか」をランダムに決める。
決まったインデックスの要素（1件のオブジェクト）を返す。
それが fortune という変数に入る。
次に getRandomItem(luckyItems) が呼ばれる。
Math.random で「何番目のアイテムを使うか」をランダムに決める。
決まったインデックスの要素（文字列）を返す。
それが luckyItem という変数に入る。
最後に showResult(fortune, luckyItem) が呼ばれて、
画面やコンソールに結果が表示される。
この「タイミング」と「順番」を、自分の言葉で説明できるかどうかが大事です。
ランダムが複数あっても、やっていることは同じ。
「配列の中から何番目を使うか」を決めているだけです。
「変わるところ」と「変わらないところ」をコードの中で意識する
変わるのは“選ばれる中身”、変わらないのは“選び方”
ランダム表示アプリの中には、
毎回変わるところ
毎回同じロジックで動いているところ
が混ざっています。
毎回変わるもの
→ fortune の中身（どの大吉/中吉か）
→ luckyItem の中身
毎回同じなもの
→ getRandomItem の仕組み
→ showResult の「どこに何を表示するか」という枠組み
6日目でやりたいのは、
「変わるもの」と「変わらないもの」を、自分の目で分けて見ること です。
“変わらないロジック” を関数にして、
“変わるデータ” を配列の中身として差し替えている。
今あなたが書いているコードは、実はそういう構造になっています。
小さな設計整理：役割ごとにコードを並べ替える
上から読んで「何をしているファイルか」分かる形にする
6日目の手を動かす課題としておすすめなのは、
コードの“並べ方”を少し整えることです。
例えば、JavaScriptファイルを次の順番で並べてみます。
いちばん上に「データ」。
const fortunes = [ /* ... */ ];
const luckyItems = [ /* ... */ ];
次に「汎用的な道具（関数）」。
function getRandomItem(array) {
const index = Math.floor(Math.random() * array.length);
return array[index];
}
次に「表示専用の関数」。
function showResult(fortune, luckyItem) {
// DOM取得や textContent の設定
}
最後に「イベントの登録と起動」。
const buttonEl = document.getElementById("omikuji-button");
buttonEl.addEventListener("click", () => {
const fortune = getRandomItem(fortunes);
const luckyItem = getRandomItem(luckyItems);
showResult(fortune, luckyItem);
});
この順番にしておくと、ファイルを上から読んだときに、
何のデータを持っているアプリか
どんな道具（関数）を持っているか
結果をどこにどんな形で表示するか
それがいつ実行されるのか
が“ストーリー”として見えるようになります。
「上から下まで読んだときに、ちゃんと物語になっているか？」
これは、シンプルなランダムアプリでも大事な視点です。
6日目のまとめと、7日目へのつなぎ
今日のポイントを言葉で整理します。
配列は「ランダムで選ばれる候補の一覧」であり、まず“何から選ぶのか”を全部そこに載せていると理解した。
Math.random と Math.floor の組み合わせが、「0〜1の小数」から「0〜length−1のインデックス」に連れていく橋渡しだと整理できた。
運勢とラッキーアイテムなど、複数のランダムも「やっていることは全部同じ（配列の何番目かを決めている）」だと見抜けるようになってきた。
コードの中で「変わるもの（データ）」と「変わらないもの（ランダムロジックや表示の枠）」を分けて見られるようになった。
データ → 道具（関数） → 表示 → イベント、という順にファイルを並べることで、アプリ全体を“ストーリー”として読める形に近づけた。
7日目は、このランダム表示アプリの7日間を
「自分の言葉で説明できるようにする日」 になります。
Math.random で何をしているのか。
配列をどう使って候補を持っているのか。
getRandomItem や showResult が、アプリのどこを支えているのか。
運勢とラッキーアイテムを組み合わせて、どう“1画面の体験”にしているのか。
それを、もう一度自分の言葉で振り返っていきます。
最後にひとつだけ。
今のランダム表示アプリのコードを、
「友達にざっくり説明するとしたら、どう言いますか？」
「ボタンを押したら、配列からランダムに運勢とアイテムを選んで表示してくれるアプリだよ」
もしこの一文が、自分の中でしっくり来たなら、
あなたはもう“自分のアプリ”としてこのランダム表示を掴めています。
その感覚のまま、7日目の仕上げに進んでいきましょう。
