CentOSでTypeScript＋Node.js＋Webpackを使う

Vagrantで作ったCentOS6＋node.js環境にTypeScriptをインストールします。

TypeScriptの使いどころ

Node.jsで大規模な開発をする場合、TypeScriptを使って開発の生産効率性・保守性を上げることができます。また、中規模なシステムを構築する場合でもTypeScriptが非常に役立ちます。

TypeScriptとは？

Microsoftが開発するaltJSと呼ばれる言語です。JavaScriptのスーパーセット（上位互換）という位置づけで、静的型付けなど強力な言語機能を備えています。TypeScriptは高度なwebアプリケーションの開発で使われることが多く、Google社内の標準言語として2017年に採用されています。

ざっくり言うと、以下のような特徴があります。

• JavaやC#に近い感覚のプログラミングできます。
• tsファイルをコンパイルすると、JavaScriptのソースコードに変換されます。
• オープンソースで無料で利用できます。

Node.jsとは？

Node.jsは、サーバーサイドで動くJavaScriptです。Socket.IOと連携してリアルタイムなウェブコンテンツを作ったり、webpackやgulpのようなフロントエンドエンジニアのツールとして使われます。

TypeScriptの問題点

TypeScriptは、コンパイラによってJavaScriptのコードが得られます。しかし、TypeScriptのコンパイラにはECMAScript Modules（ES Modules/importやexport文のこと）をまとめる機能が提供されていません。ECMAScript ModulesのJSファイルをまとめるモジュールバンドラー（例：webpack、Rollup等）をTypeScriptと合わせて使います。

webpackとは？

tsファイルをコンパイルするとき、依存関係を処理し、ひとつのjsファイルにまとめるために使用します。

作業の流れ

1. webpackやTypeScriptなどの必要なモジュールをインストールします。
2. package.json、tsconfig.json、webpack.config.jsを作成します。
3. プロジェクトディレクトリ内のsrcディレクトリにtsファイルを配置します。
4. 配置したtsファイルをコンパイルします。
5. 出来上がったjsファイルをhtmlから読み込みます。

準備

Vagrantでゲスト環境（仮想環境）を作ります。

①Virtualboxをインストールします。Virtualboxのインストールまでで結構です。

→VirtualBoxをインストールする for Ubuntu

②Vagrantをインストールします。centos6環境を作りますので、Vagrantのインストールのみ済ませてください。

→Vagrantをインストールしてテスト環境を作る for Ubuntu

③Vagrantをインストールします。

→CentOS6にnode.jsの最新バージョン（v8.4.0）をインストール

ホスト環境

ゲスト環境

Vagrantへログイン

①【ホスト環境】端末を開き、前回構築したVagrantのディレクトリまで移動します。

cd vagrant/typescript/

②【ホスト環境】仮想マシンを起動します。

vagrant up

③【ホスト環境】ログインします。

vagrant ssh

④【ゲスト環境】rootにログインします。

sudo -i

npmモジュールのインストール

①以下のコマンドでwebpackとTypeScriptなど必要なモジュールをインストールします。

npm i -D webpack typescript awesome-typescript-loader source-map-loader

以下のようにインストール結果が表示されます。

+ source-map-loader@0.2.1
+ webpack@3.5.5
+ typescript@2.4.2
+ awesome-typescript-loader@3.2.3

②実行用の「three」モジュールもインストールします。型定義ファイルも欲しいので「three」だけなく、「@types/three」も指定します。

npm i -S three @types/three

以下のようにインストール結果が表示されます。

+ three@0.87.1
+ @types/three@0.84.19

設定ファイル作成

①作業フォルダ「typescript」に移動し、package.jsonファイルを作成します。

cd /vagrant/typescript
vi package.json

package.jsonファイルを編集します。package.jsonファイルは次の内容になります。

{
  "name": "work",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "awesome-typescript-loader": "^3.2.3",
    "source-map-loader": "^0.2.1",
    "typescript": "^2.4.2",
    "three": "^0.87.1",
    "webpack": "^3.5.5"
  },
  "devDependencies": {
    "awesome-typescript-loader": "^3.2.2",
    "source-map-loader": "^0.2.1",
    "typescript": "^2.4.2",
    "webpack": "^3.4.1"
  },
  "scripts": {
    "build": "webpack",
    "watch": "webpack -w"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

②同じディレクトリへ、TypeScriptの設定ファイル「tsconfig.json」を作成します。tsconfig.jsonファイルは次の内容になります。

{
  "compilerOptions": {
    "sourceMap": true,
    // TSはECMAScript 5に変換
    "target": "es5",
    // TSのモジュールはES Modulesとして出力
    "module": "es2015",
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

③同じディレクトリへ、TypeScriptの設定ファイル「webpack.config.js」を作成します。webpack.config.jsファイルは次の内容になります。

module.exports = {
  // メインとなるJavaScriptファイル（エントリーポイント）
  entry: './src/main.ts',
  // ファイルの出力設定
  output: {
    //  出力ファイルのディレクトリ名
    path: `${__dirname}/build`,
    // 出力ファイル名
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        // 拡張子 .ts の場合
        test: /\.ts$/,
        // TypeScript をコンパイルする
        use: 'awesome-typescript-loader'
      },
      // ソースマップファイルの処理
      {
        enforce: 'pre',
        test: /\.js$/,
        loader: 'source-map-loader'
      }
    ]
  },
  // import 文で .ts ファイルを解決するため
  resolve: {
    extensions: [
      '.ts', '.js', '.json'
    ],
  },
  // ソースマップを有効に
  devtool: 'source-map'
};

以上で設定は完了です。

④同じディレクトリにsrcディレクトリとbuildディレクトリを作ります。

mkdir src
mkdir build

以下のようなディレクトリ構成になったと思います。

TSファイルがコンパイル

①srcディレクトリに、サンプルのmain.tsファイルを配置します。

vi src/main.ts

main.tsは、以下のような内容になります。

import * as THREE from 'three';

window.addEventListener('DOMContentLoaded', () => {
  // レンダラーを作成
  const renderer = new THREE.WebGLRenderer();
  // レンダラーのサイズを設定
  renderer.setSize(800, 600);
  // canvasをbodyに追加
  document.body.appendChild(renderer.domElement);

  // シーンを作成
  const scene = new THREE.Scene();

  // カメラを作成
  const camera = new THREE.PerspectiveCamera(45, 800 / 600, 1, 10000);
  camera.position.set(0, 0, 1000);

  // 箱を作成
  const geometry = new THREE.BoxGeometry(250, 250, 250);
  const material = new THREE.MeshPhongMaterial({color: 0xff0000});
  const box      = new THREE.Mesh(geometry, material);
  box.position.z = -5;
  scene.add(box);

  // 平行光源を生成
  const light = new THREE.DirectionalLight(0xffffff);
  light.position.set(1, 1, 1);
  scene.add(light);

  const tick = (): void => {
    requestAnimationFrame(tick);

    box.rotation.x += 0.05;
    box.rotation.y += 0.05;

    // 描画
    renderer.render(scene, camera);
  };
  tick();

  console.log('Hello Three.js');
});

②以下のコマンドでmain.tsファイルをコンパイルします。すると、buildフォルダにbundle.jsファイルが出力されます。

npm run build

③実際にhtmlファイルから読み込みます。同じディレクトリにindex.htmlファイルを作成します。

vi index.html

index.htmlは、以下のような内容になります。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8"/>
  <script defer src="build/bundle.js"></script>
</head>
<body>
</body>
</html>

成功していれば、以下のようなページが表示できます。

→サンプルを別windowで再生