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

JavaScript

2026.08.06

1日目のゴールと全体像
サイコロアプリの最小構成をイメージする
1. 画面イメージ（テキストで）
HTMLで骨組みを作る
1. 深掘りポイント
CSSで見た目を少し整える
1. 深掘りポイント
JavaScriptで「サイコロの目」を作る
1. まずは要素を取得する（DOM操作の基本）
ランダムな数字を作る関数
1. 深掘りポイント（ここはしっかり理解してほしい）
ボタンがクリックされたときにサイコロを振る
1. 深掘りポイント
1日目の完成コード（script.js 全体）
1日目で本当に掴んでほしいこと
次のステップ（2日目への予告）

1日目のゴールと全体像

サイコロアプリ 1日目のテーマは「ボタンを押すと 1〜6 の数字がランダムに表示される“シンプルなサイコロ”を作りながら、JavaScriptの基本とDOM操作・イベント処理の感覚をつかむこと」です。

1日目でやることは、とてもシンプルです。

HTMLで「ボタン」と「結果表示エリア」を作る
CSSで少しだけ見た目を整える
JavaScriptで「1〜6のランダムな数字」を作る
ボタンがクリックされたら、その数字を画面に表示する

この流れの中に、 JavaScriptの基本文法・DOM操作・イベント処理 が全部入っています。

サイコロアプリの最小構成をイメージする

まず、「一番小さいサイコロアプリ」をイメージしてみましょう。

「サイコロを振る」ボタンが1つ
「出た目」を表示する場所が1つ

これだけで、もう立派なアプリです。

画面イメージ（テキストで）

ボタン：サイコロを振る
結果表示：出た目：4 など

この「ボタン → 結果表示」の流れを、 HTML・CSS・JavaScriptで組み立てていきます。

HTMLで骨組みを作る

まずは、画面の「枠」を作ります。 HTMLは「何がどこにあるか」を決める役割です。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>サイコロアプリ 1日目</title>
  <!-- CSSファイルを読み込む -->
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h2>サイコロアプリ</h2>

  <!-- サイコロを振るボタン -->
  <button id="rollBtn">サイコロを振る</button>

  <!-- 結果表示エリア -->
  <p id="diceResult">出た目：まだ振っていません</p>

  <!-- JavaScriptファイルを読み込む -->
  <script src="script.js"></script>
</body>
</html>

深掘りポイント

id="rollBtn" と id="diceResult" が重要です。 → JavaScriptからこの2つの要素を操作します。
<script src="script.js"></script> で、別ファイルのJavaScriptを読み込んでいます。
HTMLは「ラベルを貼る」イメージを持つとわかりやすいです。 → id は「この要素に名前をつける」ためのもの。

CSSで見た目を少し整える

1日目なので、CSSはシンプルでOKです。「見やすくする」ことだけ意識しましょう。

/* 画面全体の基本スタイル */
body {
  font-family: sans-serif;
  padding: 20px;
}

/* ボタンのスタイル */
#rollBtn {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer; /* マウスを乗せたときに「手」の形にする */
}

/* 結果表示のスタイル */
#diceResult {
  font-size: 24px;
  margin-top: 20px;
}

深掘りポイント

CSSは「見た目のルール」を書く場所。
#rollBtn は「idがrollBtnの要素」に対するスタイル。
cursor: pointer; は「クリックできそう」に見せるための小さな工夫。

JavaScriptで「サイコロの目」を作る

ここからが1日目のメインです。 JavaScriptで「1〜6のランダムな数字」を作り、それを画面に表示します。

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

// ボタンと結果表示エリアの要素を取得する
const rollBtn = document.getElementById("rollBtn");
const diceResult = document.getElementById("diceResult");

// ボタンと結果表示エリアの要素を取得する
const rollBtn = document.getElementById("rollBtn");
const diceResult = document.getElementById("diceResult");

JavaScript

document.getElementById("rollBtn") → HTMLの中から id="rollBtn" の要素を探して、JavaScriptで使えるようにする。
const は「一度代入したら変わらない変数」を作るキーワード。 → 要素の参照は基本的に変えないので const が適しています。

