おみくじアプリを作ろう

💻 この課題はPCで実際にコードを書いて取り組みましょう
1

3つのファイルを作ろう

3ファイルを作成してください。

💡 ヒント
index.html, style.css, script.js を同じフォルダに作ります。
📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>おみくじ</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>

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

HTMLの構造を作ろう

タイトル、結果表示エリア、メッセージ表示エリア、ボタンのHTMLを書いてください。

💡 ヒント
タイトル（h1）、結果表示（p に id）、メッセージ表示（p に id）、ボタンを配置します。
📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

<div class="app">
  <h1>⛩️ おみくじ</h1>
  <p class="result" id="result">？</p>
  <p class="message" id="message"></p>
  <button id="draw-btn">おみくじを引く</button>
</div>
3

CSSで見た目を整えよう

おみくじらしい見た目にCSSを書いてください。

💡 ヒント
カードを中央揃えにし、結果の文字を大きく表示します。ボタンは赤系の色にすると雰囲気が出ます。
📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

* { box-sizing: border-box; margin: 0; }
body {
  font-family: sans-serif;
  background: #fff5f5;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
.app {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  padding: 40px;
  text-align: center;
  width: 320px;
}
h1 { font-size: 1.3rem; color: #333; margin-bottom: 20px; }
.result { font-size: 3rem; font-weight: bold; margin-bottom: 8px; }
.message { font-size: 1rem; color: #666; margin-bottom: 24px; min-height: 1.5em; }
button {
  padding: 12px 32px;
  font-size: 1rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  background: #e74c3c;
  color: #fff;
}
4

おみくじデータを配列で用意しよう

script.js に、おみくじの結果データを配列で用意してください。結果名・色・メッセージの3つを持たせましょう。

💡 ヒント
オブジェクトの配列を使います。各要素に name（結果名）、color（表示色）、msg（メッセージ）を持たせます。

参考: JS レッスン4

📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

const fortunes = [
  { name: "大吉", color: "#e74c3c", msg: "最高の運勢！何をやってもうまくいく！" },
  { name: "中吉", color: "#e67e22", msg: "いい感じ！積極的に行動しよう。" },
  { name: "小吉", color: "#3498db", msg: "まずまず。コツコツ頑張ろう。" },
  { name: "凶",   color: "#95a5a6", msg: "ちょっと注意。慎重に過ごそう。" }
];
5

ランダムに1つ選ぶ処理を考えよう

配列からランダムに1つの結果を選ぶ方法を考えてください。

💡 ヒント
Math.random() × 配列の長さ で 0〜3 のランダムな数を作り、Math.floor() で整数にします。
📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

const i = Math.floor(Math.random() * fortunes.length);
const f = fortunes[i];
6

ボタンクリックで結果を表示しよう

ボタンをクリックしたとき、ランダムに選んだ結果を画面に表示する処理を書いてください。

💡 ヒント
addEventListener で click イベントを登録し、textContent で結果名とメッセージを表示します。

参考: JS レッスン6

📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

document.getElementById("draw-btn").addEventListener("click", function() {
  const i = Math.floor(Math.random() * fortunes.length);
  const f = fortunes[i];
  document.getElementById("result").textContent = f.name;
  document.getElementById("message").textContent = f.msg;
});
7

結果ごとに色を変えよう

結果の文字色を、データに設定した色に変える処理を追加してください。

💡 ヒント
要素.style.color = f.color で文字色を動的に変更できます。
📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

document.getElementById("result").style.color = f.color;
8

動作確認して完成！

何度もボタンを押して、4種類の結果がランダムに出ることを確認しましょう。

💡 ヒント
何度もボタンを押して、4種類の結果がランダムに出ることを確認しましょう。
📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

完成！ボタンを何度も押して、4種類の結果がランダムに表示されればOKです。

⚠️ よくある間違い：
・Math.random() の範囲が配列の長さと合っていない
・getElementById の id 名が HTML と一致していない
・style.color の代入で = ではなく === を使ってしまう
🎯

📚 使う技術を学ぶ

⚠️ つまずいたら