TypeScriptを使った超簡単なWEBフロントエンドの開発環境を構築する

当セクションではTypeScript、Lite-Serverのパッケージを使った超簡単なWEBフロントエンドの開発環境の構築方法を説明したいと思います。開発用のタスクはnpm-scriptsを使用します。現在のWEBフロントエンドの開発については様々なツールを組み合わせて１つの開発環境を自分なりにカスタマイズして構築するため、非常に複雑です。また、各ツールの移り変わりが激しいことも特徴だと思います。そのため、各ツールが発生した歴史的経過や背景を正確に捉えないと、疑問に感じる事が多かったり、うまく使いこなせなかったりする事があるようにも感じます。

記載した実行環境は以下の通りです。Node.jsのインストールについては、『Angular2の開発環境を構築（angular-cli）』を参考にして下さい。

OS : Windows 7 Home Premium
Node.js : V6.9.4
npm : V3.10.10

また、記載したコード等をコピー＆ペーストする場合には円マークに注意して下さい。コード中の円マークは「U+00A5」で表現しています。『円マークとバックスラッシュ』を参考にして下さい。

１．使用するパッケージの説明

（1）TypeScript

TypeScriptのパッケージです。

（2）lite-server

軽量のローカルWEBサーバです。BrowserSyncが内蔵されており、js、html、cssなどのソースファイルの変更を監視し、自動的にブラウザのリロードを行ってくれます。

（3）concurrently

concurrentlyを使用すると、複数のnpm-scriptコマンドを同時に実行することが可能になります。使い方は、concurrentlyの引数に、同時に実行したいコマンドをダブルクオーテーションでくくって列挙するだけです。

２．プロジェクトディレクトリの作成

最初にプロジェクトで使用するディレクトリを作成します。今回は「c:\ng2test\easy01」をプロジェクトディレクトリとして使用します。プロジェクトディレクトリの下にソースを格納するsrcフォルダも作成して下さい。

　
C:¥ng2test>mkdir easy01    ※プロジェクトディレクトリ作成

C:¥ng2test>cd easy01

C:¥ng2test¥easy01>

C:¥ng2test¥easy01>mkdir src   ※ソース格納のディレクトリ作成

C:¥ng2test>mkdir easy01 ※プロジェクトディレクトリ作成

C:¥ng2test>cd easy01

C:¥ng2test¥easy01>

C:¥ng2test¥easy01>mkdir src ※ソース格納のディレクトリ作成

３．package.jsonの作成

パッケージのインストールやnpm-scripts実行のためのpackage.jsonを作成します。[-y]オプションを指定して実行して、デフォルト値で作成します。作成後は必要に応じて、name、version、description等の項目をエディタで編集して下さい。

　
C:¥ng2test¥easy01>npm init -y

C:¥ng2test¥easy01>npm init -y

４．パッケージのインストール

typescript、lite-server、concurrentlyのパッケージをローカルインストールします。[--save-dev]オプションを付けて、パッケージ情報をdevDependenciesにバージョン付きでpackage.jsonに書き込みます（開発時のみに利用するライブラリのバージョンを管理します）。

　
C:¥ng2test¥easy01>npm install typescript lite-server concurrently --save-dev

C:¥ng2test¥easy01>npm install typescript lite-server concurrently --save-dev

ワーニング表示される場合があるかもしれませんが、とりあえずOKとして良いと思います。インストールバージョンは以下のようになります。

  "devDependencies": {
    "concurrently": "^3.4.0",
    "lite-server": "^2.3.0",
    "typescript": "^2.3.2"
  }

"devDependencies": {

"concurrently": "^3.4.0",

"lite-server": "^2.3.0",

"typescript": "^2.3.2"

}

５．TypeScriptのコンパイル環境を構築

以下の手順に従い、TypeScriptのコンパイル環境を構築します。

（1）最初にsrc\tsconfig.jsonを作成します。tsconfig.jsonはTypeScriptのコンパイル方法の指定やTypeScriptコード同士の依存関係を解決します。

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  }
}

