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

JavaScript
スポンサーリンク

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

4日目のテーマは
「同じランダムおみくじだけど、“中身の設計”を一段きれいにする」 ことです。

学ぶものは変わりません。

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

でも今日は、そこにこういう視点を足します。

  • 「強さ」（大吉・吉・凶…）を意識して、データの中身を整理する
  • 「大吉だけ特別なメッセージ」など、“条件による出し分け”の入口に触れる
  • ランダムで取った結果を、さらに if で“解釈”して表示する感覚を持つ

機能はまだ「今日の運勢・おみくじ」のままです。
でも、“ただランダムに出す”から一歩進んで、“出た結果に応じて見せ方を変える” ところまで行きます。

3日目までのおさらい：今のランダムおみくじの姿

データの形とランダム取得の道具

いまの土台は、おそらくこんな感じです。

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

ランダムに1件取る汎用関数。

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

取り出して表示するイメージ。

const result = getRandomItem(fortunes);

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

今日はここから、「結果に応じて見せ方を変える」 という段階に進みます。

強さ（ランク）をプログラムにも持たせてみる

人間的な感覚をコード側にも埋め込む

私たちは自然にこう思っています。

大吉 → かなり良い
中吉 → 良い
吉 → まあ良い
凶 → あまり良くない

この「良い〜悪い」の強さを、
プログラムの中にも持たせてみます。

例えば、こういう数値のランクを追加できます。

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: "白"
  }
];
JavaScript

ここでのポイントは、

  • 人間の「なんとなくの順序」を、rank という数で表している
  • ランダムで取るロジックは変えずに、「解釈の材料」を増やしている

ということです。

こうしておくと、

  • rank が高いときだけ特別な表示をする
  • 後で「平均の運勢」を計算して遊ぶ

など、発展の余地が一気に広がります。

結果に応じて“特別な一言”を追加してみる

「大吉のときだけ」お祝いメッセージを出す

ランダム取得と表示のコードに、
少しだけ条件分岐を足してみます。

const result = getRandomItem(fortunes);

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

// ここから条件による出し分け
if (result.rank === 5) {
  console.log();
  console.log("★ おめでとう！今日は最高の日になりそうです！");
}
console.log("================================");
JavaScript

流れを言葉にすると、

  • ランダムに1件取得（ここは今までどおり）
  • 基本情報（運勢・メッセージ・カラー）を表示
  • もし rank が 5（大吉）なら、お祝いの一言を追加表示

です。

ここで大事なのは、

「ランダムな結果」をそのまま出すだけでなく、
結果に応じて「解釈」や「演出」を変えている

という感覚です。

Math と配列のロジックは変えずに、
“結果の扱い方”を if でコントロールしている のがミソです。

rank を使って「ざっくりコメント」を切り替える

ランクごとに評価コメントを分ける

rank をもっと活かすために、
ざっくりこんな評価を付けてみましょう。

  • rank 4〜5 → とても良い日
  • rank 2〜3 → ふつう〜まあ良い
  • rank 0〜1 → 無理しない方が良い

コードにすると、こんな感じです。

const result = getRandomItem(fortunes);

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

// ランクに応じたコメント
if (result.rank >= 4) {
  console.log("今日の総評: とても良い日になりそうです！");
} else if (result.rank >= 2) {
  console.log("今日の総評: いつも通り、落ち着いて過ごせそうです。");
} else {
  console.log("今日の総評: 無理せず、ゆっくり過ごすのが良さそうです。");
}

console.log("================================");
JavaScript

ここでの深掘りポイントは2つです。

1つ目
ランダムで出たものを、そのまま文字列として扱うだけでなく、「rank」という数値で“評価”している こと。

2つ目
if / else if / else の使い方の感覚です。

  • result.rank >= 4 が真なら、そこで処理が終わる
  • そうでなければ次の else if を見る
  • どれにも当てはまらなければ else に落ちる

この「条件分岐で表現を切り替える」感覚は、
ランダムアプリに限らず、あらゆるアプリで使います。

「大吉が出る確率をちょっと下げる」発想に触れてみる

