JavaScript | 1 日 60 分 × 7 日アプリ学習：JavaScript基礎・DOM操作 じゃんけんゲーム編

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

1日目のゴールと全体像

じゃんけんゲーム 1日目のテーマは 「HTMLで画面を作り、JavaScriptで“グー・チョキ・パーを選んで結果を表示する”という最小のじゃんけんゲームを作りながら、DOM操作・イベント処理・基本文法を体験すること」 です。

1日目で作るのはとてもシンプルですが、 この中に JavaScript初級の基礎がすべて詰まっています。

  • HTMLでボタンを3つ作る
  • CSSで少し見た目を整える
  • JavaScriptで「ランダムに相手の手を決める」
  • ボタンを押したら結果を表示する（イベント処理）
  • DOM操作で画面を書き換える

これらを丁寧にかみ砕いて進めていきます。

じゃんけんゲームの最小構成をイメージする

画面に必要なのは次の3つだけです。

  • プレイヤーの手（ボタン）
  • コンピューターの手（表示）
  • 勝敗結果（表示）

テキストでの画面イメージ

  • ボタン：グー / チョキ / パー
  • 表示：コンピューターの手 → パー
  • 表示：結果 → あなたの勝ち！

この「ボタン → 結果表示」の流れを作るのが1日目の目標です。

HTMLで画面の骨組みを作る

HTMLは「何をどこに置くか」を決める役割です。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>じゃんけんゲーム 1日目</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h2>じゃんけんゲーム</h2>

  <!-- プレイヤーの手（ボタン） -->
  <button id="btnGu">グー</button>
  <button id="btnChoki">チョキ</button>
  <button id="btnPa">パー</button>

  <!-- コンピューターの手 -->
  <p id="cpuHand">コンピューターの手：まだ出していません</p>

  <!-- 勝敗結果 -->
  <p id="result">結果：ー</p>

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

深掘りポイント

  • id="btnGu" のように id をつけることで JavaScript から操作できるようになる
  • <p id="cpuHand"> と <p id="result"> は「表示エリア」
  • JavaScriptは「この表示エリアの中身を書き換える」役割

CSSで見た目を整える

1日目なのでシンプルでOKです。

body {
  font-family: sans-serif;
  padding: 20px;
}

button {
  padding: 10px 20px;
  margin-right: 10px;
  font-size: 16px;
  cursor: pointer;
}

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

深掘りポイント

  • cursor: pointer; は「クリックできる」見た目にするための小さな工夫
  • CSSは「見た目のルール」を書く場所
  • JavaScriptとは役割が完全に違うことを意識する

JavaScriptでじゃんけんのロジックを作る

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

const btnGu = document.getElementById("btnGu");
const btnChoki = document.getElementById("btnChoki");
const btnPa = document.getElementById("btnPa");

const cpuHand = document.getElementById("cpuHand");
const result = document.getElementById("result");
JavaScript

深掘りポイント

  • document.getElementById() は HTMLの要素を JavaScript に持ってくる魔法
  • これができると「画面を動かす」ことが可能になる

コンピューターの手をランダムに決める

じゃんけんの手は3種類。

const hands = ["グー", "チョキ", "パー"];
JavaScript

ランダムに選ぶには Math.random() × Math.floor() を使います。

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

深掘りポイント

  • Math.random() → 0以上1未満のランダムな小数
  • Math.floor() → 小数点以下を切り捨てて整数にする
  • hands.length → 配列の長さ（今回は3）
  • この組み合わせは ランダム処理の基本形

勝敗判定を作る（条件分岐の基本）

じゃんけんの勝敗は次のように決まります。

  • グー vs チョキ → グーの勝ち
  • チョキ vs パー → チョキの勝ち
  • パー vs グー → パーの勝ち
  • 同じ手 → あいこ

これを if 文で書きます。

function judge(player, cpu) {
  if (player === cpu) {
    return "あいこです";
  }

  if (
    (player === "グー" && cpu === "チョキ") ||
    (player === "チョキ" && cpu === "パー") ||
    (player === "パー" && cpu === "グー")
  ) {
    return "あなたの勝ち！";
  }

  return "あなたの負け…";
}
JavaScript

深掘りポイント

  • 条件分岐は「状況によって処理を変える」ための武器
  • || は「または」を意味する論理演算子
  • じゃんけんの勝ちパターンをまとめて書くことで読みやすくなる

ボタンが押されたときの処理（イベント処理）

btnGu.addEventListener("click", function() {
  play("グー");
});

btnChoki.addEventListener("click", function() {
  play("チョキ");
});

btnPa.addEventListener("click", function() {
  play("パー");
});
JavaScript

深掘りポイント

  • addEventListener("click", ...) は「クリックされたら実行する」
  • イベント処理は Webアプリの“動き”を作る中心

じゃんけんを実行する play 関数

function play(playerHand) {
  const cpu = getCpuHand(); // CPUの手をランダムに決める
  const resultText = judge(playerHand, cpu); // 勝敗判定

  cpuHand.textContent = `コンピューターの手：${cpu}`;
  result.textContent = `結果：${resultText}`;
}
JavaScript

深掘りポイント

  • DOM操作で画面を書き換える
  • 関数を分けることでコードが読みやすくなる
  • 「入力 → 計算 → 表示」の流れがアプリの基本

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

const btnGu = document.getElementById("btnGu");
const btnChoki = document.getElementById("btnChoki");
const btnPa = document.getElementById("btnPa");

const cpuHand = document.getElementById("cpuHand");
const result = document.getElementById("result");

const hands = ["グー", "チョキ", "パー"];

// CPUの手をランダムに決める
function getCpuHand() {
  const index = Math.floor(Math.random() * hands.length);
  return hands[index];
}

// 勝敗判定
function judge(player, cpu) {
  if (player === cpu) {
    return "あいこです";
  }

  if (
    (player === "グー" && cpu === "チョキ") ||
    (player === "チョキ" && cpu === "パー") ||
    (player === "パー" && cpu === "グー")
  ) {
    return "あなたの勝ち！";
  }

  return "あなたの負け…";
}

// ゲーム実行
function play(playerHand) {
  const cpu = getCpuHand();
  const resultText = judge(playerHand, cpu);

  cpuHand.textContent = `コンピューターの手：${cpu}`;
  result.textContent = `結果：${resultText}`;
}

// ボタンのイベント処理
btnGu.addEventListener("click", function() {
  play("グー");
});

btnChoki.addEventListener("click", function() {
  play("チョキ");
});

btnPa.addEventListener("click", function() {
  play("パー");
});
JavaScript

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

● DOM操作は「画面の中身を書き換える力」

  • textContent を使って表示を変える
  • getElementById で要素を取得する

これができると Webアプリが作れるようになる。

● イベント処理は「ユーザーの操作に反応する」

  • ボタンを押す → 関数が動く
  • 関数の中で画面を書き換える

この流れが Webアプリの基本。

● ランダム処理と条件分岐はゲームの基礎

  • Math.random()
  • Math.floor()
  • if / else

じゃんけん・サイコロ・占いなど、 どんなゲームでも必ず使う。

次のステップ（2日目）

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

  • 勝敗に応じて背景色を変える
  • 勝率を表示する
  • プレイヤーの選択を強調表示する

という「見た目が動くじゃんけんゲーム」に育てていきます。

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