*

Eclipseの「JSDT-jQuery」プラグインでJQuery(JavaScript)のコード補完が可能な環境を作成する

公開日: : 最終更新日:2016/12/05 Eclipse, JavaScript


スポンサードリンク



Eclipse for JavaEE Developer等のWeb開発系のEclipseがインストールされている事を前提事項としております。

これらのEclipseには、「JSDT」(JavaScript Development Tools)が含まれており、JavaScriptエディタとして「JSDT」が利用可能です。当然JavaScriptエディタですからコード補完も可能です。

とは言え、近年ではJavaScriptでjQueryを利用しないプロジェクトはほとんどお目にかかることはないです。
しかし、「JSDT」単体ではjQueryのコード補完は行えません。

このような背景から本エントリーでは、JQueryを使ったJavaScriptのコード補完が行える環境作成の説明をさせていただきます。

Eclipseの「jsdt-jquery」プラグインを利用します。

本エントリーの内容は以下の通りです。

  1. 「jsdt-jquery」プラグインの説明
  2. 「jsdt-jquery」の実際の利用方法


1 「jsdt-jquery」プラグインの説明

「JSDT-jQuery」プラグインの概説

「JSDT」単体では素のJavaScriptのコード補完は可能ですが、「jQuery」を利用したJavaScriptのコード補完はできません。
「jQuery」を利用したJavaScriptでも「JSDT-jQuery」プラグインをインストールすることで、コード補完機能が利用可能となります。

「JSDT jQuery」の最新(2015/04/23日現在)バージョンである1.8.0では「jQuery 3」のコード補完が可能となっております。

「jsdt-jquery」プラグインのインストール方法

Eclipseのメニューの[ヘルプ]>[Eclipseマーケットプレース…]をクリックします。
マーケットプレース

検索の右側にあるテキストボックスにjsdt-jqueryと入力して、「実行」ボタンをクリックします。
マーケットプレース画面

しばらく経ってから検索結果が表示されますので、下記画像の「インストール」ボタンをクリックします。
マーケットプレース検索終了画面

「フィーチャーの選択画面」が表示されますので、「確認>」ボタンをクリックします。
フィーチャーの選択画面

すると依存関係の整合性チェックが行われます。追加でインストールする必要があるフィーチャーが存在する場合は「フィーチャーの選択画面」に戻ります。
スクリーンショット 2015-04-22 13.32.17

依存関係の整合性チェックが問題なければ「ライセンスのレビュー」画面が表示されますので、「使用条件の条項に同意します」のラジオボタンにチェックを入れ、「完了」ボタンをクリックします。
ライセンスのレビュー画面

これでインストールが実行されます。
スクリーンショット 2015-04-22 13.34.04

インストールダイアログのバーが100%になると、セキュリティ警告ダイアログが表示されますので、「OK」ボタンをクリックします。
セキュリティ警告ダイアログ

最後にEclipseの再起動確認のダイアログが表示されますので「はい」ボタンをクリックします。これでjsdt-jquery」プラグインのインストールは完了です。
再起動ダイアアログ

「jsdt-jquery」プラグインの設定方法

「jsdt-jquery」プラグインの個別の設定は存在しません。
「JSDT」の設定がそのまま適用されます。
この設定につきましては別エントリーを作成したいと考えています。

2 「jsdt-jquery」の実際の利用方法

「JSDT」の利用方法を説明させていただいた後に、「jsdt-jquery」の利用方法を説明させていただきます。

「JSDT」の利用方法

「JSDT」を利用して、JavaScriptを編集する方法は2通り存在します。

JavaScript プロジェクトへ変換

既存のEclipseのプロジェクトを「JSDT」が利用できるようにする方法です。

non-jsdtプロジェクトをJavaScriptに変換してみます。
スクリーンショット 2015-04-22 18.41.33

non-jsdtを選択し、マウスの右クリックメニューの「構成」>「JavaScript プロジェクトへ変換…」をクリックします。
スクリーンショット 2015-04-22 18.43.10

プロジェクトのプロパティを開くと「JavaScript」の項目が追加されており、JavaScriptのプロジェクトに変換されてた事が確認できます。
スクリーンショット 2015-04-22 18.55.38

なお、「javaプロジェクト」を「JavaScriptプロジェクト」へ変換する事も可能です。
スクリーンショット 2015-04-22 19.16.05

JavaScript プロジェクトの作成

