インフラジスティックス・ジャパン株式会社のBlog

インフラジスティックス・ジャパン株式会社のチームメンバーが技術トレンド、製品Tips、サポート情報からライセンス、日々の業務から感じることなど、さまざまなトピックについてお伝えするBlogです。

TypeScriptをブラウザ上で手軽に試す

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

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

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

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

※弊社のjQuery/HTMl5用コントロール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 のロード時にトランスパイルするオーバーヘッドがあるため、パフォーマンス的にプロダクション環境での使用にはあまり適さないと思われます。 プロダクション環境では、やはりビルドツールを使ってトランスパイル済みのコードを使うのがよいと考えます。

 

※ところで、型定義ファイルは?

今回のサンプルでは、型定義ファイルは使用しませんでした。
※VS Code などのエディタ上では赤い波線のエラー警告が表示されますが、動作上は問題ありません。

ですが、実際にTypeScriptを使って開発を行う時には、やはり必要になってきますので、 その時は、TypingsTypeScript 2.0 であればnpm (Qiita で分かりやすい記事がありました)でインストールして使用するようにしましょう。