約3,000種のドラえもん道具ガチャをどう作ったか（データ設計・ランダム抽選・ディープリンクSEO）

自作サイト「ドラえもん道具ガチャ」（doraemon.autoarticles.net）は、約3,000種類のひみつ道具から1つをランダムで引き当てるだけの単機能サイトだ。フレームワークもビルドも使わず、静的な index.html と2つの JavaScript（道具名の配列と説明データ）だけで動いている。この記事では、その割り切った設計判断と、手元で再現できる最小コードを説明する。

設計の要点：データを2つに分ける

道具は「名前の一覧」と「説明」を別ファイルに分けている。

  • main.js: 道具名だけを並べた巨大な配列 tools = ["あいあいガサ", "あいあいパラソル", ...]（約3,000要素）。
  • descriptions.js: 名前をキーにした説明の辞書 window.TOOL_DESC["どこでもドア"] = { desc, use }。

分ける理由は明快で、名前は網羅したいが、正確な説明を全件分は用意できないからだ。有名な道具は作品で確立した働きを正確に書き、名前から機能が読み取れる道具は簡潔に補い、説明できない道具は辞書に登録せず表示側で「準備中」にフォールバックする。捏造した設定（話数や価格など確証のないもの）を書かないための、素直な割り切りだ。

もう一つの実務的な注意として、元データには末尾に空白が混じるキー（"アセッカキン " のような）がある。参照側で必ず trim() してから照合することで、データを無理に一括修正せずに済ませている。

ランダム抽選とディープリンク

ガチャの中身は「配列から一様乱数で1件選ぶ」だけだ。凝った重み付けはしていない。検索は ?q= クエリで状態を持たせ、共有・ブックマーク・再訪問でも同じ結果が開けるようにしている（SearchAction の構造化データもこの ?q= に対応させている）。この「URLに状態を載せる」小さな工夫が、道具名の長尾検索からの流入口になる。

実際に試す

依存ゼロで、道具名配列・trim照合・ランダム抽選・?q= ディープリンクの核をブラウザだけで再現する。以下を gacha.html として保存し、ブラウザで開く。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html lang="ja">
<head><meta charset="utf-8"><title>gacha min</title></head>
<body>
  <button id="draw">ガチャを引く</button>
  <input id="q" placeholder="道具を検索">
  <pre id="out"></pre>
  <script>
    // 実サイトでは約3,000件。ここは抜粋。
    const tools = ["どこでもドア", "タケコプター", "スモールライト", "アセッカキン "];
    // 説明は用意できたものだけ。無ければ「準備中」にフォールバック。
    const DESC = { "どこでもドア": "行きたい場所へ一瞬でつながる移動の道具。" };

    const norm = s => s.trim();                 // 末尾空白対策
    const descOf = name => DESC[norm(name)] || "（説明は準備中）";

    function draw() {
      const name = tools[Math.floor(Math.random() * tools.length)];
      render(name);
    }
    function render(name) {
      document.getElementById("out").textContent = norm(name) + "\n" + descOf(name);
      // URL に状態を載せる（共有・再訪問で同じ結果を開ける）
      history.replaceState(null, "", "?q=" + encodeURIComponent(norm(name)));
    }
    function search(q) {
      const hit = tools.find(t => norm(t).includes(norm(q)));
      if (hit) render(hit);
    }

    document.getElementById("draw").onclick = draw;
    document.getElementById("q").oninput = e => search(e.target.value);
    // 起動時に ?q= を復元（ディープリンク）
    const q = new URLSearchParams(location.search).get("q");
    q ? search(q) : draw();
  </script>
</body>
</html>

期待される動作:

  • 「ガチャを引く」を押すたびにランダムで道具が表示され、URLが ?q=どこでもドア のように書き換わる。
  • 検索欄に「どこでも」と入れると部分一致でヒットする。
  • gacha.html?q=タケコプター を直接開くと、その道具が最初から表示される（ディープリンク）。
  • 説明が無い道具は「（説明は準備中）」になり、エラーにならない。

数千件でも、配列と辞書に分けて trim 照合するだけなら、この規模のフロントは軽量に保てる。実際の完成物は ドラえもん道具ガチャ で触れる。

まとめ

  • データは「網羅する名前」と「正確に書ける説明」を分離し、無い説明は捏造せずフォールバックする。
  • ランダム抽選は一様乱数で十分。凝る前にまず動くものを。
  • ?q= で状態をURLに載せると、共有性と長尾SEOの入口を同時に得られる。
プログラミング
#JavaScript #SEO #静的サイト #データ設計
約3,000種のドラえもん道具ガチャをどう作ったか（データ設計・ランダム抽選・ディープリンクSEO）
https://blog.hashito.biz/2026/07/12/doraemon-gacha-3000-tools-data-design/
著者
hashito
作成日
2026年7月12日
著作権