TypeScriptはMicrosoftが開発するaltJSと呼ばれる言語です。JavaScriptのスーパーセットという位置づけで、静的型付けなど強力な言語機能を備えています。TypeScriptは高度なウェブアプリケーションの開発で使われることが多く、Google社内の標準言語として2017年に採用されるなど、注目が高まっています(参考記事「Google社内の標準言語としてTypeScriptが承認される - Publickey」)。

▲TypeScriptの公式サイト

TypeScriptはコンパイラによってJavaScriptのコードが得られますが、TypeScriptのコンパイラにはECMAScript Modules(ES Modules/importやexport文のこと)をまとめる機能が提供されていません。そのため、ES ModulesのJSファイルをまとめるモジュールバンドラー(例:webpack、Rollup等)をTypeScriptと合わせて使うのが一般的です。

このページではTypeScriptとwebpackを連携する方法として4種類のサンプル(シンプル版、Three.js、React、Vue.js)を解説します。

本記事で解説していること

※webpackの基本的な使い方は前回の記事「最新版で学ぶwebpack 3入門」を参照ください。

webpack+TypeScriptの最小構成

webpackとTypeScriptを最小構成として作っていきましょう。初回で解説したように、Node.js v8を事前にインストールしておいてください。

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

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

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

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

package.jsonファイル

{
  "scripts": {
    "build": "webpack"
  },
  "devDependencies": {
    "awesome-typescript-loader": "^3.2.2",
    "source-map-loader": "^0.2.1",
    "typescript": "^2.4.2",
    "webpack": "^3.4.1"
  }
}

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

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

tsconfig.jsonファイル

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

特にmodulees2015を指定するのが重要です。これを指定しないと、TypeScriptコードのimport文とexport文がコンパイラによってCommonJSとして変換されるため、webpackによるTree Shaking(未使用のimportを静的解析によって振り落とす機能)のメリットが得られません。Tree Shakingの効果を得るためには明示的にES Modulesをコンパイルオプションで指定します。

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

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

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

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

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

webpack+TypeScript+Three.jsの最小構成

Three.jsは3D表現の制作に役立つ人気のJSライブラリです。使い方は記事「Three.js入門」で説明していますので参照ください。このあと説明するReactやVue.jsと比べると、特殊な設定が不要なため環境構築が簡単です。webpackとTypeScriptとThree.jsを最小構成として作っていきましょう。

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

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

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

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

npm i -S three @types/three

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

package.jsonファイル

{
  "scripts": {
    "build": "webpack",
    "watch": "webpack -w"
  },
  "devDependencies": {
    "awesome-typescript-loader": "^3.2.2",
    "source-map-loader": "^0.2.1",
    "typescript": "^2.4.2",
    "webpack": "^3.4.1"
  },
  "dependencies": {
    "@types/three": "^0.84.19",
    "three": "^0.86.0"
  }
}

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

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

tsconfig.jsonファイル

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

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

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

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

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

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

Three.js + TypeScript + webpackのサンプル

当サイトの3Dのデモは基本的にThree.js + TypeScript + webpackのアーキテクチャーで構築しています。3Dコンテンツの開発では様々なAPIを利用するため、TypeScriptによる型定義が生産効率上とても重要です。環境構築のサンプルとして次の記事もあわせて参照ください。

webpack+TypeScript+Reactの最小構成

Reactはウェブアプリケーションの開発に役立つ人気のJSライブラリです。ReactではJSXと言われる独特の記法を使えるようにしなければなりません。webpackとTypeScriptとReactを最小構成として作っていきましょう。

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

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

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

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

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

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

package.jsonファイル

{
  "scripts": {
    "build": "webpack",
    "watch": "webpack -w"
  },
  "devDependencies": {
    "awesome-typescript-loader": "^3.2.2",
    "source-map-loader": "^0.2.1",
    "typescript": "^2.4.2",
    "webpack": "^3.4.1"
  },
  "dependencies": {
    "@types/react": "^15.6.1",
    "@types/react-dom": "^15.5.2",
    "react": "^15.6.1",
    "react-dom": "^15.6.1"
  }
}

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

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

tsconfig.jsonファイル

