JavaScript | 1 日 60 分 × 7 日アプリ学習：JavaScript基礎・DOM操作サイコロ編

JavaScript

2026.08.06

3日目のゴールと全体像
HTMLに2つのサイコロ表示エリアを追加する
1. 深掘りポイント
CSSで見やすくする
JavaScriptで2つのサイコロを振る
1. まずは要素を取得する（DOM操作の基本）
サイコロの目を返す関数（1日目の復習）
合計値に応じて背景色を変える
1. 深掘りポイント
合計値に応じてメッセージを変える
ボタンが押されたときの処理（3日目版）
1. 深掘りポイント
3日目の完成コード（script.js 全体）
3日目で本当に掴んでほしいこと
次のステップ（4日目）

3日目のゴールと全体像

サイコロアプリ 3日目のテーマは「2つのサイコロを同時に振り、合計値を計算し、合計に応じてメッセージや色を変えることで “複数データのDOM操作” と “条件分岐の応用” を身につけること」です。

ここまでで、みなさんは

ランダム処理
DOM操作
イベント処理
条件分岐

を使って「1つのサイコロ」を動かすことができました。

3日目ではこれを 2つのサイコロ に拡張し、

2つのサイコロの目を同時に表示
合計値を計算
合計値に応じて背景色を変える
合計値に応じてメッセージを変える

という「ゲーム性のあるサイコロアプリ」に育てていきます。

HTMLに2つのサイコロ表示エリアを追加する

まずは画面の枠を増やします。

<p id="dice1">サイコロ1：まだ振っていません</p>
<p id="dice2">サイコロ2：まだ振っていません</p>
<p id="diceSum">合計：ー</p>
<p id="diceMessage"></p>

深掘りポイント

DOM操作は「どこに表示するか」が最重要
そのため、HTML側で id をつけた表示エリアを必ず用意する
JavaScriptは「その場所に何を書くか」を担当する

CSSで見やすくする

#dice1, #dice2, #diceSum {
  font-size: 20px;
  margin-top: 10px;
}

#diceMessage {
  font-size: 22px;
  margin-top: 15px;
  font-weight: bold;
}

JavaScriptで2つのサイコロを振る

まずは要素を取得する（DOM操作の基本）

const rollBtn = document.getElementById("rollBtn");
const dice1 = document.getElementById("dice1");
const dice2 = document.getElementById("dice2");
const diceSum = document.getElementById("diceSum");
const diceMessage = document.getElementById("diceMessage");

const rollBtn = document.getElementById("rollBtn");
const dice1 = document.getElementById("dice1");
const dice2 = document.getElementById("dice2");
const diceSum = document.getElementById("diceSum");
const diceMessage = document.getElementById("diceMessage");

JavaScript

サイコロの目を返す関数（1日目の復習）

function rollDice() {
  return Math.floor(Math.random() * 6) + 1;
}

function rollDice() {
  return Math.floor(Math.random() * 6) + 1;
}

JavaScript

合計値に応じて背景色を変える

合計値は 2〜12 の範囲になります。

例：

2〜4 → 赤（低い）
5〜8 → 青（普通）
9〜12 → 金色（高い）

function updateBackground(sum) {
  if (sum <= 4) {
    document.body.style.backgroundColor = "#f8d7da"; // 赤
  } else if (sum <= 8) {
    document.body.style.backgroundColor = "#cce5ff"; // 青
  } else {
    document.body.style.backgroundColor = "#fff8b3"; // 金色
  }
}

function updateBackground(sum) {
  if (sum <= 4) {
    document.body.style.backgroundColor = "#f8d7da"; // 赤
  } else if (sum <= 8) {
    document.body.style.backgroundColor = "#cce5ff"; // 青
  } else {
    document.body.style.backgroundColor = "#fff8b3"; // 金色
  }
}

JavaScript

深掘りポイント

条件分岐は「範囲」で判定することもできる
sum <= 4 のように書くと「4以下」をまとめて扱える
背景色を変えることで「合計値の強さ」が直感的に伝わる

合計値に応じてメッセージを変える

function getSumMessage(sum) {
  if (sum <= 4) return "今日は慎重にいきましょう。";
  if (sum <= 8) return "まずまずの運勢。落ち着いて進めればOK。";
  return "最高の運勢！何をしても楽しめそうです！";
}

function getSumMessage(sum) {
  if (sum <= 4) return "今日は慎重にいきましょう。";
  if (sum <= 8) return "まずまずの運勢。落ち着いて進めればOK。";
  return "最高の運勢！何をしても楽しめそうです！";
}