ランダムな数字を作る関数

サイコロの目は 1〜6 の整数です。 JavaScriptでランダムな整数を作る基本パターンを覚えましょう。

// 1〜6のランダムな整数を返す関数
function rollDice() {
  // Math.random() は 0以上1未満のランダムな小数を返す
  const random = Math.random(); // 例: 0.1234 や 0.9876 など

  // 0〜5の範囲の整数を作る
  const random0to5 = Math.floor(random * 6);

  // 1〜6にしたいので +1 する
  const diceNumber = random0to5 + 1;

  return diceNumber;
}

// 1〜6のランダムな整数を返す関数
function rollDice() {
  // Math.random() は 0以上1未満のランダムな小数を返す
  const random = Math.random(); // 例: 0.1234 や 0.9876 など

  // 0〜5の範囲の整数を作る
  const random0to5 = Math.floor(random * 6);

  // 1〜6にしたいので +1 する
  const diceNumber = random0to5 + 1;

  return diceNumber;
}

JavaScript

深掘りポイント（ここはしっかり理解してほしい）

Math.random() は 0以上1未満 のランダムな数。例：0.0〜0.9999…
random * 6 で 0以上6未満 の数になる。例：0.0〜5.9999…
Math.floor() は「小数点以下を切り捨てて整数にする」関数。 → 0〜5 の整数になる。
最後に +1 することで、 0〜5 → 1〜6 に変換している。

このパターンは、 「1〜Nのランダムな整数を作る基本形」 なので、ぜひ覚えておいてほしいところです。

ボタンがクリックされたときにサイコロを振る

次に、「ボタンが押されたら rollDice() を呼ぶ」仕組みを作ります。これが イベント処理 です。

// ボタンがクリックされたときの処理を登録する
rollBtn.addEventListener("click", function() {
  // サイコロの目をランダムに取得
  const number = rollDice();

  // 結果表示エリアのテキストを書き換える
  diceResult.textContent = `出た目：${number}`;
});

// ボタンがクリックされたときの処理を登録する
rollBtn.addEventListener("click", function() {
  // サイコロの目をランダムに取得
  const number = rollDice();

  // 結果表示エリアのテキストを書き換える
  diceResult.textContent = `出た目：${number}`;
});

JavaScript

深掘りポイント

addEventListener("click", function() { ... }) → 「クリックされたときに、この中の処理を実行してね」という意味。
function() { ... } の中身が「イベントが起きたときの動き」。
diceResult.textContent = ... で、 HTMLの <p id="diceResult"> の中身を書き換えている。

ここで大事なのは、 「イベントが起きたら関数を呼ぶ → 関数の結果をDOMに反映する」 という流れです。

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

// ボタンと結果表示エリアの要素を取得
const rollBtn = document.getElementById("rollBtn");
const diceResult = document.getElementById("diceResult");

// 1〜6のランダムな整数を返す関数
function rollDice() {
  // 0以上1未満のランダムな小数
  const random = Math.random();

  // 0〜5の整数に変換
  const random0to5 = Math.floor(random * 6);

  // 1〜6にするために +1
  const diceNumber = random0to5 + 1;

  return diceNumber;
}

// ボタンがクリックされたときの処理
rollBtn.addEventListener("click", function() {
  // サイコロの目を取得
  const number = rollDice();

  // 結果を画面に表示
  diceResult.textContent = `出た目：${number}`;
});

// ボタンと結果表示エリアの要素を取得
const rollBtn = document.getElementById("rollBtn");
const diceResult = document.getElementById("diceResult");

// 1〜6のランダムな整数を返す関数
function rollDice() {
  // 0以上1未満のランダムな小数
  const random = Math.random();

  // 0〜5の整数に変換
  const random0to5 = Math.floor(random * 6);

  // 1〜6にするために +1
  const diceNumber = random0to5 + 1;

  return diceNumber;
}

// ボタンがクリックされたときの処理
rollBtn.addEventListener("click", function() {
  // サイコロの目を取得
  const number = rollDice();

  // 結果を画面に表示
  diceResult.textContent = `出た目：${number}`;
});