ゲーム作るくんのサイト
ゲーム作るくん
Twitter

TypeScript と JavaScript の両方でゲーム制作してみた結果

※ 個人の感想です

結論

今では TypeScript の方がいいです。楽。

個人的には特別な理由がなければ、スクラッチで書く場合には TypeScript の方を選びます。

JavaScript の方がいいケースも当然あります

ちょっとしたゲーム(具体的にはコードが 500 行に収まる程度)を作る場合は JavaScript の方が楽、ということもあると思います。

それから、一番最初にゲームを作ろうと思ったその瞬間、

「ゲームづくりをちょっと試してみたい。なんか簡単なブロック崩しとか作ってみたい」

という気持ちが芽生えたときに、

「あ、じゃあまず Vite 入れて、TypeScript 覚えて、コンポーネントの分け方もちゃんと考えて、コンパイラオプション設定して...」

みたいなこと言われたら、めんどくさ、ってなりますもん。もういいよ、って。

なので、一番最初は Pixi.js とかを CDN で入れて、一枚の HTML ファイルだけで完結させる、とかの方がいいと思います。

ある程度ゲーム制作に慣れてきたら TypeScript の方が楽

コードが 1,000 行超えてくるあたりから、JavaScript だとつらくなってきます。

型情報でガチガチに縛ってほしい

JavaScript の場合、型情報がなく、なんでも書けてしまうというのがつらい。もっとガチガチに縛ってほしい、となってきます。

私も JavaScript に慣れていたので、最初のうちは TypeScript の

みたいな作りがめんどくさいなと思ってたんですが、プログラムがある程度の規模になると、自分の頭が追いつかなくなってきて、「型でガチガチに縛って、間違ったことは書けないようにしてくれ〜」となるんですね。

同じような理由で、ESLint の警告とかもフルで出すようにしていて、「間違ってたらすぐに指摘してください! 直すので!」という気持ちで作業してます。

一見すると TypeScript や ESLint に操られて作業しているような、機械の下に人間がいるような感覚があるんですが、あながちその感覚は間違いじゃないと思うんですが、結果、その方が頭を使わなくて良いから楽なんですよね。

TypeScript ならリファクタリングが安心して行える

VSCode で作業する場合、リファクタリングコマンド一発で簡単なリファクタリングができるわけですが、変数名や関数名を変更したいということはしょっちゅうあるんですね。

その際に、JavaScript だと複数ファイルにまたがるケースで名前の変更ができないんですよね。手動で恐る恐る名前を変更するはめになります。

個人的にはこれだけでも TypeScript を選ぶ理由になるな、という感じです。とにかく名前の変更というのは日常的に行うので。

型情報を頭に詰め込まなくて良い

TypeScript に慣れてから JavaScript に戻ってくると気づくことですが、結局、JavaScript で書いてるときは頭の中に型情報を詰め込んで作業してるんですよね。

JavaScript の場合、

「score 変数は ref 型で、Score クラスをラップしていて、Score クラスは highScore と score プロパティを持っていて…、あ、でもこの時点では score.value が undefined のケースもあるのか...」

みたいなことを考えながら以下のようなコードを書いているわけです。

if (score.value) {
  score.value.highScore = Math.max(score.value.score, score.value.highScore ?? 0);
}

これが TypeScript になると、

「スコアを管理する score っていう名前の変数があったはず。あとはよく覚えてない」

という状態でも、エディタが型情報を教えてくれるし、補完してくれるし、警告もしてくれるんですよね。

頭に詰め込んでおく要素が減った分、ゲームそのもののロジックに集中できるようになる、という感じです。

まとめ

という感じです