先ほどは、既存のプロジェクトを「JavaScriptプロジェクト」に変換しましたが、新規作成時に選択する事も可能です。

パッケージ・エクスプローラーでマウスの右クリックメニューを表示し、「新規」>「その他」をクリックします。
スクリーンショット 2015-04-22 19.25.54

「新規」画面が表示されますので[JavaScript]>「JavaScriptプロジェクト」を選択し、「次へ>」ボタンをクリックします。
新規画面

「新規JavaScript プロジェクト」画面が表示されますので、プロジェクト名を入力して、「完了」ボタンをクリックします。
スクリーンショット 2015-04-22 19.22.08

JavaScriptプロジェクトの作成完了後に以下のダイアログが表示されます。
スクリーンショット 2015-04-22 19.22.53

「はい」ボタンをクリックするとJavaScript開発に適したJavaScript用のパースペクティブが開かれました。
スクリーンショット 2015-04-22 19.41.47

既存のプロジェクトを「JavaScriptプロジェクト」に変換した時には無かった動作ですね。

JavaScriptのコード補完例

素のJavaScriptにおけるコード補完例を説明させていただきます。

まずは、JavaScriptソースファイルを作成します。
せっかくJavaScriptパースペクティブが表示されていますので、ツールバーの「新規JavaScriptファイル」から作成してみます。
(macですので、メニューバーは表示されていませんが・・・)
スクリーンショット 2015-04-22 19.58.05

上記画像の赤枠部分をクリックします。
するといきなり「新規JavaScriptファイル」作成画面が表示されます。
スクリーンショット 2015-04-22 20.00.56

親フォルダーにプロジェクトルート、ファイル名にsample.jsを指定し、「完了」ボタンをクリックします。
スクリーンショット 2015-04-22 20.05.06

画面は以下のように表示されていると思います。
スクリーンショット 2015-04-23 15.42.53

三角形の面積を計算する関数を作成し、それを呼び出す以下の処理を実際に書いてみます。

上記コードを実際にコード補完を利用しながら入力している動画が以下となります。

関数テンプレートや変数等も補完してくれるので快適です。

「jsdt-jquery」の利用方法

「jsdt-jquery」プラグインをインストールしただけでは「JQuery」のコード補完は有効になりません。

有効にするには「JavaScriptライブラリの追加」を行う必要があります。

「JQuery」ライブラリの追加方法

追加したいJavaScriptプロジェクトを選択し、右クリックメニューの「プロパティー」をクリックします。
スクリーンショット 2015-04-23 18.16.54

表示されたプロパティー画面の[JavaScript]>[インクルード・パス]を選択後、「ライブラリー」タブをクリックし、JavaScriptライブラリーを表示した後に「JavaScriptライブラリの追加…」ボタンをクリックします。
スクリーンショット 2015-04-23 18.55.18

「JavaScriptライブラリーの追加」画面で、「JQueryライブラリー」を選択し、「次へ」ボタンをクリックします。
スクリーンショット 2015-04-23 18.17.32

次の画面では追加する「jQuery」のバージョンを指定します。
スクリーンショット 2015-04-23 18.17.47

バージョンのコンボをクリックすると以下のような項目が表示されます。
スクリーンショット 2015-04-23 18.22.55

3.0が選択できるようになってしまっていますが・・・

「jQuery 3.0」からは2種類のパッケージを提供しており、「jQuery Compat 3.0」はバージョン1.11.1の後継で、あり
「jQuery 3.0」はバージョン2.1.1の後継となっています。

この背景をふまえると、3.0だけが選択できることは混乱の元となる気がします。
スクリーンショット 2015-04-23 21.29.10

とりあえず、今回は2.1を選択して「完了」ボタンをクリックしました。
プロパティ画面のライブラリーに「jQuery 2.1 Library」が追加されましたので、「OK」ボタンをクリックして変更を確定します。

jQueryのコード補完例

実際のコード補完時がどのように行われるかを説明させていただきます。

何も文字を入力していない状態でコード補完(ctrl+space)を行うと以下のように表示されます。
スクリーンショット 2015-04-23 21.36.43

少し見にくいですが、候補の先頭が$()となっており、「jQuery」のオブジェクトがコード補完対象となっていることが見てとれます。

以下のコードを入力する時のコード補完の動作イメージの説明をさせていただきます。

と言っても動画の方が分かりやすいと思いますので動画にしました。
redのダブルコーテーションが抜けてますが・・・

