HOME > 開発者向けBLOG > Ext JS >  Sencha Ext JS JetBrains Plugin

Technology Note 開発者向けBLOG

Ext JS

Sencha Ext JS JetBrains Plugin

こんにちは、ゼノフィaoyamaです。

JavaScriptのIDEとしても人気があるJetBrainsシリーズですが、Senchaでも公式にプラグインが公開されました。 Sencha Ext JSプラグインではJetBrainsがもともと持っている、コード補完やコードジャンプがExt JS向けに拡張されています。 今回はその機能についていくつかご紹介します。
(例ではWebStorm Version 10.0.4を利用しています)

インストール

Ext JSアプリケーションを作成するために、まずはSDKとSencha Cmdを準備しましょう。
せっかくなので、Ext JS 6のベータ版をダンロードしておきます。
7月1日にSencha Ext JS6のリリースがされ、Beta版はなくなりました。 お試し版をダウンロードできるので、そちらから落としてみてください。
※ダウンロードは以下のサイトから登録するとメールが来るので、そこから落とす流れになります。

* Ext JS 6 ベータ
* Ext JS 6

プラグイン自体はIDEの Preferences > plugins > Browse Repositories で “sencha” と検索すると見つけられます。

プラグイン検索

プロジェクト生成

インストールが終わったら、さっそくアプリを作成してみましょう。
Create New Projectから Ext JSプロジェクトを選択します。
SDKとSencha Cmdのパスを指定して、Createボタンをクリックするとコマンドが動き出します。

Project作成 Ext JSプロジェクト選択

これで以下のようなアプリケーションのひな形ができあがります。

  • プロジェクトツリー プロジェクトツリー

ファイル変更監視

先ほどの画面の右上に、Senchaのマークと▶がありますね。この▶をクリックすると、ファイル変更の監視が始まります。
(Run > Edit Configurationから設定も可能なので、見つからない場合はそちらから探してみてください)

  • ファイル監視コマンド (sencha watch) ファイル監視

また、同時に簡易Webサーバが動作しますので、ブラウザから確認ができるようになります。 監視コマンドログの最後にポート番号が表示されていますので、http://localhsot:1841 でアクセスしてみてください。

  • Scaffoldingアプリケーション アプリブラウズ

スケルトンコード

まず便利に利用できるのが、開発初期のクラス準備時の自動生成です。
アプリケーションのルート(app) 配下で右クリックメニュー > New を選択すると、Ext JS Classが選択できます。 メニューを表示したディレクトリに応じて、ControllerやStoreといった 対応するクラスがあらかじめ選択されています。 もちろん、通常のクラスといった別の選択も可能です。

以下の例では、storeディレクトリでのメニューでStoreがデフォルトで選択されている状態です。
生成されるスケルトンコードは、一般的に必要な情報があらかじめコメントアウトで準備されています。

  • Storeの作成メニュー Store準備1
  • 作成されたスケルトンコード Store準備2

viewディレクトリ内ではView Packageが選択でき、View,ViewModel,ViewControllerの3つを一度に生成することもできます。 上記3つのクラスは、それぞれの連携を記述する必要がありますが、View Packageでは自動的に補完してくれます。

  • View Packageの作成メニュー View準備1
  • 作成されたView Packageファイル (Viewファイル) View準備2

コード補完

多くの方が経験されているかもしれませんが、Ext JSのクラスはとても多く覚えきれません。
しかしこのプラグインでは、xtype,extend,requires,mixins,usesといった、クラス指定の記述をする箇所で、
クラス名やxtypeをサジェストしてくれる機能があります。 候補をクリックやタブなどで選択すると、自動的にクォーテーションで括ってくれる細かい気づかいもみられます。

  • extend のコード補完 extendサジェスト

  • xtype のコード補完 xtypeサジェスト

Viewクラスでリスナを定義して、実体をViewControllerに作成するのがViewControllerの利用方法のひとつですが、 この作業も一部補完できます。

  • 例として、画面のようにlistenersにクリックイベントのリスナを記述します。
    この時点では、ViewControllerに対応するメソッドがないため、文字色が灰色です。 Viewリスナ定義

  • 電球マークをクリックして、”Create Method <メソッド名> in <クラス名>”を選択します。 リスナ作成

  • ViewController側に対象のメソッドが作成されます。
    この状態でのlisteners記述では、アクティブな文字色になり後述のコードジャンプ対象となります。 作成済みリスナ アクティブなリスナ

requiresへの追加

xtype やクラスの利用時に、該当箇所に黄色い下線が表示されることがあります。 これはそのクラスが適切に requires に含まれていないことを意味します。 黄色い下線をクリックし、電球マークをクリックして、”Add <クラス名> to requires” を選択すればrequiresに追加してくれます。

  • requiresへの追加 requires追加

この機能はオプション設定によって、ファイルを開いたときに自動的に動作するようにもできます。

  • Preferences > Other Settings > Sencha 自動requires追加

コードジャンプ

ナビゲーション機能もExt JS向けに強化されています。
IDEに元から備わっている機能に加え、以下のような点が便利に利用できます。

  • 継承機構を解釈し、継承元のメソッドやプロパティにジャンプできます。

  • Ext.createやextend,xtype,mixins,requires,usesなどで記述しているクラス名を理解し、宣言箇所にジャンプできます。 extendジャンプ1 extendジャンプ2

  • layout:’border’ のような特殊なクラス参照からも、宣言箇所にジャンプできます。 layoutジャンプ1 layoutジャンプ2

  • 先述したViewでのリスナ記述からも、宣言箇所にジャンプできます。 listenerジャンプ1 listenerジャンプ2

  • 同様にViewで記述されたbindからもViewModelでの宣言にジャンプできます。 bindジャンプ1 bindジャンプ2

ジャンプアクションはデフォルトで Ctrl(Cmd) + クリックか Ctrl(Cmd) + B となります。

スペルチェック

前述のとおり、Ext JSでは専用の独自プロパティを多く利用します。
そのため、xtype, ctype, tbar など、普通の辞書では解決できず、IDEが警告を出してしまいます。
このプラグインでは、スペルチェック用の辞書を拡張しており、これらの警告を抑止してくれます。

終わりに

JetBrains製のIDEをご利用の方は一度試してみる価値はあるかと思います。
Sencha Ext JSでの開発がよりスピーディーに進められるでしょう。

より詳しい機能やフィードバックについては、以下のサイトを参照ください。
Sencha Jetbrains Plugin

PAGETOP