Category Archives: 開発環境

EclipseのJavaScript環境（JSDT）を快適に使う方法

2 Replies

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

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

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

JSDT

標準のJavaScript開発環境です。WSTに搭載されているので、J2EE版Eclipseなどをインストールすれば最初についています。印象として、可能なかぎりJava環境のJDTと同じになるように作られています。リファクタリングなどの機能やキーバインドもJDTに似せてあるので、JavaでEclipseを使っていた人には最も馴染みやすいと思います。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よりも軽快に動くのですが、設定が思い通りにできなかったりしました。どのプラグインも、jQueryやExtJS本体など、ライブラリのコードを開いてしまうとハングアップしてしまうのは同じでした。できれば、解析に時間がかかるようなら処理を中断して色分けのみか、テキストエディタとして機能してくれれば良いのですが、間違ってひらいてしまうと数分間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をライブラリに含めるなどして対応しようと思います。

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

この記事は以前多くのブックマーク・コメントを頂きました。

これからブックマークされる方はこちら↓

MacにPostgreSQL 9.0を入れました。

Leave a reply

外出先で仕事をするために、Macにポスグレを入れましたが簡単でした。

基本的には、
http://lets.postgresql.jp/documents/tutorial/macosx/
の記述で、PostgreSQL 8.3 を 9.0に読み替えるだけでOK
MacはMacbook Air 11 inch (late 2010)を使用 OSX 10.6.6 snow leopardにて確認。

手順：

http://www.enterprisedb.com/products-services-training/pgdownload#osx
ここから、installer version Version 9.0.4-1「MacOS X」をダウンロードして実行。
Windowsと同じ感じですね！

pgAdmin IIIも入っていい感じです。
しかし、開発しないときも裏でデーモンが動いてしまっているのは、メモリの無駄ですよね？

調べてみると、以下のコマンドでデーモンの起動・終了を制御できるようです。

sudo launchctl stop com.edb.launchd.postgresql-9.0
sudo launchctl start com.edb.launchd.postgresql-9.0

Mayaaファイルを命名規則から一括作成するEmEditorマクロ

Leave a reply

業務でMayaa使っています。
私が所属する開発チームでは、Mayaaのプロセッサとひもづけるid（m:id）に、一定の命名規則を持たせています。

ルールは以下の4種類しかありません。

  1. その場に値を出力する（m:writeプロセッサ）:"〜_HERE"
  2. そのタグの属性を変化させる（m:echo, m:attribute）："〜_TAG"
  3. その要素を条件によって出し分ける（m:if）："IF_〜"
  4. その要素を繰り返す（m:for or m:forEach）："LOOP_〜"

このようにしておけば、仮に〜_HEREがm:writeではなく、m:insertであったとしても、テンプレートを書くデザイナーさんには同じように見えるので、よって上記4ルールで徹底運用しています。

さて、日々の業務を楽にするための努力は欠かしません。名前が規則に従っているなら、プログラムも自動生成できてしまうのではないか？

Mayaaは、テンプレートに定義されていないm:idを記述すると、警告で教えてくれる機能があります。

[WARN] EqualsIDInjectionResolver - the injection ID(IF_*******) is not found on the template, /xxx/yyy/zzz.xhtml#410.

この文字列をコピペして食べさせれば、.mayaaファイルの雛形を生成するEmEditorマクロを作りました。

document.selection.Replace(
"[WARN] EqualsIDInjectionResolver - the injection ID(",
"",
eeFindNext | eeFindReplaceCase | eeFindReplaceEscSeq | eeReplaceAll);
document.selection.Replace(
"\\) is not found on the template.*$",
"",
eeFindNext | eeFindReplaceCase | eeFindReplaceEscSeq | eeReplaceAll | eeFindReplaceRegExp);
document.selection.Replace(
"^.*_HERE$",
"\t<!-- を出力します。 -->\n"
+ "\t<m:write m:id='\\0' value='${}' />",
eeFindNext | eeFindReplaceCase | eeFindReplaceEscSeq | eeReplaceAll | eeFindReplaceRegExp);
document.selection.Replace(
"^.*_TAG$",
"\t<!-- します。属性が変化します。 -->\n"
+ "\t<m:echo m:id='\\0'>\n"
+ "\t\t<m:attribute name='' value='${}' />\n"
+ "\t</m:echo>",
eeFindNext | eeFindReplaceCase | eeFindReplaceEscSeq | eeReplaceAll | eeFindReplaceRegExp);
document.selection.Replace(
"^IF.*$",
"\t<!-- の時にのみ表示します。 -->\n"
+ "\t<m:if m:id='\\0' test='${}'>\n"
+ "\t\t<m:echo><m:doBody /></m:echo>\n"
+ "\t</m:if>",
eeFindNext | eeFindReplaceCase | eeFindReplaceEscSeq | eeReplaceAll | eeFindReplaceRegExp);
document.selection.Replace(
"^LOOP.*$",
"\t<!-- を繰り返します。 -->\n"
+ "\t<m:for m:id='\\0'\n"
+ "\t\t\tinit='${}'\n"
+ "\t\t\ttest='${}'\n"
+ "\t\t\tafter='${}'>\n"
+ "\t\t<m:echo><m:doBody /></m:echo>\n"
+ "\t</m:for>",
eeFindNext | eeFindReplaceCase | eeFindReplaceEscSeq | eeReplaceAll | eeFindReplaceRegExp);

便利です！
自分だけですが。。。

問題なのは会社でEmEditorを愛用しているのが僕だけということです。。。秀丸マクロ？書けません！