TypeScriptをブラウザ上で手軽に試す - インフラジスティックス・ジャパン株式会社Blog

- 2016/08/11(木)時点の情報に基づいています -

こんにちは。デベロッパーサポートの桐生です。

今回、TypeScript をブラウザ上で手軽に試すための方法をご紹介したいと思います。

Angular2 では TypeScript が使われており（必ずしも TypeScript を使わなければいけないわけではありませんが）、今後Angular2が正式リリースされた暁には TypeScript の需要がい一気に高まるのではないでしょうか。

※弊社のjQuery/HTMｌ5用コントロールIgnite UIでも、TypeScriptへの対応を行っており、またAngular2 ベータ版用のコンポーネントもバージョン16.1から提供開始となりました。

一方で、ここ数年でWebフロントエンド開発は非常に高度化、複雑化してきており、開発環境自体を構築するのも難しくなってきています。実際、TypeScriptを使って開発を行うためには、Node.jsのインストールから始まり、Grunt、Gulp、browserifyやWebpack などのビルドツールをセットアップして・・・、と本来やりたいことよりも開発環境を構築することに時間がかかってしまうことがよくあります。Webフロントエンド開発に慣れていない場合は中々に大変な作業となります。

ちょっと試したいだけなのに正直そこまでやるのは面倒、という方に朗報です。
実は、SystemJSというモジュールローダー用のJSライブラリを使うことにより、ブラウザ上で TypeScript を変換（トランスパイルと言います）し実行することができるのです。

サンプルのフォルダ構成

Sample
│ index.html
└─app
    │ main.ts
    │ module1.ts
    └─module2.ts

サンプルはこちらです。

この Sample をサーバーに配置して、
ローカルホストでアクセスしてみてください。

※このサンプルを実行するにあたって、Grunt、Gulp、browserifyやWebpack などのビルドツールは一切使用しません。

サンプルの解説

index.htmlにアクセス
↓
app/main.tsのロード
↓
app/module1.tsのロード
↓
app/module2.tsのロード

という流れでTypeScriptファイルが動的にロードされ、トランスパイルされます。

index.html

<table id="grid"></table>

<!-- SystemJS + TypeScript のインポート -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.36/system.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typescript/2.0.0/typescript.min.js"></script>

<!-- いつも通り jQuery と Ignite UI のインポート -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/2016.1/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/2016.1/latest/js/infragistics.lob.js"></script>
<script src="https://jp.igniteui.com/data-files/adventureworks.min.js"></script>
<script>
    /**
     * SystemJS 設定
     */
    System.config({
        transpiler: 'typescript', // typescriptでトランスパイルします
        typescriptOptions: {
            // https://www.typescriptlang.org/docs/handbook/compiler-options.html
            // で定義されているオプションを指定可能です。
        },
        packages: {
            // appパッケージについて
            'app': {
                main: './main.ts', // エントリーポイントの指定
                defaultExtension: 'ts', // デフォルト拡張子の指定
            }
        },
        meta: {
            // appパッケージ配下のtsファイルに対して
            'app/*.ts': {
                // // 必ずトランスパイルされるよう ECMAScript Module であることを明示
                // https://github.com/systemjs/systemjs/blob/master/docs/module-formats.md
                // ※どうやらソースコード中に import などのES6キーワードが含まれていないと、
                // トランスパイルされないようですが const や let だけではダメでした。
                format: 'esm'
            }
        }
    });

    /**
     * SystemJS 実行
     */
    // appパッケージの読み込み(エントリーポイントである app/main.ts が読み込まれる)
    System.import('app')
        .catch(console.error.bind(console));
</script>

System.configでの設定は、おそらくこのサンプルの中において最も面倒なところですが、今回の目的であるTypeScriptを手軽に試すという点においては、この設定を変更することはありませんので、このようなものとご認識ください。

もしご自身の環境で試されたい場合は、この設定をコピーしつつ
・25,32,46行目：パッケージ名（つまり ts ファイル格納しているフォルダ名）
・26行目：index.ts、app.ts などエントリーポイントの名前
を環境に合わせて変更するだけで、動作するようになるかと思いますので、お試しください。

設定について詳しく知りたい方は SystemJS Configuration API をご確認ください。

モジュールをロードするには、46行目で System.import('app') とやります。
するとエントリーポイントである app/main.ts がロードされます。

app/main.ts

import Module1 from './module1';

let module1 = new Module1();
module1.method();

Module1 クラスの method メソッドを実行していますが、 Module1 クラスを使用するためには module1 モジュールを import しておかなければならないため、app/module1.ts がロードされます。

app/module1.ts

import Module2 from './module2';

export default class Module1 {
    constructor() {

    }

    method() {
        console.log('Module1 method called');

        let module2 = new Module2();
        module2.method();
    }
}

Module1 クラスの method メソッドの中では、Module2 クラスの method メソッドをコールしていますが、 Module2 クラスを使用するためには module2 モジュールを import しておかなければならないため、app/module2.ts がロードされます。

app/module2.ts

export default class Module2 {
    constructor() {

    }

    method() {
        console.log('Module2 method called');

        $("#grid").igGrid({
            width: "100%",
            height: '500px',
            dataSource: adventureWorks,
            primaryKey: 'ProductID',
            columns: [
                { headerText: "製品 ID", key: "ProductID", dataType: "number", width: "15%" },
                { headerText: "製品名", key: "Name", dataType: "string", width: "40%" },
                { headerText: "製品番号", key: "ProductNumber", dataType: "string", width: "30%" },
                { headerText: "メーカー フラグ", key: "MakeFlag", dataType: "bool", width: "15%" }
            ],
            features: [
                {
                    name: "Updating",
                },
            ],
            rendered(evt, ui) {
                console.log('igGrid rendered');
            }
        });
    }

}

最終的に、Module2 クラスの method メソッドが実行され、画面上に弊社Ignite UI コントロールの igGrid が生成されます。
実行結果は以下のようになります。

Chrome DevTools の Network タブを確認すると、確かに main.ts > module1.ts > module2.ts の順でロードされていることが分かります。SystemJSのおかげでTypeScriptモジュールが適切な順序で動的にロードされ、トランスパイルされ、実行されています。

まとめ

SystemJS を使うことで、ブラウザ上で TypeScript をトランスパイル実行することができることを確認頂けたかと思います。

ただし、今回の方法はあくまで手軽さを目的としており、パフォーマンスを考慮していません。
TypeScript のロード時にトランスパイルするオーバーヘッドがあるため、パフォーマンス的にプロダクション環境での使用にはあまり適さないと思われます。プロダクション環境では、やはりビルドツールを使ってトランスパイル済みのコードを使うのがよいと考えます。