将来に渡って安全なWebサービス/アプリの開発をしようと思ったとき、第一に考えるべきはTypeScriptを採用すること。しかしながら実際に使ってみようとすると、開発環境系のツールの多さに目がくらむだろう。「一体どれ使えばええねん！」とならないよう、TypeScriptで開発するときの開発環境をまとめておこう。
Contents
開発環境の概観
これから紹介する各ツールについてざっと触れる。
- npm : 開発に必要なツールやライブラリをダウンロードするために使用。すべてここから。
- TypeScript : TypeScript自体はnpm経由で落としてくる。
- Typings : TypeScriptの型定義ファイルを管理するためのツール。元々tsdという同じ役割のツールがあったけれど今はこっちがナウい。（npmで全部管理しようという流れからか、typesというツールも生まれてたりするから雲行きは読めない）
- Babel : これはTypeScriptから変換されたECMAScript 2015（ES6）コードをES5へ変換するために使う。ES2015だけ対応すればいいんだよ！な時は無くてOK
- webpack : TypeScriptのトランスパイル/ビルドとbabelによるES5変換をこのツールでまとめて行える。「ビルドツールはgulp使いたいんだけどな〜」って時もgulpからwebpackを使えるから安心。
- Visual Studio Code : クロスプラットフォームで扱える傑作プログラミングエディター。TypeScriptのコーディングはこれに決まり。Windowsユーザーなら素直にVisual Studioを使おう。あっちはもっと良い。
開発環境のディレクトリ構成
次に開発環境のディレクトリがどうなっているかを見ていこう。ここはプロジェクトの要件で制約を受けやすいところだけれど、重要なことはビルド前とビルド後を明確に分けるということ。
TypeScriptソースを書くファイルを仮にapp.tsとした。ビルドされて生成されるJavaScriptソースをapp.jsだ。これをindex.htmlから使う。
TypeScriptに加えてsassなんかも使うときはsrcフォルダー以下に配置して使おう。
その他のファイルは各ツールの設定ファイルとなる。
- typings.json : typingsが扱う型定義ファイルについて記述される。
- .babelrc : babelが使うプリセットなどbabelのための設定を記述する。
- package.json : npmでインストールする依存ファイルの情報などnodeパッケージ関連の記述をする。タスクをここに書いてバイバイgulpなんてことも。
- tsconfig.json : TypeScriptのコンパイル情報を書く。
- webpack.config.js : webpackの設定をここに書く。
npm
Visual Studio Code以外のツールはnpm経由で落としてくる。というわけでまずはnpmの導入から。
npmはnode.jsをインストールするとニコイチで入ってくるため、公式サイトからnode.jsを落としてこよう。
詳しいインストール方法はこちら
TypeScript + Typings
まずはプロジェクトルート（dstやsrcと同階層）に移り、TypeScriptとtypingsをnpmからダウンロードする。
|
1 |
$ npm install typescript typings --save-dev |
首尾よくTypeScriptとTypingsをインストールできたらプロジェクトルートで次のコマンドを叩き、tsconfig.jsonを作ろう。
|
1 |
$ tsc --init |
tsconfig.jsonが出来ただろうか？無事に出来ていればファイルを開き、targetプロパティを es6 にしておこう。ES2015向けの機能をTypeScriptで使えるようになる。ただし、TypeScriptのビルドで出力されるJavaScriptソースがES2015バージョンになってしまうため、次に紹介するBabelでES5に変換する。
|
1 2 3 4 5 6 7 8 9 10 11 |
{ "compilerOptions": { "module": "commonjs", "target": "es6", "noImplicitAny": false, "sourceMap": false }, "exclude": [ "node_modules" ] } |
ここまで済んだら src/ts に入り、Typingsの初期設定をする（typings.jsonを作る）。
|
1 |
$ typings init |
Babel
次にES2015なJavaScriptソースをES5へ変換するためにBabelを入れる。
再びプロジェクトルートに戻り、npmからBabelをインストールしよう。
|
1 |
$ npm install babel-core babel-preset-es2015 --save-dev |
インストールできたら .babelrc なる空ファイルを作成し、次のように記述しよう。
|
1 2 3 |
{ "presets": ["es2015"] } |
webpack
TypeScriptにbabelをかませてビルドするためにwebpackをインストールする。
|
1 |
$ npm install webpack --save-dev |
次に、TypeScriptとBabelをwebpackから使うためのパッケージをインストールしよう。
|
1 |
$ npm install ts-loader babel-loader --save-dev |
webpackのビルド設定を書くため、プロジェクトルートで webpack.config.js なるファイルを作ろう。内容はこのとおり。注目は20行目。ここでTypeScriptのビルドとBabelによる変換を入れている。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
var path = require('path'); module.exports = { entry: { app :'./src/ts/app.ts' }, output: { path: require("path").resolve("./dst/js/"), filename: '[name].js' }, resolve: { extensions: ['', '.ts', '.webpack.js', '.web.js', '.js'], alias: { "angular": path.join(__dirname, "node_modules/angular/angular.js") } }, module: { loaders: [ { exclude: /(node_modules)/, loaders: ["babel", "ts"] } ] } } |
ここまで出来たらapp.tsとindex.htmlを書いて $ webpack でビルドしてみよう。
Visual Studio Code / Visual Studio
ここまででTypeScript開発を行うためのツールを入れ終わった。エディターはVisual Studio Codeがインテリセンスが効くからオススメだ。
Windows環境なら Visual Studio も視野に入る。今回紹介した複数のツールを入れずともVisual Studioだけである程度開発ができるようになっているからだ。統合開発環境は伊達じゃない。
少しバージョンが古いけれどTypeScriptの入門に役立つ一冊。