4日目ではコードとしてやり切らなくてもいいですが、
「Math と配列」で確率をコントロールする発想にも少し触れておきます。

単純に「大吉の数」を減らす方法

いまは全て同じ確率で出ます。
fortunes の要素が6個なら、それぞれ 1/6 の確率です。

「大吉、たまに出るくらいがいいな」と思ったら、
最も簡単なのは「大吉の種類を1つだけにしておく」ことです。

もう少し進んだことを言うなら、

同じランクに複数バリエーションを持たせて
「吉は種類が多い → 出やすい」
「大吉は種類が少ない → 出にくい」

という設計もできます。

例えば、

const fortunes = [
  { fortune: "大吉", rank: 5, message: "最高の1日になりそう", luckyColor: "赤" },
  { fortune: "中吉", rank: 4, message: "いい流れが来ています", luckyColor: "青" },
  { fortune: "中吉", rank: 4, message: "身近な人との会話が鍵", luckyColor: "水色" },
  { fortune: "吉",   rank: 3, message: "落ち着いて過ごせそう", luckyColor: "緑" },
  { fortune: "吉",   rank: 3, message: "新しいことに小さく挑戦", luckyColor: "黄緑" },
  { fortune: "凶",   rank: 0, message: "今日は慎重にいきましょう", luckyColor: "白" }
];
JavaScript

同じ「中吉」や「吉」を複数入れておけば、
それらが出る確率が上がります。

ここでも、
Math.random と長さを使ったランダム取得ロジックはまったく変わりません。

「確率を変えたいときは“配列の中身”を設計する」

この視点を持てると、
ランダムアプリの表現力がぐっと増します。

ランダム＋条件分岐を 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="summary"></div>
</div>

JavaScript 側で、結果表示関数を条件付きで少しリッチにします。

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

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

  if (result.rank >= 4) {
    summaryEl.textContent = "総評: とても良い日になりそう！";
  } else if (result.rank >= 2) {
    summaryEl.textContent = "総評: いつも通り、マイペースで。";
  } else {
    summaryEl.textContent = "総評: 無理せず、ゆっくり過ごそう。";
  }
}

const buttonEl = document.getElementById("omikuji-button");
buttonEl.addEventListener("click", () => {
  const result = getRandomItem(fortunes);
  showFortune(result);
});
JavaScript

この構造の中で、

  • ランダムな選択 → getRandomItem
  • 結果に応じた表示（条件分岐）→ showFortune

と分かれているのが分かると思います。

条件分岐が入っても、

Math と配列の“ランダムの核”はそのまま

ということに気づけたら、とても良い状態です。

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

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

  • 運勢に「rank（強さ）」を持たせて、人間の感覚（良い〜悪い）をコードに埋め込んだ。
  • ランダムで選んだ結果に対して、if / else if / else を使って「大吉だけ特別なメッセージ」や「ランクごとの総評」を出せるようにした。
  • 確率を変えたいときは“Math.random をいじる”のではなく、“配列の中身（何を何個入れるか）を設計する”という発想に触れた。
  • HTML 版でも、getRandomItem（ランダム選択）と showFortune（結果表示）の役割を分けたまま、条件分岐で表示内容を変える構造をイメージした。

5日目以降は、ここに

  • 運勢とは別に「ラッキーアイテム」や「ラッキーフード」を別配列でランダム選択して組み合わせる
  • 複数のランダムを“ひとつの画面”にまとめる
  • ちょっとしたアニメーション風のメッセージ（「抽選中…」など）を入れてみる

といった「ランダム × 表現」の要素を重ねていきます。

最後に、ひとつあなたに問いを投げたい。

今日の中で、「あ、これはただのランダムじゃなくて“設計されたおみくじ”だな」と感じた瞬間はどこでしたか？
rank を追加したところか、
大吉だけ特別な一言を足したところか、
確率を配列の中身で調整しようと考えたところか。

その「設計している感覚」が、
あなたと“Math と配列で遊べるアプリ開発”をつなぐ芯になります。
そのままの感覚で、5日目のランダムアプリに進んでいきましょう。

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