じゃんけんゲームを、
育てて読む。

joyful-janken/
├── simple-index.html      … シンプル版
├── index.html             … 本格版
├── manifest.webmanifest   … PWA の設定（アプリ名・アイコン）
├── sw.js                  … Service Worker（オフライン対応）
├── stylesheets/
│   ├── simple.css         … シンプル版
│   └── style.css          … 本格版
├── javascripts/
│   ├── simple.js          … シンプル版
│   └── app.js             … 本格版
├── images/                … 手の画像・アイコン
└── sounds/                … BGM・効果音

<dl class="score">
  <div>
    <dt>あなた</dt>
    <dd data-ui="player-score">0</dd>
  </div>
  …
</dl>

<div class="choices" role="group" aria-label="あなたの手">
  <button type="button" class="choice" data-choice="rock" aria-label="グー">✊</button>
  <button type="button" class="choice" data-choice="scissors" aria-label="チョキ">✌️</button>
  <button type="button" class="choice" data-choice="paper" aria-label="パー">✋</button>
</div>

<div class="result" aria-live="polite">
  <p class="result-message" data-ui="result">手を選んでください！</p>
  <p class="result-computer" data-ui="computer-choice"></p>
</div>

<button type="button" class="reset" data-action="reset">リセット</button>

// data-ui は表示する部品、data-action は操作する部品の目印。
const choiceButtons         = document.querySelectorAll('[data-choice]');
const playerScoreElement    = document.querySelector('[data-ui="player-score"]');
…
const resetButton           = document.querySelector('[data-action="reset"]');

// 手ごとに「表示する絵文字」「日本語の名前」「勝てる相手」をまとめておく。
// 勝敗のルールをここに集めると、判定の if 文が短くなる。
const HANDS = {
  rock:     { emoji: '✊', label: 'グー',   beats: 'scissors' },
  scissors: { emoji: '✌️', label: 'チョキ', beats: 'paper' },
  paper:    { emoji: '✋', label: 'パー',   beats: 'rock' },
};

// 勝敗を判定する（'player'・'computer'・'draw' のどれかを返す）
function getWinner(player, computer) {
  if (player === computer) {
    return 'draw';
  }
  // 自分の手が勝てる相手と、コンピュータの手が同じなら勝ち
  return HANDS[player].beats === computer ? 'player' : 'computer';
}

function getComputerChoice() {
  const choices = Object.keys(HANDS);  // ['rock', 'scissors', 'paper']
  const randomIndex = Math.floor(Math.random() * choices.length);
  return choices[randomIndex];
}

const scores = { player: 0, computer: 0 };
…
// スコアのデータを画面に映す
function renderScores() {
  playerScoreElement.textContent   = scores.player;
  computerScoreElement.textContent = scores.computer;
}

// ボタンが押されたら 1 回勝負する
function playGame(event) {
  // currentTarget は「イベントを登録したボタン」を指す
  const playerChoice   = event.currentTarget.dataset.choice;
  const computerChoice = getComputerChoice();
  const winner         = getWinner(playerChoice, computerChoice);

  // 先にデータを変えてから、画面を更新する
  if (winner !== 'draw') {
    scores[winner]++;
  }
  renderScores();

  resultElement.textContent = MESSAGES[winner];
  // CSS で勝ち・負け・引き分けの色を変えられるよう、状態を data 属性で渡す
  resultElement.dataset.winner = winner;
  …
}

.result-message {
  …
  /* JavaScript が付けた data-winner の値で色を変える */
  &[data-winner="player"]   { background-color: color-mix(in srgb, var(--yellow) 35%, var(--card)); }
  &[data-winner="computer"] { background-color: color-mix(in srgb, var(--red) 25%, var(--card)); }
  &[data-winner="draw"]     { background-color: color-mix(in srgb, var(--blue) 25%, var(--card)); }
}

const game = {
  state: 'idle',         // 'idle'（開始前）・'playing'（シャッフル中）・'result'（結果表示中）
  computerHand: 'guu',
  lastResult: null,      // 直前の対戦記録
  …
};
…
// 状態を data-state・data-result として HTML に渡し、色や動きの切り替えは CSS に任せる
function renderGame() {
  const { state, computerHand, lastResult } = game;
  ui.game.dataset.state = state;
  ui.game.dataset.result = state === 'result' ? lastResult.result : '';
  …
  for (const button of ui.handButtons) {
    button.disabled = state !== 'playing';
    …
  }

  ui.startButton.disabled = state === 'playing';
  ui.startLabel.textContent = state === 'idle' ? 'じゃんけんを はじめる' : 'もう一度あそぶ';

  ui.message.textContent = messageFor(game);
}