{

"compilerOptions": {

"target": "es5",

"module": "commonjs",

"moduleResolution": "node",

"sourceMap": true,

"emitDecoratorMetadata": true,

"experimentalDecorators": true,

"lib": [ "es2015", "dom" ],

"noImplicitAny": true,

"suppressImplicitAnyIndexErrors": true

}

（2）次にsrc\sample.tsを新規作成します。Dogクラスを格納するTypeScriptファイルです。ファイルはUTF-8で作成して下さい。

class Dog {
    public Name:string;
    constructor(name:string) {
        this.Name = name;
    }
}

var myDog = new Dog("山田　小梅");
document.body.innerHTML = myDog.Name;

class Dog {

public Name:string;

constructor(name:string) {

this.Name = name;

}

var myDog = new Dog("山田　小梅");

document.body.innerHTML = myDog.Name;

（3）コンパイルをテスト実行してみます。src\sample.jsが作成されると成功となります。

　
C:¥ng2test¥easy01>node_modules¥.bin¥tsc src¥sample.ts

C:¥ng2test¥easy01>node_modules¥.bin¥tsc src¥sample.ts

（4）今度はファイル監視＆コンパイルの実行を行います。[-p]オプションはディレクトリを指定してコンパイルを実行します。指定したディレクトリ内のtsconifg.jsonの設定でコンパイルを実行します。[-w]オプションは常駐してtsファイルの変更を監視し、tsファイルの変更が発生すると自動でコンパイル処理を実行します。

　
C:¥ng2test¥easy01>node_modules¥.bin¥tsc -p src -w

C:¥ng2test¥easy01>node_modules¥.bin¥tsc -p src -w

コマンド実行後にsample.tsファイルを変更保存してみて下さい。コマンドプロンプト画面を観察ていると、実行プログラムが常駐しており、tsファイルの変更保存で再コンパイルが自動実行される様子を確認する事ができます。生成されたjsファイルの中身を確認してもtsファイルの変更で再コンパイルが実行され、jsファイルが再生成された事が認識できると思います。 CTRL+Cキーで常駐を停止します。

６．lite-serverの環境を構築

以下の手順に従い、lite-serveの実行環境を構築します。

（1）最初にルートとなるsrc\index.htmlを作成します。<script>タグで前項でコンパイルした結果のsample.jsを指定しています。ファイルはUTF-8で作成して下さい。

<!DOCTYPE html>
<html>
    <head>
        <title>easy01</title>
    </head>
    <body>
        <script src="./sample.js"></script>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

（2）bs-config.jsonを新規作成します。lite-serverの[-c]オプションで、bs-config.jsonを指定する事によって、実行時の動作オプションを指定する事が出来ます。

{
  "server": {
    "baseDir": "src",
    "routes": {
      "/node_modules": "node_modules"
    }
  }
}

{

"server": {

"baseDir": "src",

"routes": {

"/node_modules": "node_modules"

}

（3）次にlite-serverをテスト実行します。コマンドの実行で標準ブラウザが起動して、http://localhost:3000にアクセスされます。sample.tsのDocクラスのnameプロパティが表示されればOKです。

　
C:¥ng2test¥easy01>node_modules¥.bin¥lite-server -c bs-config.json

C:¥ng2test¥easy01>node_modules¥.bin¥lite-server -c bs-config.json

（4）最後にlite-serverのファイル変更監視によるブラウザのリロードを確認します。src\index.htmlの<body>タグ内に適当な文字『WEBフロントエンド開発』を追加して、ファイル保存をしてみて下さい。自動的にブラウザ画面がリロードを行い、追加した文字が表示されます。コマンドプロンプト画面を観察ていると、自動的にリロードされる様子を確認する事ができます。

<!DOCTYPE html>
<html>
    <head>
        <title>easy01</title>
    </head>
    <body>
        <script src="./sample.js"></script>
        <h3>WEBフロントエンド開発</h3>         ※追加したコード　
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h3>WEBフロントエンド開発</h3> ※追加したコード　

</body>

</html>

上記のテスト時に、IEだとリロードが発生しない場合がありました。FireFoxやChromeだと問題がありませんでした。

７．開発で使用するnpm-scriptsを定義する。

package.jsonのscript部にnpm-scriptsを定義します。今までのように「node_modules¥.bin¥・・・」のように長い相対パスをいちいち入力することなく、「npm run コマンド名」のように簡潔なコマンドを記述することが可能になります。コピペする時は『円マークとバックスラッシュ』に中止して下さい。

  "scripts": {
    "test": "echo ¥"Error: no test specified¥" && exit 1",
    "build:watch": "tsc -p src/ -w",
    "serve": "lite-server -c=bs-config.json",
    "start": "concurrently ¥"npm run build:watch¥" ¥"npm run serve¥"  "
  },

"scripts": {

"test": "echo ¥"Error: no test specified¥" && exit 1",

"build:watch": "tsc -p src/ -w",

"serve": "lite-server -c=bs-config.json",

"start": "concurrently ¥"npm run build:watch¥" ¥"npm run serve¥" "

開発実行時はコマンドプロンプトから「npm run start」を実行することで開発を行う事ができます。srcディレクトリ以下のjs、html、cssなどのソースファイル変更を監視し、自動的にTypeScriptのコンパイルが実行されブラウザのリロードを行ってくれます。

８．ファイル構成

最終的に以下のようなファイル構成になります。

ディレクトリ	ファイル	説明
easy01	package.json	プロジェクト定義ファイル
easy01	bs-config.json	Lite-Serverの動作設定
easy01\src	tsconfig.json	TypeScriptのコンパイル設定
easy01\src	sample.ts	TypeScriptソースファイル
easy01\src	sample.js	sample.tsのコンパイル結果
easy01\src	sample.js.map	sample.tsのコンパイル結果
easy01\src	index.html
easy01\node_modules		インストールされたパッケージ

以下、参考にさせて頂いたページです。ありがとうございました。