このようにかなり軽快にjQueryのコードが書けるようになりました。

コード補完時のjQueryのバージョン差異の確認

プロジェクトに追加している「JQuery」ライブラリのバージョンによりコード補完候補が変わるかを確認してみました。

全てのバージョンの組み合わせと差異を確認することは不可能ですので
toggle()をターゲットとしました。

toggle()は1.9で削除された機能で、クリックごとに交代で実行させる2つ以上のハンドラをアタッチする物です。

・2.1での確認
残念ながらコード補完の候補に表示されてしまいました。
スクリーンショット 2015-04-23 21.57.23

live():toggle()と同様に1.9で削除された機能は候補に表示されませんでした。
スクリーンショット 2015-04-23 22.03.55

うーん、なんだかこの検証は、少し不安な結果となりましたが、「jsdt-jquery」プラグイン便利です!

「Eclipseの「jsdt-jquery」プラグインでJQuery(JavaScript)のコード補完が可能な環境を作成する」は以上です。


スポンサードリンク



関連記事

EclipseでAndroidアプリケーションの開発環境の構築と”Hello World!”まで

対象のOSはMac(OS X 1.9.5)とWindows7 64bitとなります。 といっても手

記事を読む

利用すると生産性が格段に向上する厳選Eclipseショートカット集

今回のエントリーは、利用すると生産性が格段に向上するEclipseのショートカット集となります。

記事を読む

JUnit入門その8[Eclipse4.4のJUnitプラグインのテストケースのカバレッジをEclEmmaを利用して測定してみる]

今回は「EclEmma」を使って、テストのカバレッジの測定を行うエントリーとなります。 「djUn

記事を読む

Java超入門 with Eclipse[5:クラスに関する基礎知識(メソッドをJUnitを使って説明)]

クラスに関する基礎知識シリーズも、いよいよメソッドを残すのみとなりました。 前回までは、Eclip

記事を読む

Eclipse(4.3)の使い方[パースペクティブのツールバーのカスタマイズ(「ツール・バー可視性」と「メニュー可視性」タブ)]

前回エントリー「Eclipse(4.3)の使い方[各画面エリアの名称とパースペクティブのカスタマイズ

記事を読む

Java超入門 with Eclipse[4:クラスに関する基礎知識(修飾子とクラスとインスタンスと変数)]

前回は、Javaの基本であるクラスの基本的な知識をざっくりと説明させていただいたあと、 packa

記事を読む

JUnit入門その7[Eclipse4.4のJUnitプラグインとDBUnitの併用(更新系のテストの実装)]

JUnit入門その6 ではDBUnitを便利に利用するためのユーティリティ(と言っても基底クラスで

記事を読む

Selenium入門その3[Selenium WebDriver(Java/Junit4)の使い方]

WebDriverでは、予め中継サーバを起動しなくても、テスト実行時にブラウザ拡張機能や、OSのネイ

記事を読む

java8(JDK8)の新機能[大幅に強化されたコレクションAPI:java.util.List] をeclipseとJUnitで確認する。

Java8(JDK8)では、ラムダ式の導入を前提とした、コレクションAPIの新機能が追加されました。

記事を読む

Java超入門 with Eclipse[3:クラスに関する基礎知識(クラスとインスタンスとパッケージ)]

Javaといえば、「オブジェクト指向」とのイメージがとっても強いですよね。 そう、そうです。間違い

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Selenium入門その6[Selenium3でWebDriver(Java/Junit4)の環境を作成しEdge,Chrome,Firefoxで確認してみる]

Selenium3も3.0.1がリリースされましたし、今後は本格的にS

Selenium利用時のトラブルシューティング方法[クリック編]

Seleniumは便利なテスト自動化ツールですし、今後は更なる利用者の

Java8のラムダ式とStream APIを利用してコーディング量の削減サンプル集

Java8になりラムダ式と「Stream API」が利用できるようにな

Selenium入門その5[ページオブジェクトパターン(Page Object Design Pattern)を利用して変更に強いテストを作成する方法]

Selenium入門その2 では「UIマップファイル」と言う仕組みが

Javaによる非同期処理入門その1[非同期処理の実装方法の概説]

Javaによる非同期処理に関するエントリーを前々から作成したいと思って

→もっと見る

Optimization WordPress Plugins & Solutions by W3 EDGE
PAGE TOP ↑