/* シャッフル中は手を揺らす */
.game[data-state="playing"] .opponent-hand {
  animation: shake .5s ease-in-out infinite;
}
…
.message {
  …
  /* & を後ろに書くと「.game が win のときの .message」という意味になる */
  .game[data-result="win"] &  { background-color: var(--win-bg); }
  .game[data-result="lose"] & { background-color: var(--lose-bg); }
  .game[data-result="draw"] & { background-color: var(--draw-bg); }
}

// 一定の間隔でコンピュータの手を切り替える。
// 経過時間をためて判定するので、画面の更新頻度が違う端末でも速さが揃う。
// （1 秒に 60 回描く画面でも 120 回描く画面でも、250 ミリ秒ごとに切り替わる）
// time には、ページを開いてからの時刻（ミリ秒）が入る
function shuffle(time) {
  if (game.state !== 'playing') {
    return;
  }

  game.elapsed += time - game.lastTime;
  game.lastTime = time;

  if (game.elapsed >= SHUFFLE_MS) {
    // 250 で割った余りを残し、次に切り替えるまでの時間がずれないようにする
    game.elapsed %= SHUFFLE_MS;
    …
  }

  // 次のフレームでも自分を呼ぶよう予約する
  game.frameId = requestAnimationFrame(shuffle);
}

class JankenRecord {
  // # で始まる名前は、クラスの外から読み書きできない（プライベートフィールド）
  #totals  = { win: 0, lose: 0, draw: 0 };
  #history = [];
  …
  // 1 回分の対戦を記録し、その記録を返す
  add(player, computer) {
    const entry = { at: new Date().toISOString(), player, computer, result: judge(player, computer) };
    this.#totals[entry.result]++;
    this.#history.push(entry);
    // 古い履歴から捨てて、保存量を一定に保つ
    if (this.#history.length > HISTORY_LIMIT) {
      this.#history.shift();
    }
    return entry;
  }
  …
  // 勝率はあいこを除いて計算する。まだ勝敗がついていなければ null
  get winRate() {
    const decided = this.#totals.win + this.#totals.lose;
    return decided === 0 ? null : this.#totals.win / decided;
  }
  …
}

static from(value) {
  if (value === null || typeof value !== 'object' || Array.isArray(value)) {
    return null;
  }

  const { totals, history } = value;
  const isCount = (n) => Number.isInteger(n) && n >= 0;
  if (!totals || !RESULT_IDS.every((id) => isCount(totals[id]))) {
    return null;
  }
  …
}

const storage = {
  load(key) {
    try {
      const text = localStorage.getItem(key);
      return text === null ? null : JSON.parse(text);
    } catch (error) {
      console.warn(`${key} を読み込めませんでした`, error);
      return null;
    }
  },

  save(key, value) {
    try {
      localStorage.setItem(key, JSON.stringify(value));
      return true;
    } catch (error) {
      console.warn(`${key} を保存できませんでした`, error);
      return false;
    }
  },
};

// ?. は、左側が null や undefined のときにエラーにせず undefined を返す。
// 保存がない初回は undefined !== false が true になり、音は ON で始まる
const settings = { sound: storage.load(SETTINGS_KEY)?.sound !== false };
// ?? は、左側が null や undefined のときだけ右側を使う。
// 保存がない・壊れているときは、空の成績から始める
let record = JankenRecord.from(storage.load(RECORD_KEY)) ?? new JankenRecord();

function exportRecord() {
  // 3 つ目の 2 は字下げの幅。人が開いても読みやすい形で書き出す
  const json = JSON.stringify(record, null, 2);
  // Blob はファイルの中身になるデータのかたまり。createObjectURL() でそれを指す一時的な URL を作る
  const file = new Blob([json], { type: 'application/json' });
  const url = URL.createObjectURL(file);

  // download 属性の付いたリンクを押すと、ページを移動せずにこの名前で保存される。
  // 画面には置かず、click() で押したことにする
  const link = document.createElement('a');
  link.href = url;
  link.download = `janken-record-${dateStamp(new Date())}.json`;
  link.click();

  // ダウンロードが始まったあとで、一時 URL のメモリを解放する
  setTimeout(() => URL.revokeObjectURL(url), 1000);
  …
}

{
  "app": "joyful-janken",
  "version": 1,
  "savedAt": "2026-09-27T01:00:00.000Z",
  "totals": { "win": 11, "lose": 7, "draw": 4 },
  "history": [
    { "at": "2026-09-27T01:00:00.000Z", "player": "guu", "computer": "choki", "result": "win" }
  ]
}

