JavaScript | 1 日 60 分 × 7 日アプリ学習：JavaScript基礎・DOM操作 おみくじ編

Web APP JavaScript
スポンサーリンク
スポンサーリンク

3日目のゴールと全体像

おみくじアプリ 3日目のテーマは 「おみくじ結果に“ランク（数値）”を持たせ、背景色を変え、ラッキーアイテムを追加し、よりインタラクティブなアプリに育てること」 です。

ここまでで、みなさんは

  • ランダムに結果を選ぶ
  • 結果ごとに色を変える
  • 結果ごとにメッセージを表示する

という「見た目も楽しいおみくじ」を作りました。

3日目ではここに “情報の追加” と “画面の変化” を加えて、

  • 結果にランク（数値）を持たせる
  • ランクに応じて背景色を変える
  • ラッキーアイテムをランダム表示する
  • DOM操作で複数の要素を同時に更新する

というステップを踏みます。

結果に「ランク（数値）」を持たせる

まず、おみくじ結果に「強さ」を数値で持たせます。

オブジェクトで結果を管理する（2日目の応用）

const omikujiData = {
  "大吉": {
    rank: 5,
    message: "最高の一日になりそうです。思い切って新しいことに挑戦してみましょう！"
  },
  "中吉": {
    rank: 4,
    message: "良い流れが来ています。コツコツ続けていることが実を結びそうです。"
  },
  "小吉": {
    rank: 3,
    message: "少しずつ前に進める日。焦らず、目の前のことを丁寧にこなしましょう。"
  },
  "吉": {
    rank: 2,
    message: "穏やかな一日。周りの人との会話を大切にすると、良いヒントが得られます。"
  },
  "末吉": {
    rank: 1,
    message: "まだ結果は見えないけれど、準備をしておくと後で役に立ちます。"
  },
  "凶": {
    rank: 0,
    message: "無理をせず休むことも大事。今日は慎重に行動してみましょう。"
  }
};
JavaScript

深掘りポイント

  • オブジェクトの中にオブジェクトを入れることで、 「結果 → ランク・メッセージ」という構造を作れる。
  • omikujiData["大吉"].rank のようにアクセスできる。
  • ランクを持たせることで、背景色や演出に使える。

ランクに応じて背景色を変える

背景色を変えると、アプリが一気に“動いている感”を出します。

背景色を変える関数

function updateBackgroundByRank(rank) {
  if (rank === 5) {
    document.body.style.backgroundColor = "#fff8b3"; // 大吉：金色っぽい
  } else if (rank === 4) {
    document.body.style.backgroundColor = "#cce5ff"; // 中吉：青
  } else if (rank === 3) {
    document.body.style.backgroundColor = "#d4edda"; // 小吉：緑
  } else if (rank === 2) {
    document.body.style.backgroundColor = "#e2d4ff"; // 吉：紫
  } else if (rank === 1) {
    document.body.style.backgroundColor = "#ffe5b4"; // 末吉：オレンジ
  } else {
    document.body.style.backgroundColor = "#f8d7da"; // 凶：赤っぽい
  }
}
JavaScript

深掘りポイント

  • .style.backgroundColor はDOM操作の基本。
  • 条件分岐でランクごとに色を変える。
  • 背景色が変わると「結果の強さ」が直感的に伝わる。

ラッキーアイテムをランダム表示する

おみくじといえば「ラッキーアイテム」。 これを追加すると一気に“占いアプリ”らしくなります。

ラッキーアイテムの配列

const luckyItems = [
  "赤いペン",
  "お気に入りの本",
  "コーヒー",
  "新しいノート",
  "青い服",
  "散歩",
  "音楽プレイリスト",
  "ストレッチ",
  "おいしいお菓子"
];
JavaScript

ランダムにアイテムを選ぶ関数

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

HTMLに表示エリアを追加

<p id="luckyItem"></p>

JavaScriptで表示

const luckyItem = document.getElementById("luckyItem");
JavaScript

ボタンが押されたときの処理（3日目版）

omikujiBtn.addEventListener("click", function() {
  // ランダムな結果を取得
  const randomResult = getRandomResult();

  // 結果データを取得
  const data = omikujiData[randomResult];

  // 結果表示
  result.textContent = `今日の運勢は「${randomResult}」です`;

  // メッセージ表示
  message.textContent = data.message;

  // 背景色変更（ランクを使う）
  updateBackgroundByRank(data.rank);

  // ラッキーアイテム表示
  const item = getRandomItem();
  luckyItem.textContent = `今日のラッキーアイテム：${item}`;
});
JavaScript

