LoginSignup
38

More than 5 years have passed since last update.

TypeScriptのIDEを試してみた

Posted at

AltJSにはいくつか有名どころがあります。

  • Haxe
  • Coffeescript
  • Dart
  • TypeScript

この中で、よく知られていて、かつしっかりとしたIDEがあるのは、HaxeとTypeScriptだと思います。(他もあるとは思いますが)
HaxeはFlashDevelop、TypeScriptは言わずと知れたVisualStudioです。

上であげたAltJSで本当に触ったことすら無いのはDartで、それ以外は一応書いてみたことはあるのですが、やはり昔も利用していたこともあり、TypeScript + VisualStudioの快適さ加減はかなりなものでした。
VisualStudioも昔とは違ってかなり軽快で、補完とかについても非常にサクサクと気持ちよく書くことができます。

Eclipseという存在

しかし、今の私の仕事では基本的にJavaを書くのが基本・・・最近JavaScript比率が8割くらいな気がしますが、それでもJavaが基本で、かつパートナーと一緒に働く、という関係上、基本的にEclipseで開発することになります。VisualStudioとか触ったことある人の方が少ないんじゃなかろうか。

というわけで、もし仕事で もうJavaScriptは嫌だ!俺は型のある生活がしたいんだー! と言って、実際にTypeScriptを選択できるような立場であったとしても、チームメンバーのスキルとかそういうものを考慮しないとなりません。 Emacs使ってと言ったら間違いなくハァ?となるので。

大分前置きが長くなりましたが、今回TypeScriptのEclipse Pluginである、TypEcsを試してみました。それだけだとあれなので、同じプロジェクトをWebStormのほうでも試してみて、簡単ですが比較してみました。

TypEscのインストール

TypEcsは、Eclipseプラグインなので、Eclipseが必要です。

公式ページによると、以下が必須なようです。

  • Java 7
  • Eclipse Kepler (4.3以上)
  • Node.js (0.8.19以上)

今回はMacBook Pro Retina(2012)のMarvericsで試してみます。

まずはKeplerとJava 7をインストールします。Nodeはbrewからインストールします。

brew install node

準備ができたら、Eclipseを起動して、Eclipse Marketplaceからインストールします。普通にTypEcsを打てば検索されます。

スクリーンショット 2014-06-13 23.22.57.png

スクリーンショット 2014-06-13 23.28.07.png

インストールが終わったら、いつも通りにEclipseを再起動します。このへんはEclipseにプラグインを入れるごく一般的なフローですね。

TypEcsを使ってみる

さて、実際に使ってみるところですが、TypeScriptで書かれたそれなりに大きなプロジェクト、というのはあまりみないので、仕方ないですが自分で作ったTypeScriptのクラスで試してみました。

スクリーンショット 2014-06-13 23.38.50.png

補完はこんな感じになりました。ちゃんとこのクラスのメンバーが補完されています。それぞれの戻り値についても型がちゃんと明示されています。

また、型定義ファイル(d.ts)に記載されている内容についても、ちゃんと補完に出てきます。補完の速度については、この程度(TypeScript4ファイル、型定義ファイル3つほど)では全く問題がないと思います。かなりさくっと出てきます。

補完以外の機能について

補完以外の機能については、試してみたところ以下のような機能があるようです。

  • リファクタリング
    • リネームのみですが、ちゃんとクラス定義と、それを参照している名前まで確認した上でリネームしてくれるようです。
    • ただし、参照しているといっても、
  • 定義への参照
    • 自分で定義したクラス・変数・インターフェースはもちろん、型定義ファイルで定義している型についてもちゃんと飛べます
    • ただし、型定義ファイルへの参照がやっぱり設定しづらいです。このへん、TypeScriptの結構弱点だとは思うのですが・・・
    • また、なんでかはよくわかりませんが、外部からmodule()で引っ張ってきたモジュールについては、型定義が効いてくれませんでした。referenceとかも指定していてもやっぱりだめでした。
  • リポジトリから型定義ファイルの追加
    • 検索して追加できます。

また、コンパイルエラーなども判定されるよう・・・でしたが、必要最低限のファイルでやればなんとかなるようでしたが、コンパイルエラーの箇所とかまでは表示してくれないようでした。

また、ちょっと意外でしたが、JSへのコンパイルまではやってくれません。なので、現状ではGruntとかそういった外部のプログラムでコンパイルを行う必要があります。なので、メモリとかはその分さらに追加で必要になるため、貧弱というかメモリが充実していない環境では、メモリ不足に悩まされるかもしれません。

他のTypeScriptIDEとの比較

VisualStudioでのTypeScriptサポートはさすがに本家本元、といったところで、プログラムを作成する上では全く問題はありません。ただ、もちろんですがWindowsでしか動きません。Macで〜とかLinuxで〜(これはあまりいないとは思いますが)、とかいった場合、VisualStudioが選択肢にくることは基本的に無いでしょう。

ということで次の選択肢として、最強のJavaScriptIDEとして名高いWebStormでTypeScriptのサポートが行われているので、そちらを使ってみます。なお、お金がなくてライセンスを購入していないの(と、基本的にEmacsで書いているの)で、30日のトライアルです。

機能比較

  • 補完
    • こちらについてはほぼ同等と思われますが、同一プロジェクト内の他のTypeScriptファイルで定義しているモジュールについてもちゃんと補完を表示してくれますし、定義箇所へのジャンプもできます。
    • 速度的には全く問題ありません。IntelliJに慣れている人であればこちらの方が確実に生産性はあがると思います。
  • リファクタリング
    • WebStormでは、リネームだけではなく、変数展開・シグネチャの変更、移動、変数の参照箇所までさかのぼっての削除、など、Javaで行うようなリファクタリングが一通り行えます。
    • この点については、完全にWebStorm側の圧勝です。あらためて最強のIDEというのが伊達じゃないことを実感しました。
  • コンパイルエラー
    • エディタ上にコンパイルエラーをちゃんと表示してくれます。速度も全く問題なく、非常にサクサクとかけます。
  • JSへのコンパイル
    • Watcherの追加がサポートされているので、JSへのコンパイルも問題なく行えます。

基本的に、WebStormの方が完成度が高いです。しかし、ちょっとみた限りではTypeScriptのコンパイラバージョンの指定とかはできなさそうでした。まぁ、好んで1.0未満のバージョンを利用する、というケースも無いとは思うので、特に問題はないと思いますが。
ただ、型定義ファイルの追加を行うような機能はありませんでした。この点についてはEclipseの方が進んでいます。

WebStormのほうは、基本的にJavaScriptIDEにTypeScriptのサポートが追加されている、ということなので、詳細な設定まではできませんが、普通にTypeScriptでプログラムを記述していくだけならば全く問題はないと思われます。

試してみて

基本的に自分でTypeScriptを書くときはEmacs +TypeScript modeにauto-completeをあわせて書いていますが、こういったIDEも、スキルレベルが異なる複数人開発などでは、生産性を引き上げるためには必要だと思います。

ただ、現状では有償のWebStormを使うか、Windows限定と割り切ってVisualStudioを使うか、のどちらかが現実的なようです。もちろんTypEcsについては、まだまだ開発が進んでいくとは思いますので、現段階で決めつけてしまうのは時期尚早ですし、そもそもTypeScriptを大規模に利用している人も一部です。もっと広まれば、さらによい開発環境が生まれていくことかと思いますし、それを楽しみにしています。

関係はないですが

今回初めてQiitaへの投稿&Kobitoからの投稿でしたが、未だにMacがしっくりこないので結構な時間がかかってしまいました。スクショをとったりいじったりするのは楽なんですが・・・。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
38