TypeScript での開発

akashic の導入では JavaScript を利用しましたが TypeScript での開発もできます。

このページでは TypeScript での開発手順を説明しているので、JavaScript で開発する方には関係ありません。

# TypeScript とは

TypeScript は、JavaScript を拡張して作られたプログラミング言語です。TypeScript で書いたコードをコンパイルすると JavaScript のコードへと変換されるので、JavaScript が実行される環境であればすぐに使用できます。

TypeScript と JavaScript の大きな違いは型付けにあります。TypeScript はコンパイルが必要となりますが、型があることによってコードを書いている時点やコンパイル時にエラーに気付くことができます。 JavaScript は実行するまでエラーに気付きにくいという短所があります。

以下のコードは TypeScript でのコードの例となります。関数の引数や戻り値の型が指定されているので、指定した型と異なる値を指定した場合はエラーとなります。

function multFunc(a: number, b: number): string {
  return `result=${a * b}`;
}
console.log(multFunc(2)); // 引数が足りないためコンパイル時にエラーとなる

また、Visual Studio Code 等の高機能なエディターでコード補完機能も利用できます。

# TypeScript での開発を推奨しているのか？

Akashic Engine では、特に TypeScript を推奨(JavaScript を非推奨)としてはいません。TypeScript の利用に必要な知識は JavaScript よりも少し多くなるためです。

初めてプログラミングに触れる方は「とりあえず動かしやすい」JavaScript で動くものを一度作ってみていただく方がハードルが低いかと思います。 逆にある程度慣れた方、既に JavaScript や他の型付きプログラミング言語 (Java や C# など) の経験がある方は、TypeScript にチャレンジしていただくとより便利に開発いただけるのではないかと思います。

# TypeScript での開発手順

# akashic init で Typescript のゲームを作成

akashic init の --type オプションで typescript を指定し、ゲームに必要なファイルを作成します。コマンドを実行するとゲームに必要なファイルやディレクトリが作成されます。

akashic init -t typescript

akashic init　コマンドの詳細は akashic init の利用や akashic-cli 利用ガイドを参照してください。

# 必要ライブラリのインストール

akashic init コマンドで作成したディレクトリに移動し npm install コマンドを実行します。npm install コマンドは package.json の記述に沿ってゲームに必要なライブラリをインストールします。 インストールが正常終了するとカレントディレクトリに node_modules ディレクトリが生成され、インストールしたライブラリは node_modules に入っています。

npm install

# ビルド

ゲームの内容を記述するのは src ディレクトリにある main.ts となります。main.ts などの TypeScript ファイル を編集した後は必ずビルドする必要があります。

コードにエラーがある場合は、ビルド時にエラーが出力されます。正常にビルドが成功した場合は、script ディレクトリに main.js などの JavaScript ファイルが生成されます。

ビルドを行うには npm run build コマンドを実行します。

npm run build

# アセット情報の更新

ゲームに必要な画像やスクリプトファイル等を追加/削除した場合に game.json のアセット情報を更新する必要があります。 npm run update コマンドを実行することにより game.json のアセットや各種ライブラリ情報を更新します。

npm run update

# ゲームの実行

作成したゲームを実行するには npm start コマンドを実行します。npm start コマンド実行すると akashic-sandbox が起動し、Web ブラウザで http://localhost:3000/game/ を開くことでゲームが実行されます。

npm start