深掘りポイント

  • data = omikujiData[randomResult] で「結果に対応するデータ」をまとめて取得できる。
  • DOM操作で 3つの要素を同時に書き換えている
    • result.textContent
    • message.textContent
    • luckyItem.textContent
  • 背景色変更で「視覚的フィードバック」を追加している。

3日目の完成コード（HTML＋CSS＋JavaScript）

HTML（index.html）

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>おみくじアプリ 3日目</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h2>おみくじ</h2>

  <button id="omikujiBtn">おみくじを引く</button>

  <p id="result"></p>
  <p id="message"></p>
  <p id="luckyItem"></p>

  <script src="script.js"></script>
</body>
</html>

CSS（style.css）

body {
  font-family: sans-serif;
  padding: 20px;
  transition: background-color 0.5s;
}

#result {
  font-size: 24px;
  margin-top: 20px;
}

#message {
  font-size: 16px;
  margin-top: 10px;
}

#luckyItem {
  font-size: 18px;
  margin-top: 15px;
  font-weight: bold;
}

JavaScript（script.js）

const omikujiBtn = document.getElementById("omikujiBtn");
const result = document.getElementById("result");
const message = document.getElementById("message");
const luckyItem = document.getElementById("luckyItem");

// 結果候補
const results = ["大吉", "中吉", "小吉", "吉", "末吉", "凶"];

// 結果データ
const omikujiData = {
  "大吉": { rank: 5, message: "最高の一日になりそうです。思い切って新しいことに挑戦してみましょう！" },
  "中吉": { rank: 4, message: "良い流れが来ています。コツコツ続けていることが実を結びそうです。" },
  "小吉": { rank: 3, message: "少しずつ前に進める日。焦らず、目の前のことを丁寧にこなしましょう。" },
  "吉":   { rank: 2, message: "穏やかな一日。周りの人との会話を大切にすると、良いヒントが得られます。" },
  "末吉": { rank: 1, message: "まだ結果は見えないけれど、準備をしておくと後で役に立ちます。" },
  "凶":   { rank: 0, message: "無理をせず休むことも大事。今日は慎重に行動してみましょう。" }
};

// ラッキーアイテム
const luckyItems = [
  "赤いペン", "お気に入りの本", "コーヒー", "新しいノート",
  "青い服", "散歩", "音楽プレイリスト", "ストレッチ", "おいしいお菓子"
];

// ランダムに結果を選ぶ
function getRandomResult() {
  const index = Math.floor(Math.random() * results.length);
  return results[index];
}

// ラッキーアイテムを選ぶ
function getRandomItem() {
  const index = Math.floor(Math.random() * luckyItems.length);
  return luckyItems[index];
}

// 背景色変更
function updateBackgroundByRank(rank) {
  if (rank === 5) document.body.style.backgroundColor = "#fff8b3";
  else if (rank === 4) document.body.style.backgroundColor = "#cce5ff";
  else if (rank === 3) document.body.style.backgroundColor = "#d4edda";
  else if (rank === 2) document.body.style.backgroundColor = "#e2d4ff";
  else if (rank === 1) document.body.style.backgroundColor = "#ffe5b4";
  else document.body.style.backgroundColor = "#f8d7da";
}

// ボタンイベント
omikujiBtn.addEventListener("click", function() {
  const randomResult = getRandomResult();
  const data = omikujiData[randomResult];

  result.textContent = `今日の運勢は「${randomResult}」です`;
  message.textContent = data.message;

  updateBackgroundByRank(data.rank);

  const item = getRandomItem();
  luckyItem.textContent = `今日のラッキーアイテム：${item}`;
});
JavaScript

3日目で本当に掴んでほしいこと

● オブジェクトは「複数の情報をまとめる箱」

結果 → ランク・メッセージ という構造を作ることで、 コードが読みやすく、拡張しやすくなる。

● DOM操作は「画面を作り変える力」

  • 結果
  • メッセージ
  • ラッキーアイテム
  • 背景色

これらを同時に変えることで、 アプリが一気に“動いている”ように感じられる。

● ランダム処理はゲーム・占いアプリの基本

配列 × Math.random × Math.floor この組み合わせは必ず覚えておきたい。

次のステップ

4日目ではさらに一歩進んで、

  • 結果の履歴を保存（ローカルストレージ）
  • 履歴の一覧表示（カードUI）
  • 履歴の削除ボタン追加

という「本格的なおみくじアプリ」へ育てていきます。

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