117時報と戦っているオタクの記録

Last updated at 2025-11-25Posted at 2025-11-25

はじめに

どことは言いませんが、チケットを取る際に「〇時〇分販売開始」という界隈にいます。
私はもともと抽選界隈で戦っていたので、この〇分になった瞬間に叩くというのがどうにも慣れない。

117時報を鳴らしながらチケ発するのですが、
界隈長い友人に「これどの瞬間に押すの？」と聞いたところ

「えーーー通信環境にもよるけど、ぽーんって鳴りきる手前。感覚と慣れ。」

とふわっとした回答をいただきました。

「いや、絶対にこの瞬間ってあるじゃん！？私は！！タイムスタンプの00:00:00.000の瞬間が知りたいの！！！」

「細かいこと知らんし。いかに早番取るかって気合いしかない。」

と一刀両断されたので、気合いはあるのですがどうしても気になったのでJavaScriptの new Date();を用いて117を鳴らしながら記録を取ってみました。

【オタク用語解説】

※界隈：かいわい。自分の好きなジャンルのこと。
※抽選界隈：申込後に抽選されて整理番号や座席が決まること。なので運ゲー。
※叩く：時間になった瞬間にチケット発売画面で「購入」ボタンを押下すること。
※チケ発：ちけはつ。チケット発売の略。
※早番：はやばん。早い整理番号のことを示します。番号順で入場するので、早いほど最前列に入れます。

コード

最初はconsole.logで取ろうと思っていたのですが、そもそもどの瞬間で押したらどうなるの？が知りたいので117時報の「〇時〇分をお知らせします。た、た、た、た、た、ぽーん」の「ぽーん」を細分化しました。

HTMLがこちら↓

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="form_style.css">
    <title></title>
</head>
<body>
<h1>時報のテスト</h1>

<main>
<p id="2310">p</p>
<button data-id="2310">p の記録</button>

<p id="2311">ぽ</p>
<button data-id="2311">ぽ の記録</button>

<p id="2312">ぽー</p>
<button data-id="2312">ぽー の記録</button>

<p id="2313">ぽーん</p>
<button data-id="2313">ぽーん の記録</button>

<p id="2314">n</p>
<button data-id="2314">n の記録</button>

<hr>

<button id="clear">全部クリア</button>
</main>

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

そしてメインとなるJavaScriptがこちら↓

const buttons = document.querySelectorAll("button[data-id]");

buttons.forEach(btn => {
  btn.addEventListener("click", () => {
    const id = btn.dataset.id;
    const key = "time_" + id;
    const saved = localStorage.getItem(key);
    const p = document.getElementById(id);

    // すでに記録がある → 上書きしない
    if (saved) {
      p.textContent = p.textContent.split(" → ")[0] + " → " + saved;
      return;
    }

    // 初回記録
    const now = new Date();
    const formatted =
      now.toLocaleTimeString("ja-JP", { hour12: false }) +
      "." +
      now.getMilliseconds().toString().padStart(3, "0");

    localStorage.setItem(key, formatted);
    p.textContent = p.textContent + " → " + formatted;
  });
});

// クリアボタン
document.getElementById("clear").addEventListener("click", () => {
  localStorage.clear();
  location.reload();
});