{
  "compilerOptions": {
    "sourceMap": true,
    // TSはECMAScript 5に変換
    "target": "es5",
    // TSのモジュールはES Modulesとして出力
    "module": "es2015",
    // JSXの書式を有効に設定
    "jsx": "react",
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

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

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

webpack.config.jsファイル

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+TypeScript+Vue.jsの最小構成

webpackとTypeScriptとVue.jsを最小構成で作っていきましょう。Vue.jsは様々な記述方法が可能なので、ここで紹介する構成は一例に過ぎません。TypeScriptの機能を最大限活かせる構成として、公式チュートリアル「TypeScript のサポート – Vue.js」で紹介されている方法で解説します。

※Vue.jsのコンポーネントをTypeScriptのデコレータで記述する方法として紹介します。

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

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

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

実行用の「vue」「vue-class-component」モジュールもインストールしましょう。TypeScriptの型定義ファイルはこれらのnpmモジュールに含まれているので、型定義ファイルを別途インストールする必要はありません。

npm i -S vue vue-class-component

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

package.jsonファイル

{
  "scripts": {
    "build": "webpack",
    "watch": "webpack -w"
  },
  "devDependencies": {
    "awesome-typescript-loader": "^3.2.2",
    "source-map-loader": "^0.2.1",
    "typescript": "^2.4.2",
    "webpack": "^3.4.1"
  },
  "dependencies": {
    "vue": "^2.4.2",
    "vue-class-component": "^5.0.2"
  }
}

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

次にTypeScriptの設定ファイルを用意しましょう。tsconfig.jsonというテキストファイルをプロジェクトのルートに作成し、次の内容を記述します。公式チュートリアルにもあるように、allowSyntheticDefaultImportsオプションやmoduleResolutionオプションとexperimentalDecoratorsオプションは忘れずに指定しておきます。

tsconfig.jsonファイル

{
  "compilerOptions": {
    "sourceMap": true,
    // TSはECMAScript 5に変換
    "target": "es5",
    // TSのモジュールはES Modulesとして出力
    "module": "es2015",
    // import Vue from 'vue' の書き方を許容する
    "allowSyntheticDefaultImports": true,
    "lib": [
      "dom",
      "es2017"
    ],
    "moduleResolution": "node",
    // デコレーターを有効に設定
    "experimentalDecorators": true
  }
}

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

webpackの設定ファイルには次のように記述します。resolveの部分でaliasを指定するのが重要です。

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'
    ],
    // Webpackで利用するときの設定
    alias: {
      vue: 'vue/dist/vue.js'
    }
  },
  // ソースマップを有効に
  devtool: 'source-map'
};

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

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

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

補足:Angular 4+TypeScript+webpackの構成

Angular 4にはAngular CLIというツールが用意されています。Angular CLIを使えば、簡単にAngular 4+TypeScript+webpackの開発環境を構築できます。公式チュートリアル「Angular – QuickStart」で解説されているので、こちらを参照ください。

当方のAngularプロジェクトの「Particle Develop」や「ClockMaker Labs」はAngular CLIで構築しています。

最後に

弊社ではTypeScriptを2013年から導入し、多くのプロジェクトで活用してきました。「この言語には将来性がある」「もっと広く使われるはず」と考え、2013年に記事「HTML5デモを作って分かったCreateJSとTypeScriptでの効率的な開発手法」でTypeScriptの利点を紹介しました。

当時はそれでもTypeScriptに懐疑的な意見をもつフロントエンドエンジニアも多くいましたが、記事「人気上昇中のJavaScriptライブラリを調べてみた【2016年版】 – Build Insider」でもあるように今ではaltJSの中ではTypeScriptの人気が飛び抜け、他をさらに引き離し続けています。

ECMAScript 2017仕様のJavaScriptがブラウザでデフォルトで使えるようになってきたとはいえ、静的型付けのあるTypeScriptは魅力的です。コンパイル時の型チェックなど開発の安全性があったり、WebStormをはじめとする開発ツールのサポートの充実(例:コードヒントやコード補完、import文の追加/整理)によって、さらに便利になっています。

本記事では、WebpackとTypeScriptの連携について最小構成で説明しました。現場ではJavaScriptの圧縮やソースマップ、ローカルサーバーの起動(webpack-dev-server)なども合わせて使うのが一般的です。連載の初回「最新版で学ぶwebpack 3入門」で解説してますので、あわせて参照くださいませ。