// async を付けた関数の中では、await で時間のかかる処理の完了を待てる
async function importRecord() {
  …
  // 問題を見つけたら throw で下の catch へ飛び、理由を画面に出す
  try {
    // accept は選択画面の目安にすぎないので、大きさと中身を必ず確かめる
    if (file.size > FILE_SIZE_LIMIT) {
      throw new Error('ファイルが大きすぎます');
    }

    let data;
    try {
      // file.text() はファイルの中身を文字列として読む。時間がかかるので await で待つ
      data = JSON.parse(await file.text());
    } catch {
      throw new Error('JSON ファイルではありません');
    }
    if (data?.app !== FILE_APP_NAME) {
      throw new Error('じゃんけんゲームの成績ファイルではありません');
    }
    …
    const imported = JankenRecord.from(data);
    if (!imported) {
      throw new Error('成績の内容に誤りがあります');
    }
    …
  } catch (error) {
    showDataMessage(`読み込めませんでした：${error.message}`, 'error');
  }
}

<!-- 確認ダイアログ。method="dialog" のフォームは、押したボタンの value を returnValue に入れて閉じる -->
<dialog class="confirm" data-ui="confirm" aria-labelledby="confirm-h">
  <form method="dialog">
    <h2 id="confirm-h" class="confirm-title" data-ui="confirm-title">確認</h2>
    <p data-ui="confirm-text"></p>
    <div class="confirm-actions">
      <button type="submit" class="button" value="cancel" autofocus>やめる</button>
      <button type="submit" class="button button-danger" value="ok" data-ui="confirm-ok">実行する</button>
    </div>
  </form>
</dialog>

// showModal() は、後ろの画面を操作できない形で開く。Esc キーでも閉じられる
ui.confirm.showModal();

// method="dialog" のフォームでは、押したボタンの value（ok / cancel）が returnValue に入る。
// { once: true } を付けると、1 回呼ばれたあと自動で登録が外れる
return new Promise((resolve) => {
  ui.confirm.addEventListener('close', () => resolve(ui.confirm.returnValue === 'ok'), { once: true });
});

.layout {
  display: grid;
  gap: var(--gutter);
  padding-block-end: clamp(1rem, 3dvh, 2rem);

  /* minmax(0, …) にすると、中身が長くても列がはみ出さず、1.15 : 1 の比率を保つ */
  @media (width >= 60rem) {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  }
}

/* 狭い画面では、画面の下からせり上がるパネルにする */
@media (width < 60rem) {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  …
  /* 閉じているときは画面の外に置き、読み上げやキーボード操作の対象からも外す */
  translate: 0 100%;
  visibility: hidden;
  …
  &.is-open {
    translate: 0 0;
    visibility: visible;
    /* 大きく広げた影で、後ろの画面を暗くする。
       vmax は画面の縦横の長いほうの 1% なので、100vmax 広げればどの画面でも全体を覆える */
    box-shadow: 0 0 0 100vmax rgb(31 28 28 / .5);
    …
  }
}

.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .6rem;

  /* 成績パネル（record）の幅が 19rem 以上あれば、4 つを 1 列に並べる */
  @container record (width >= 19rem) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

<!-- 音声。BGM は再生するまで読み込まない -->
<audio data-sound="bgm" src="sounds/bgm.mp3" preload="none" loop></audio>
<audio data-sound="win" src="sounds/win.mp3" preload="auto"></audio>

// set を付けると、sound.enabled = false のような代入で呼ばれる（セッター）。
// OFF にしたら、その場で BGM も止める
set enabled(value) {
  this.#enabled = Boolean(value);
  if (!this.#enabled) {
    this.#bgm?.pause();
  }
}

// ブラウザは利用者の操作がないと音を鳴らさないので、ボタンを押したときに呼ぶ
startBgm() {
  if (!this.#enabled || !this.#bgm || !this.#bgm.paused) {
    return;
  }
  SoundPlayer.#play(this.#bgm);
}

{
  "name": "じゃんけんゲーム",
  "short_name": "じゃんけん",
  …
  "start_url": "./",
  "display": "standalone",
  …
  "icons": [
    { "src": "images/icon-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
    { "src": "images/icon-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" }
  ]
}

const CACHE_PREFIX = 'joyful-janken-';
const CACHE_NAME = `${CACHE_PREFIX}v3`;
…
self.addEventListener('install', (event) => {
  event.waitUntil(caches.open(CACHE_NAME).then((cache) => cache.addAll(APP_FILES)));
});