Webエンジニア susumuis の技術ブログ

このブログの内容は個人の見解であり、所属する組織の公式見解ではありません

EclipseのJavaScript環境(JSDT)を快適に使う方法

今日ますます重要となってきているプログラミング言語JavaScriptの開発環境として、WebStormやIntelliJ IDEAの評判が良いですが、Eclipseを使わざるを得ない状況ことも多いと思います。今回Eclipseで快適にJavaScript開発を行う環境をどのように構築したらよいか、試行錯誤をしたので、結果を報告します。人によっては違う結果になるかもしれませんが、もしよければ参考にしていただければと思います。

Eclipseプラグインは何を選択するべきか

2011年7月現在、Eclipseプラグインとして、JavaScriptの開発環境を提供しているものは、以下のようにいろいろあります。

JSDT

標準のJavaScript開発環境です。WSTに搭載されているので、J2EEEclipseなどをインストールすれば最初についています。印象として、可能なかぎりJava環境のJDTと同じになるように作られています。リファクタリングなどの機能やキーバインドもJDTに似せてあるので、JavaEclipseを使っていた人には最も馴染みやすいと思います。jQuery補完は、オプションで対応しています。

Aptana

http://www.aptana.com/
最近、Titaniumと統合してますます期待される開発環境Aptanaですが以前からJavaScript開発環境として人気がありました。統合開発環境としてのAptana Studioと、Eclipseプラグインとしてのものとがあります。

VJET JavaScript IDE

http://www.ebayopensource.org/wiki/display/VJET/
eBay開発のプラグインで、2011年7月現在、Eclipseマーケットプレイスで「JavaScript」と検索すると真っ先に出てきます。

Amateras EclipseHtmlEditor

http://amateras.sourceforge.jp/cgi-bin/fswiki/wiki.cgi?page=EclipseHTMLEditor
昔からあるプラグインですが、今でも開発が続けられていて、補完などかなり高機能で充実しています。

JSEclipse

http://www.interaktonline.com/products/eclipse/jseclipse/overview/
Adobe製のプラグインです。FlexBuilderにも搭載されています。プラグイン単体ならば、以下のupdateサイトからダウンロードできます。
http://download.macromedia.com/pub/labs/jseclipse/autoinstall/site.xml

他にもSpket IDE、Euklasなどいろいろありますが、自分の環境(MacBook Air late 2010 11inch Snow leopard)ではなぜかちゃんと動かなかったので割愛します。

これらのプラグインを自分で比較した結果、最終的にJSDTを使うことにしました。理由は、上記のとおり、JDTとメニューやキーバインドが似ていること、リファクタリングなど高機能であること、後述の設定をきちんと行えば軽快に動作するを評価したためです。他のプラグインは、条件によってはJSDTよりも軽快に動くのですが、設定が思い通りにできなかったりしました。どのプラグインも、jQueryExtJS本体など、ライブラリのコードを開いてしまうとハングアップしてしまうのは同じでした。できれば、解析に時間がかかるようなら処理を中断して色分けのみか、テキストエディタとして機能してくれれば良いのですが、間違ってひらいてしまうと数分間Eclipseが使い物にならなくなってしまうのはとても辛いです。個別に「テキストエディタ」に関連づければいいのですが……。

JSDTを快適に使う3つの方法

jQueryプラグインを導入する。

JSDTは標準ではjQueryの補完が行えません。以下の方法でプラグインを導入することで行えるようになります。方法は、Eclipse Market PlaceからjQueryで選択すると上位に出てくる JSDT jQuery を選択し、「Install」をクリックするだけです。(スクリーンショットでは導入済みの状態になっている)

ライブラリのIncludeを最適にする

JSDTは初期状態では補完があまり強くありません。先ほど導入したjQueryサポートも動作しません。では、どのようにするかというと、プロジェクトごとに設定する必要があります。

プロジェクトの設定画面から、JavaScript-Include Pathを選択し、Librariesタブを開くとそこにはライブラリ一覧が表示されています。
JSDTでは補完に使用するライブラリをこのように選択できます。ライブラリは少ないと補完が弱いですが、多すぎるとCtrl+Spaceを押しただけでハングアップしてしまうほど動作に支障をきたします。最小かつ最適にしたいところです。
僕は次のようにしました。

  • ECMA3BrowserSupportを削除
  • jQuery 1.6 Libraryを追加
  • Browser SupportでHTML5を選択して追加

これで、jQueryの補完もサクサクできるようになりました。

不要なライブラリをロードしないようにする

上記の項目とかぶりますが、JSDTではロードするライブラリが多いと、ハングアップしたようになってしまいます。これは、プロジェクトディレクトリ内のjsファイルに対しても当てはまります。したがって、うっかりプロジェクトディレクトリにライブラリのソースやサンプルソースを入れてしまった場合は大変です。以下のようにして除外することができます。

プロジェクトの設定画面から、JavaScript-Include Pathを選択し、Sourceを選択、IncluedまたはExcludedをダブルクリックすると専用の画面が出てくるので、ここで、ライブラリやサンプルコードの入ったフォルダをまとめて除外します。

これでなんとか実用レベルにJavaScript開発ができるようになりました。できれば、ECMAScript5対応のライブラリも欲しい(JSON.stringifyなど)のですが、そのへんはjson2jsをライブラリに含めるなどして対応しようと思います。

好みの環境はいろいろあるとは思いますが、参考になったら使ってください。
では。