JavaScriptを使ったブラウザゲームに、Reactを用いる理由

私は趣味でJavaScriptを用いたブラウザゲームを作っています。

先日JavaScriptのライブラリであるReactを使ってゲームを作ってみたところ、非常に快適で、パフォーマンスも以前私が作っていたゲームよりも高かったため、この記事の中ではその経験をもとに、ブラウザゲームを作るときにReactを使う利点について書いていければと思います。

作ったゲームは以下のものです:

Lingual Ninja Games >>

パフォーマンスが高い

私がReactを用いてブラウザゲームを作る上で1番強く感じたのは、Reactを用いて作ったブラウザゲームは非常にパフォーマンスが高いということです。

前提としてCanvasなどを用いて作るゲームではなく、DOM操作によって動きを表現するようなゲームなのですが、Reactの仮想DOMという仕組みによって無駄な処理を行わないようになっているので、通常のJavaScriptで作ったブラウザゲームよりも非常にパフォーマンスが高くなりました。


この仮想DOMとは一体何なのかと言うと、無駄な描画を行わないようにするような仕組みです。


一般的にJavaScriptからDOMを操作すると、ブラウザ上ではその要素に対応するHTML要素の再描画が行われます。

この再描画という処理は、とても時間がかかる処理なので、DOMを動かすようなゲームを作ったときには、動きがカクカクしてしまうようなことがよくあります。

なぜならアクション要素を伴うゲームはタイムステップごとに描画される要素の位置を再計算して、その計算結果をもとに要素を何度も描画する必要があるからです。


その位置の計算は、少なくとも0.1秒に一回ぐらいは行われますから、毎回毎回多くの要素を再描画するのは大きなタイムロスになってしまいます。

場合によっては0.1秒以内に完了しなければいけない処理が、時間内に終わらないと言うことにもなりえます。


しかし、Reactの仮想DOMを用いることによって、これらの再描画にかかる時間を、大幅に短縮することができます。


この記事の冒頭に貼ってあるリンクから、私のゲームを遊んでくれた方であれば多少イメージが湧くと思うのですが、プレイ中のゲームの画面内には多くの要素が表示されています。

キャラクターが複数配置されていることもあれば、岩や看板、木や建物等の要素が配置されていることもあります。

そういった画面を描画するときに、毎回毎回すべての要素の位置を計算し直して、その際描画を行っていたのでは、非常に時間がかかってしまいます。


Reactを用いると何がうれしいのかと言えば、これらの要素の位置が変化したかどうかをReactが自動で検知して、動かすべき要素だけを再描画するように制御してくれるのです。


そうすることで、再描画するべき要素が格段に少なくなりますから、パフォーマンスは大きく向上します。

これがDOM操作を用いてゲームを作る上での、Reactの大きな利点の1つです。

Reactコンポーネントに情報を集約できる

Reactにはコンポーネントという概念があります。

コンポーネントとは描画する要素の情報を、1つのプログラムの部品としてまとめたものです。

このReactコンポーネントはJavaScriptによって記述されるのですが、その中には通常であればHTMLやCSSを用いて記述されるような情報も含まれています。



通常であれば、描画する要素ごとに情報がまとめられているわけではなく、HTMLならHTML、スタイルであればCSS、というように分割して記載されています。

Reactを用いればそういった情報を、描画するべき要素ごとにまとめることができるのです。

例えば表を作りたければ、その表の「見た目」も「動き」も、一か所にまとめたコンポーネントとして扱うことができます。


これによってプログラマーは描画する要素ごとに情報を整理することができ、フロントエンドプログラミングの効率がぐんと上がります。


また、HTMLやCSSのように静的に記述された情報を扱うのではなく、それらの情報をJavaScriptのオブジェクトとして扱うことができますから、プログラム内で動的に計算した結果を簡単にレイアウトに反映することができ、とても柔軟な動きを出すことができます。


これはゲームのユーザーからはあまり感じられない利点ですが、ゲームを開発する際には、非常に大きなメリットです。

Reactを使って、DOMを操作するゲームを作ろう！

このように、DOM操作を用いたゲームを作る場合、Reactは開発者に非常に大きなメリットをもたらしてくれます。

またパフォーマンスの飛躍的な向上も期待できますから、開発者だけではなくユーザーにとっても大きなメリットをもたらします。
（もちろん、ゲーム以外のアプリにも）


こういった点が現在Reactがウェブ開発の多くの現場で用いられている、大きな理由でしょう。

もしあなたがReactを使ったことがなければ、ぜひ一度Reactを使ってみて、その利点を実感してください。

最初は少し学習コストがかかるかも知れませんが、少し開発に慣れてくれば、必ず大きなメリットを実感することができるはずです。


もしReactを使ったブラウザゲームの開発などに興味があれば、この記事の1番下にあるコンタクトフォームからメッセージをくだされば、開発方法等をお教えすることもできると思います。

ゲームを作ることで楽しみながらあなたがプログラミングを学んでくれることを願っています。

この記事を読んでくださりありがとうございました。