TypeScriptを実案件で使ってみた

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

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

TypeScriptとは

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

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

AltJS 界隈は CoffeeScript と TypeScript の2強状態。
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());

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

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

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

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

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

【感想】

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

まとめ

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