こんにちは。スマート・ソリューション・センターのbenishougaです。

 

今回は業務でTypeScriptを使う機会があったので、簡単なTypeScriptのご紹介と、そこで出てきた感想などを共有したいと思います。TypeScriptを導入する際の参考になれば嬉しいです。

TypeScriptとは

TypeScriptは、マイクロソフトが開発している AltJS 言語。

AltJS とはコンパイルすることで JavaScript を生成できる言語のこと。JavaScriptの言語自体の弱い点を補い、生産性やメンテナンス性を上げるために作られています。

AltJS 界隈は CoffeeScript と TypeScript の２強状態。
CoffeeScript は Ruby を似た簡潔な記述が可能なことが特徴の言語です。

TypeScriptの特徴

  • ECMAScript（JavaScriptの標準）として導入予定の（ES2015 やES2016）仕様を先取りしている
  • CoffeeScriptに比べ、参入障壁や辞める場合のリスクが低め
  • 静的型付け の概念を取り込み、そのメリットを享受できるようにしている
    • コンパイル時のエラーチェック
    • インテリセンス
    • リファクタリング
    • 可読性の向上
  • 既存の JavaScript ライブラリは d.ts という型定義ファイルを利用し、TypeScript 内で利用できる

    • TypeScript を試してみたい場合

    少し触ってみたいというのであれば、Web上で試しにコードを走らせることができる公式のPlaygoundが便利です。
    http://www.typescriptlang.org/Playground
    Editorとしての機能も一定しっかり作られているので、以下の様なTypeScriptの良さを体験できると思います。

    • コンパイルによるエラー検出
    • Ctrl + Space でインテリセンス
    • F2 で名前のリファクタリング

    開発環境

    本格的な開発を行うのであれば、TypeScriptに対応したエディタを導入する必要があります。現在TypeScriptの開発環境として有名な所では以下のようです。

    Atom Editor (atom-typescript)
    • Editor は Github 製で、そこに TypeScript 用のプラグインを入れて利用。
    • 安定度は若干低めな印象。
    • Atom Editor に付随して豊富な拡張機能が特徴。
    • 後述する実務環境としてはこれを利用しています。
    VisualStudio Code
    • 本家のマイクロソフト謹製。
    • 安定度や軽快さではAtom Editorより良い感じ。
    • Atom Editorに比べると若干機能追加が遅い印象。（今はそうでもない？。。）
    WebStorm
    • Android Studio などでお馴染みのIntelliJベースのWebフロント系の統合開発環境。
    • TypeScript 単体で見た時の機能は弱い印象。
    • IntelliJ (Android Studio) に慣れているなら選択肢の一つか。

    サンプルコード

    単純なクラスおよび、それを利用するコードとしては以下の様なものになります。

    class Greeter {
       greeting: string;
       constructor(message: string) {
         this.greeting = message;
       }
       greet() {
         return "Hello, " + this.greeting;
       }
    }
    let greeter = new Greeter("world");
    console.log(greeter.greet());

    実案件で使ってみての感想

    【ケース１】組み込み端末上のブラウザ上で動くアプリケーションの開発

    規模：
    10人程度、数万行。
    開発内容：
    アプリケーションを管理するためのプラットフォームおよびそのプロットフォーム上で動作するアプリケーションの開発
    開発の特徴：
    • オープンソースライブラリの利用は少なめ。
    • 大きい物で SuperAgent
    • 顧客から提供されるハードウェアと連携するための独自ライブラリが多い。
    • 参考コードとして Java の資産があった。

    【ケース２】社内タスクフォースでのウェブアプリケーション開発

    規模：
    １人、数千行。
    開発内容：
    JavaScriptでAIを書いて対戦させる　ゲーム型学習アプリケーション。
    開発の特徴：
    新しい技術の習得も目的となっているため、OSSライブラリを積極的に利用。

    【感想】

    大規模開発でメリットが強く活かされる
    • 型が提供してくれる情報により他のメンバーが書いたコードの意図が汲み易くなる。
    • リファクタリングなども一定大胆に行うことができ、品質を維持したままのメンテナンス性の向上が行いやすい。
    • コーディングの感覚としては Java や C# に非常に近いところまで持っていける。
      • JavaScriptが初めての人でも要点をかいつまんで学習した後であれば、大きな障壁なく参入できると思う。
    新しいOSSライブラリとの相性は低い
    • 最新のOSSライブラリバージョンに型定義ファイルが追い付いてきていないものも多い。
      • JavaScriptライブラリは流れが早いのに対し、メジャーバージョンレベルで型定義ファイルが遅れることも。
  • １つや２つのOSSライブラリであれば自炊しつつ利用することも可能。ただし、メンテにかなりの工数を持っていかれる。
  • 型の概念がない JavaScript に半ば強引に型を後付けするため、ライブラリによってはコード量が大幅に増える場合も。

    • まとめ

    • 素で JavaScript を利用するより、特に先述の ケース１のような オープンソースの利用より、チームで開発するモジュールが多くなるパターンでは積極的に採用すべきです。
    • 開発環境としては枯れきっているわけではありませんが、十分大規模な開発に耐えられる状況にはなりつつあります。
    • 先述の通り、新しいオープンソースライブラリとの相性は悪いため、オープンソースに頼ることが前提になっているプロジェクトでは覚悟（工数）が必要。
    • コード補完や型から得られる情報によって、コードを書くことが楽しくなる言語だと思います。