【ITニュース解説】Building a Serverless Web Game With WebAssembly and Three.js

この記事は、WebAssemblyとThree.jsを使って、サーバーレスなWebゲームを構築する方法を解説している。特に、オンラインのタワー積み上げゲームを題材に、その開発プロセスをステップごとに説明している。システムエンジニアを目指す初心者にも理解できるように、各ステップで使用する技術要素や具体的な手順を平易な言葉で解説する。

まず、ゲームのフロントエンドはThree.jsとTypeScriptで構築されている。Three.jsは、Webブラウザ上で3Dグラフィックスを扱うためのJavaScriptライブラリであり、TypeScriptはJavaScriptに静的型付けを加えた言語だ。これらの技術を組み合わせることで、インタラクティブで視覚的に魅力的なゲームを開発できる。バックエンドは、Taubyteというプラットフォーム上でGo言語のサーバーレス関数として実装される。サーバーレス関数は、特定のイベントが発生したときにのみ実行される関数であり、インフラの管理を気にすることなく、コードの実行に集中できる。Taubyteは、このようなサーバーレス環境を提供するプラットフォームだ。ローカル開発環境としては、TaubyteのローカルクラウドであるDreamとGitHub連携を利用する。

最初のステップでは、フロントエンドをローカルで実行する。GitHubからゲームのソースコードをクローンし、必要なパッケージをインストールして、開発サーバーを起動する。この段階では、ゲームは動作するものの、スコアはまだ保存されない。

次のステップでは、TaubyteのローカルクラウドであるDreamを起動する。Dreamは、Taubyteの機能をローカル環境でエミュレートするためのツールであり、実際のクラウド環境にデプロイする前に、ローカルで開発やテストを行うことができる。

3番目のステップでは、Taubyteのコンソールに接続する。コンソールは、Taubyteの管理画面であり、アプリケーションの作成や設定、デプロイなどを行うことができる。コンソールにログインするには、メールアドレスとGitHubアカウントを使用する。ローカルクラウドに接続するために、Dream/blackholeを選択する。

4番目のステップでは、アプリケーションを作成する。ここでは、フロントエンドとバックエンドの2つのアプリケーションを作成する。フロントエンドアプリケーションは、Webサイトをホストするためのものであり、バックエンドアプリケーションは、ランキングロジックを処理するためのものだ。フロントエンドアプリケーションの設定では、GitHubリポジトリを選択し、ドメインとパスを設定する。設定をGitHubにプッシュし、Dreamを使ってビルドをトリガーする。さらに、Dreamのドメインを/etc/hostsファイルに追加することで、ローカルでWebサイトにアクセスできるようになる。

5番目のステップでは、バックエンドを実装する。まず、ランキングを保存するためのデータベースリソースを作成する。次に、Go言語で書かれたAPIライブラリを作成する。このライブラリには、ランキングの取得や更新などの機能が含まれる。最後に、getAll、get、setの3つのサーバーレス関数を作成する。getAll関数は、ランキングをすべて取得するためのものであり、get関数は、特定のプレイヤーのスコアを取得するためのものであり、set関数は、スコアを更新するためのものだ。

6番目のステップでは、デプロイとテストを行う。Dreamを使ってビルドをプッシュし、コンソールで各関数のテストを行う。コンソール上で⚡ボタンをクリックすることで、ライブレスポンスを確認できる。

最後のステップでは、本番環境にプッシュする。ローカルクラウドのコンソールからログアウトし、Taubyteクラウドを設定する。GitHubからローカルプロジェクトをインポートし、アプリケーションのローカルドメインを本番ドメインに変更する。変更をプッシュし、ライブラリまたはWebサイトがある場合は、ビルドが機能する前にAuthにリソースを登録する必要がある。

これらのステップを完了すると、フロントエンドのゲーム、データベースとGoライブラリを備えたバックエンド、ランキングを処理する3つのサーバーレス関数が、すべてTaubyte上で実行される。Dreamを使用することで、ローカルで開発とテストを行い、準備ができたらグローバルにデプロイすることができる。