これからTypeScriptを始める人のための開発環境入門

with コメントはまだありません

将来に渡って安全なWebサービス/アプリの開発をしようと思ったとき、第一に考えるべきはTypeScriptを採用すること。しかしながら実際に使ってみようとすると、開発環境系のツールの多さに目がくらむだろう。「一体どれ使えばええねん!」とならないよう、TypeScriptで開発するときの開発環境をまとめておこう。

 

開発環境の概観

これから紹介する各ツールについてざっと触れる。

  • 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 開発環境

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を落としてこよう。

Node.js

詳しいインストール方法はこちら

node.js & npm インストール方法

 

TypeScript + Typings

まずはプロジェクトルート(dstやsrcと同階層)に移り、TypeScriptとtypingsをnpmからダウンロードする。

 

首尾よくTypeScriptとTypingsをインストールできたらプロジェクトルートで次のコマンドを叩き、tsconfig.jsonを作ろう。

tsconfig.jsonが出来ただろうか?無事に出来ていればファイルを開き、targetプロパティを es6 にしておこう。ES2015向けの機能をTypeScriptで使えるようになる。ただし、TypeScriptのビルドで出力されるJavaScriptソースがES2015バージョンになってしまうため、次に紹介するBabelでES5に変換する。

 

ここまで済んだら src/ts に入り、Typingsの初期設定をする(typings.jsonを作る)。

 

Babel

次にES2015なJavaScriptソースをES5へ変換するためにBabelを入れる。

再びプロジェクトルートに戻り、npmからBabelをインストールしよう。

インストールできたら .babelrc なる空ファイルを作成し、次のように記述しよう。

 

webpack

TypeScriptにbabelをかませてビルドするためにwebpackをインストールする。

次に、TypeScriptとBabelをwebpackから使うためのパッケージをインストールしよう。

 

webpackのビルド設定を書くため、プロジェクトルートで webpack.config.js なるファイルを作ろう。内容はこのとおり。注目は20行目。ここでTypeScriptのビルドとBabelによる変換を入れている。

 

ここまで出来たらapp.tsとindex.htmlを書いて $ webpack でビルドしてみよう。

 

Visual Studio Code / Visual Studio

ここまででTypeScript開発を行うためのツールを入れ終わった。エディターはVisual Studio Codeがインテリセンスが効くからオススメだ。

Windows環境なら Visual Studio も視野に入る。今回紹介した複数のツールを入れずともVisual Studioだけである程度開発ができるようになっているからだ。統合開発環境は伊達じゃない。

 

少しバージョンが古いけれどTypeScriptの入門に役立つ一冊。