3つの遊戯王ツールを作った理由と技術構成

このサイトでは Duel Simulator、Opener Rate、duel-logger という3つの遊戯王向け Web ツールを紹介しています。運営している miyauchi は個人開発者で、遊戯王(OCG、マスターデュエル)のプレイヤーとして、自分がプレイ中に「こんなツールが欲しい」と感じた機能を自作し、無料で公開しています。本業は TypeScript を中心とした Web 開発で、これまでも GitHub 上でオープンソースソフトウェアを公開してきました。この記事では、3つのツールをなぜ、どのように作ったのか、その位置づけと技術的な背景をまとめます。

なぜ作ったのか

3つのツールに共通しているのは、「自分がプレイヤーとして使いたかったから作った」という出発点です。デッキの展開ルートを手元で再現したい、デッキの初動率を感覚ではなく数字で把握したい、対戦の結果を記録して後から振り返りたい。いずれも、遊戯王を実際にプレイする中で欲しくなる機能です。既存のツールで満たされない部分を、自分の得意分野である Web 開発の技術を使って形にし、同じニーズを持つ他のプレイヤーにも使ってもらえるよう無料で公開しています。

盤面を組み、初動を検証し、対戦を記録する3つのツールの役割

3つのツールは、それぞれ独立したアプリケーションですが、遊戯王をプレイする一連の流れをカバーするように役割が分かれています。まず Duel Simulator は、デッキ画像を読み込んで盤面を再現し、実際にカードを動かしながら展開ルートを組み立てるためのツールです。次に Opener Rate は、組み立てた初動ルートが実際にどれくらいの確率で成立するのかを、組合せ列挙による厳密計算やモンテカルロ・シミュレーションで数値として検証するためのツールです。そして duel-logger は、実戦での対戦結果を記録し、勝敗や先攻、後攻別の勝率としてデータを積み上げていくためのツールです。「盤面で展開を組む」「初動の安定性を数字で検証する」「実戦の結果を記録して振り返る」という3つの工程を、それぞれ専門のツールとして分けて作っています。

3つのツールに共通する技術構成とツールごとの工夫

3つのツールはいずれも React 19 と TypeScript をベースに、Vite でビルドし、Tailwind CSS でスタイリングしています。バックエンドとデータベースには Cloudflare を採用しており、データを永続化するツール(Opener Rate、duel-logger)は Cloudflare Workers + Cloudflare D1 という構成で、Duel Simulator は Cloudflare Pages 上にホスティングしています。同じクラウド基盤に寄せることで、個人開発でも運用の手間を抑えられるようにしています。

技術的な工夫はツールごとに異なります。Duel Simulator では、遊戯王ニューロンのデッキ画像からカード構成を読み取るために、ブラウザ内で完結する OCR エンジンである Tesseract.js を利用しています。サーバーに画像を送らずクライアント側だけで解析が完結する設計です。Opener Rate では、初動条件を満たす手札の組合せを数え上げる厳密計算エンジンを実装しており、条件が複雑になって計算コストが増えても画面が固まらないように、計算処理は Web Worker 上で実行し、既定のタイムアウト(120秒)を超えると計算を打ち切ってエラーを返す仕組みを組み込んでいます。duel-logger では、記録した対戦結果を Google Sheets へ同期できる機能を持たせており、サービスアカウント経由で連携先のスプレッドシートへのアクセス範囲を必要最小限に絞っています。

無料でブラウザ完結、プレイヤー目線で改善する運営方針

3つのツールはいずれも無料で公開しており、専用アプリのインストールは不要で、ブラウザだけで一通りの機能を使えます(duel-logger で対戦記録を保存する場合のみ、Google アカウントでのログインが必要です)。個人開発として運営しているため大規模な開発体制ではなく、いずれのツールも自分自身がプレイヤーとして感じた使いにくさや欲しい機能を起点に作られています。

紹介した3つのツールはいずれも無料で、専用アプリのインストールは不要、ブラウザだけで動作します。気になったものがあれば、まずはトップページから実際に触ってみてください。より詳しい使い方は、Duel Simulator の基本ガイドや Opener Rate の概念解説の記事でも紹介しています。