CSS/JavaScriptを最適化するEclipseプラグイン「jsLex」

JavaScriptのバリデーション

jsLexはJsLintを使用したJavaScriptのバリデーション機能を備えている。JavaScriptファイルまたはHTML内のJavaScriptを選択して右クリックメニューから「Rockstarapps」→「Validate with JsLint…」を選択する。

エラーはマーカーとして表示される。マーカーを削除したい場合は右クリックメニューから「Rockstarapps」→「Clear JsLint Errors」を選択すればよい。補助的な機能ではあるものの、JavaScriptのコーディングをする際に便利な機能だろう。

JavaScriptプロファイラ

jsLexはJavaScriptのプロファイリング機能も提供しているが、利用手順は若干複雑だ。まずはEclipseのWebプロジェクト上でプロファイルを取りたいプロジェクト(フォルダ)を選択して右クリック→「Rockstarapps」→「Step1.) Unzip jsLex Web Application」を選択する。するとプロファイルを取得するための必要なリソースが生成される。

続いて同じく右クリックメニューから「Rockstarapps」→「Step2.) Inject Performance Markers」を選択する。するとJavaScriptファイルにプロファイルを取得するためのコードが埋め込まれる。このときに生成先として別のフォルダを指定することも可能だ(デフォルトでは選択したフォルダ名-compressedというフォルダに出力される)。

最後にHTMLファイルの先頭に以下の記述を追加する。また、プロファイル取得用のJavaScriptを別フォルダに出力した場合は、HTMLファイルからそちらを参照するようにする必要があるので注意して欲しい。

<script src="jsLex/javascript/jsLex.js"></script>

アプリケーションの初期画面には以下のコードを追加する必要がある。

<script>
jsLex.openProfileWindow("jsLex/profile.html", "myprofile.xml");
</script>

上記の作業を行ったうえでサーバを起動し、ブラウザからHTMLファイルにアクセスすると、以下のような画面がポップアップされ、JavaScriptのプロファイルを取得することができる。