#0 TypeScriptでTA○IR○Nを作ってみた ~環境構築編~

本記事の内容

こんにちは、エンジニア志望の大学生です。
今回は最近学習をしているTypeScriptのアウトプットのために、とあるパーティー用ゲームを作ってみようと思います。
TA○IR○Nというゲームなのですが、たまたまこのゲームを知る機会があったときに、「これなら割と簡単に作れてTSのアウトプットにもなるんじゃないか？」と閃いたので作ってみようと思います。
本来は2~4人用の対人ゲームなのですが、流石に対人でリアルタイムに通信できるように作るのはハードルが高い（完成までに時間がかかり過ぎそう）ので、対CPUを想定して作ろうと思います（アウトプット程度の気楽な開発なので...）。

完成までにつまずいた箇所や勉強になったこと、エラーの対処などを書き記していけたらと思っています。というか本当に完成できるのか急に不安になってきましたが、これからよろしくお願いします。

動作環境

MacOS catalina: 10.15.7
VSCode: 1.60.1
node: v14.3.0
npm: 7.20.3
*書籍: オライリー「プログラミングTypeScript」を主に参考にしています

TypeScriptの準備

npmプロジェクトの作成

$ npm init

typscriptのインストール

$ npm install --save-dev typescript tslint @types/node

webpackのインストール

$ npm install --save-dev webpack webpack-cli ts-loader

tsconfig.jsonの準備

ルートディレクトリにtsconfig.jsonファイルを作成します。
コンパイル時の設定等を記述するようです。

tsconfig.json

{
    "compilerOptions": {
        "lib": ["ES2015", "DOM"],
        "module": "commonjs",
        "outDir": "dist",
        "sourceMap": true,
        "strict": true,
        "target": "es2015"
    },
    "include": [
        "src"
    ]
}

tslint.jsonの準備

同じくルートディレクトリにtslint.jsonファイルを作成します。
コードチェックに使用される設定だと思います。

tslint.json

{
    "defaultSeverity": "error",
    "extends": [
        "tslint:recommended"
    ],
    "jsRules": {},
    "rules": {
        "semicolon": false,
        "trailing-comma": false
    },
    "rulesDirectory": []
}

webpackの準備

続いてwebpackの設定を行います（下記コードはネットから持ってきたものになります）。上のインストールで、nodeパッケージとwebpackのどちらからでもコンパイルできるのですが、今回はweb上で動作させることを考えているのでwebpackでコンパイルしようと思っています（正直違いが曖昧なので、どこがどう違うかはあまりわかっていません）。

webpack.config.js

const path = require('path');

module.exports = {
  mode: 'development', // "production" | "development" | "none"
  entry: './ts/index.ts',
  output: {
    path: path.join(__dirname, "dist"),
    filename: "index.js"
  },
  module: {
    rules: [{
      test: /\.ts$/,
      use: 'ts-loader'
    }]
  },
  resolve: {
    modules: [
      "node_modules",
    ],
    extensions: [
      '.ts',
      '.js'
    ]
  }
};

Hello TypeScriptしてみる

これで必要最低限の準備ができました。
試しに定番の挨拶をして最終チェックをしてみようと思います。

src/index.js

console.log("Hello TypsScprit!!")

webpackでコンパイルします。
予めpackage.jsonのscript欄に書き加えた設定を使ってコンパイルしてみます。

$ npm run tsc

これでdist/index.jsが生成されていれば成功です。

終わりに

準備をするだけでだいぶ時間が経ってしまいました。
さて、次回からはいよいよゲーム制作に入っていきたいと思います。自分でもどれだけゲームを再現できるのか、不安でもあり楽しみでもあります。完成できることを祈って、今回はこの辺で終わります。
頑張るぞ！

関連記事

#1 TypeScriptでTA○IR○Nを作ってみた ~タイル配置編~