TypeScriptはMicrosoftが開発するaltJSと呼ばれる言語です。標準のECMAScriptよりも多機能で、静的型付けができるといった強力な機能を備えています。TypeScriptはコンパイルによって、JavaScriptファイルが得られます。

TypeScriptは高度なウェブアプリケーションの開発で使われることが多く、Google社内の標準言語として採用されるなど、注目が高まっています(参考記事「Google社内の標準言語としてTypeScriptが承認される - Publickey」)。

このページではTypeScriptとwebpackを連携する方法を解説します。シンプル版、Three.js、Reactを使う方法の3種類を解説します。

webpack+TypeScriptの構成を作成しよう

webpackとTypeScriptを最小構成で作っていきましょう。

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

webpackとTypeScriptなど必要なモジュールをインストールしましょう。TypeScriptをwebpackで処理するためには「awesome-typescript-loader」を、ソースマップを処理するためには「source-map-loader」を利用します。

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

これをインストールすると、package.jsonファイルは次の内容になります。scriptsは自前のビルドコマンドを記述しておきます。scriptsdevDependencies以外の情報は省略しています。

{
  "scripts": {
    "build": "webpack"
  },
  "devDependencies": {
    "awesome-typescript-loader": "^3.2.1",
    "source-map-loader": "^0.2.1",
    "typescript": "^2.4.1",
    "webpack": "^3.0.0"
  }
}

TypeScriptの設定ファイル: tsconfig.json

次にTypeScriptの設定ファイルを用意しましょう。tsconfig.jsonというテキストファイルをプロジェクトのルートに作成し、次の内容を記述します。出力対象をECMAScript 5仕様のJavaScriptにすることと、ソースマップを有効にすることを指定してます。

{
  "compilerOptions": {
    "sourceMap": true,
    "target": "es5"
  }
}

webpackの設定ファイル:webpack.config.js

webpackの設定ファイルには次のように記述します。rulesの部分でawesome-typescript-loadersource-map-loaderを指定。resolveに拡張子.tsを登録することで、TypeScript内のimport文で拡張子を書く手間が省けます。

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'
    ],
  },
  // ソースマップを有効に
  devtool: 'source-map'
};

以上で設定は完了です。npm run buildコマンドを入力すると、srcフォルダに配置したTSファイルがコンパイルされ、buildフォルダにbundle.jsファイルが出力されます。

ここまでの手順をサンプルファイルとしてGitHubで公開していますので、参考ください。

webpack+TypeScript+Three.jsの構成を作成しよう

webpackとTypeScriptとThree.jsを最小構成で作っていきましょう。

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

webpackとTypeScriptなど必要なモジュールをインストールしましょう。TypeScriptをwebpackで処理するためには「awesome-typescript-loader」を、ソースマップを処理するためには「source-map-loader」を利用します。

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

実行用の「three」モジュールもインストールしましょう。型定義ファイルも欲しいので「three」だけなく、「@types/three」も指定します。なお、実行ファイルに含まれるモジュールとして利用したいので、コマンドオプション「-S」は指定します。

npm install -S three @types/three

これをインストールすると、package.jsonファイルは次の内容になります。scriptsは自前のビルドコマンドを記述しておきます。scriptsdevDependencies以外の情報は省略しています。

{
  "scripts": {
    "build": "webpack"
  },
  "devDependencies": {
    "awesome-typescript-loader": "^3.2.1",
    "source-map-loader": "^0.2.1",
    "typescript": "^2.4.1",
    "webpack": "^3.0.0"
  },
  "dependencies": {
    "@types/three": "^0.84.15",
    "three": "^0.86.0"
  }
}

TypeScriptの設定ファイル: tsconfig.json

次にTypeScriptの設定ファイルを用意しましょう。tsconfig.jsonというテキストファイルをプロジェクトのルートに作成し、次の内容を記述します。libにはTypeScriptでのコンパイル時にECMAScript 2015の先端機能を使うことを明示的に指定します。これはThree.jsが内部的に最新のECMAScript 2015を一部使っているためで、コンパイルを通すためです。

{
  "compilerOptions": {
    "sourceMap": true,
    "target": "es5",
    "lib": [
      "es2015",
      "dom"
    ]
  }
}

webpackの設定ファイル:webpack.config.js

webpackの設定ファイルには次のように記述します。rulesの部分でawesome-typescript-loadersource-map-loaderを指定。resolveに拡張子.ts.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'
};

以上で設定は完了です。npm run buildコマンドを入力すると、srcフォルダに配置したTSファイルがコンパイルされ、buildフォルダにbundle.jsファイルが出力されます。

ここまでの手順をサンプルファイルとしてGitHubで公開していますので、参考ください。

Three.jsのサンプルの実行結果は次となります。

webpack+TypeScript+Reactの構成を作成しよう

webpackとTypeScriptとReactを最小構成で作っていきましょう。

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

webpackとTypeScriptなど必要なモジュールをインストールしましょう。TypeScriptをwebpackで処理するためには「awesome-typescript-loader」を、ソースマップを処理するためには「source-map-loader」を利用します。

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

実行用の「react」「react-dom」モジュールもインストールしましょう。型定義ファイルも欲しいので「@types/react」「@types/react-dom」も指定します。なお、実行ファイルに含まれるモジュールとして利用したいので、コマンドオプション「-S」を指定します。

npm install -S react react-dom @types/react @types/react-dom

これをインストールすると、package.jsonファイルは次の内容になります。scriptsは自前のビルドコマンドを記述しておきます。scriptsdevDependencies以外の情報は省略しています。

{
  "scripts": {
    "build": "webpack"
  },
  "devDependencies": {
    "awesome-typescript-loader": "^3.2.1",
    "source-map-loader": "^0.2.1",
    "typescript": "^2.4.1",
    "webpack": "^3.0.0"
  },
  "dependencies": {
    "@types/react": "^15.0.34",
    "@types/react-dom": "^15.5.1",
    "react": "^15.6.1",
    "react-dom": "^15.6.1"
  }
}

TypeScriptの設定ファイル: tsconfig.json

次にTypeScriptの設定ファイルを用意しましょう。tsconfig.jsonというテキストファイルをプロジェクトのルートに作成し、次の内容を記述します。jsxオプションにはreactを指定するのがポイントです。これによって、JSXと呼ばれるReact特有のシンタックス(JavaScriptの中にDOM要素を記述する方法)を解釈できるようになります

{
  "compilerOptions": {
    "sourceMap": true,
    "noImplicitAny": true,
    "target": "es5",
    "jsx": "react"
  }
}

webpackの設定ファイル:webpack.config.js

webpackの設定ファイルには次のように記述します。rulesresolveの部分で拡張子.tsxを指定するのが重要です。

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

以上で設定は完了です。npm run buildコマンドを入力すると、srcフォルダに配置したTSXファイルがコンパイルされ、buildフォルダにbundle.jsファイルが出力されます。

ここまでの手順をサンプルファイルとしてGitHubで公開していますので、参考ください。

Reactのサンプルの実行結果は次となります。

次のページではwebpackでJavaScriptファイルをminifyする方法、ソースマップを使う方法、開発サーバーを立ち上げる方法を紹介します。