TypeScriptとSystemJSを使ったWEBフロントエンド開発

当セクションでは前回の『SystemJSを使ったWEBフロントエンド開発』をもとに具体的なプロジェクトを作成して、モジュール管理ツールとしてのSystemJSの機能を把握したいと思います。以前に紹介した『TypeScriptを使った超簡単なWEBフロントエンドの開発環境を構築する』と類似するプロジェクトになりますので、そちらの方も合わせてご確認下さい。

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

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

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

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

（1）SystemJS

JavaScriptファイルの依存関係を解決するためのモジュール管理ツールです。

（2）TypeScript

TypeScriptのパッケージです。

（3）lite-server

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

（4）concurrently

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

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

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

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

C:¥ng2test>cd easy02

C:¥ng2test¥easy02>

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

C:¥ng2test¥easy02>cd src

C:¥ng2test¥easy02¥src>

C:¥ng2test¥easy02¥src>mkdir app

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

C:¥ng2test>cd easy02

C:¥ng2test¥easy02>

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

C:¥ng2test¥easy02>cd src

C:¥ng2test¥easy02¥src>

C:¥ng2test¥easy02¥src>mkdir app

３．package.jsonの作成

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

　
C:¥ng2test¥easy02>npm init -y

C:¥ng2test¥easy02>npm init -y

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

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

　
C:¥ng2test¥easy02>npm install systemjs@0.19.40 --save

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

C:¥ng2test¥easy02>npm install systemjs@0.19.40 --save

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

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

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

"dependencies": {

"systemjs": "^0.19.40"

"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）次にTypeScriptファイルを作成します。今回はジュール管理ツールの機能把握が主目的なので、2つのファイルを作成して結合するようにします。まずは、src\app\sample.tsを新規作成します。DogクラスをインポートするTypeScriptファイルです。ファイルはUTF-8で作成して下さい。

import { Dog } from './dog';

var myDog = new Dog("犬の名前は小梅です。");
document.body.innerHTML = myDog.Name;

import { Dog } from './dog';

var myDog = new Dog("犬の名前は小梅です。");

document.body.innerHTML = myDog.Name;

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

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

export class Dog {

public Name:string;

constructor(name:string) {

this.Name = name;

}

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

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

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

C:¥ng2test¥easy01>node_modules¥.bin¥tsc src¥app¥doc.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キーで常駐を停止します。

６．SystemJSの設定ファイルを作成

以下のように、SystemJSの設定ファイル（src/systemjs.config.js）を作成します。

<!DOCTYPE html><br data-mce-bogus="1">(function (global) {
  System.config({
    baseURL: '/',
    map: {
      name_1: 'app',
    },
    packages: {
      name_1: { main: 'sample.js' , defaultExtension: 'js'},
    }
  });
})(this);

<!DOCTYPE html><br data-mce-bogus="1">(function (global) {

System.config({

baseURL: '/',

map: {

name_1: 'app',

packages: {

name_1: { main: 'sample.js' , defaultExtension: 'js'},

}

});

})(this);

baseURL、map、packageを組み合わせてsample.jsまでのパスを指定します。
baseUrlはロードするモジュールの起点を示すパスです。
mapはモジュールの場所を設定します。
packagesはモジュールのロード属性（例：ファイル名、拡張子、依存関係等）を定義し、mainでトップアプリケーションのJSファイルを設定します。defaultExtension: 'js'と指定している場合は、フォルダにtsファイルとjsファイルが両方存在する場合、指定と一致するjsファイルを参照することになります。

７．lite-serverの環境を構築

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

（1）最初にルートとなるsrc\index.htmlを作成します。<script>タグでsystemjsライブラリとSystemJSの設定ファイル(systemjs.config.js)を指定しています。また、System.importでルートアプリケーションとなる「name_1」を指定します。「name_1」はSystemJSの設定ファイル(systemjs.config.js)でsample.tsのコンパイル結果であるsample.jsに紐付けています。

<!DOCTYPE html>
<html>
  <head>
    <title>easy02</title>
    <meta charset="UTF-8">
    <script src="../node_modules/systemjs/dist/system.src.js"></script>
    <script src="systemjs.config.js"></script>
    <script>
      System.import('name_1');
    </script>
  </head>
  <body>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

System.import('name_1');

</script>

</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¥easy02>node_modules¥.bin¥lite-server -c bs-config.json

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

８．開発で使用する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のコンパイルが実行されブラウザのリロードを行ってくれます。

９．ファイル構成

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

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

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