ブラウザゲームを Vite と TypeScript でつくる

『サボり魔勇者とツンデレ魔神』のようなブラウザゲームも、公式ハブも、 いまは Vite と TypeScript を軸に組んでいます。 「インストールして起動するゲーム」ではなく、タブを開けばすぐ遊べる——その軽さを大事にしたいからです。

なぜ Vite か

開発中にコードを直すと、ブラウザ側がさっと追従してくれる。 その「直してすぐ触る」ループが短いと、操作感や見た目の調整が気持ちよく進みます。

公開用には、ブラウザが読みやすい形にまとめてから届けます。 ローカルで快適に試して、できあがったら静的なファイルとして出す——そんな流れです。

TypeScript の安心感

ゲームは状態が多いです。プレイヤーの位置、敵、アイテム、UI…… 「この値が本当に存在するのか」「この関数は何を返すのか」を、書く時点で少しでも明らかにできると助かります。

TypeScript は、そのための型の約束事。完璧な設計図というより、 「あとで自分や未来の自分が迷わないためのメモ」に近い感覚で使っています。

画面と音は、ブラウザの標準機能

2D の描画は、ざっくり言うとキャンバスに絵を重ねていくイメージ。 スプライト（キャラやタイルの小さな画像）を並べたり動かしたりして、ダンジョンの空気をつくります。

効果音や BGM は、ブラウザ標準の音声まわりを使う想定。 「専用プレイヤーを入れる」のではなく、ページの一部として鳴らす——ブラウザゲームらしいやり方です。

細かい API 名や実装手順はここでは書きません。 大事なのは「特別な配布形式なしで、ふつうの Web 技術で遊べる」という点です。

公式サイトも同じ仲間

この公式ハブも Vite + TypeScript です。 ただしゲーム本体のような一枚キャンバスではなく、 ブログや IT のように ページを複数持つ静的サイト として組んでいます。

同じ道具箱でも、用途が違えば形は変わる。 入口（ポータル）と遊び場（ゲーム）を分けている話は、別記事にも書いてあります。

忙しい日のすき間に、ブラウザだけで少し遊べる。 その軽さを支えるのが、いまのフロントまわりです。

— monoma