JavaScript

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

rollBtn.addEventListener("click", function() {
  // 2つのサイコロを振る
  const n1 = rollDice();
  const n2 = rollDice();

  // 合計値を計算
  const sum = n1 + n2;

  // 画面に表示
  dice1.textContent = `サイコロ1：${n1}`;
  dice2.textContent = `サイコロ2：${n2}`;
  diceSum.textContent = `合計：${sum}`;

  // 背景色変更
  updateBackground(sum);

  // メッセージ表示
  diceMessage.textContent = getSumMessage(sum);
});

rollBtn.addEventListener("click", function() {
  // 2つのサイコロを振る
  const n1 = rollDice();
  const n2 = rollDice();

  // 合計値を計算
  const sum = n1 + n2;

  // 画面に表示
  dice1.textContent = `サイコロ1：${n1}`;
  dice2.textContent = `サイコロ2：${n2}`;
  diceSum.textContent = `合計：${sum}`;

  // 背景色変更
  updateBackground(sum);

  // メッセージ表示
  diceMessage.textContent = getSumMessage(sum);
});

JavaScript

深掘りポイント

複数の変数を扱うときは名前を工夫する
- n1, n2 は「サイコロ1・2」を表す
複数のDOM要素を同時に書き換える
- dice1.textContent
- dice2.textContent
- diceSum.textContent
- diceMessage.textContent
関数を分けることでコードが読みやすくなる

3日目の完成コード（script.js 全体）

// 要素を取得
const rollBtn = document.getElementById("rollBtn");
const dice1 = document.getElementById("dice1");
const dice2 = document.getElementById("dice2");
const diceSum = document.getElementById("diceSum");
const diceMessage = document.getElementById("diceMessage");

// 1〜6のランダムな整数を返す関数
function rollDice() {
  return Math.floor(Math.random() * 6) + 1;
}

// 合計値に応じて背景色を変える
function updateBackground(sum) {
  if (sum <= 4) {
    document.body.style.backgroundColor = "#f8d7da"; // 赤
  } else if (sum <= 8) {
    document.body.style.backgroundColor = "#cce5ff"; // 青
  } else {
    document.body.style.backgroundColor = "#fff8b3"; // 金色
  }
}

// 合計値に応じたメッセージ
function getSumMessage(sum) {
  if (sum <= 4) return "今日は慎重にいきましょう。";
  if (sum <= 8) return "まずまずの運勢。落ち着いて進めればOK。";
  return "最高の運勢！何をしても楽しめそうです！";
}

// ボタンがクリックされたときの処理
rollBtn.addEventListener("click", function() {
  const n1 = rollDice();
  const n2 = rollDice();
  const sum = n1 + n2;

  dice1.textContent = `サイコロ1：${n1}`;
  dice2.textContent = `サイコロ2：${n2}`;
  diceSum.textContent = `合計：${sum}`;

  updateBackground(sum);
  diceMessage.textContent = getSumMessage(sum);
});

// 要素を取得
const rollBtn = document.getElementById("rollBtn");
const dice1 = document.getElementById("dice1");
const dice2 = document.getElementById("dice2");
const diceSum = document.getElementById("diceSum");
const diceMessage = document.getElementById("diceMessage");

// 1〜6のランダムな整数を返す関数
function rollDice() {
  return Math.floor(Math.random() * 6) + 1;
}

// 合計値に応じて背景色を変える
function updateBackground(sum) {
  if (sum <= 4) {
    document.body.style.backgroundColor = "#f8d7da"; // 赤
  } else if (sum <= 8) {
    document.body.style.backgroundColor = "#cce5ff"; // 青
  } else {
    document.body.style.backgroundColor = "#fff8b3"; // 金色
  }
}

// 合計値に応じたメッセージ
function getSumMessage(sum) {
  if (sum <= 4) return "今日は慎重にいきましょう。";
  if (sum <= 8) return "まずまずの運勢。落ち着いて進めればOK。";
  return "最高の運勢！何をしても楽しめそうです！";
}

// ボタンがクリックされたときの処理
rollBtn.addEventListener("click", function() {
  const n1 = rollDice();
  const n2 = rollDice();
  const sum = n1 + n2;

  dice1.textContent = `サイコロ1：${n1}`;
  dice2.textContent = `サイコロ2：${n2}`;
  diceSum.textContent = `合計：${sum}`;

  updateBackground(sum);
  diceMessage.textContent = getSumMessage(sum);
});