Sencha JetBrains プラグインの話

これは、 Sencha Advent Calendar 2015 の 3日目の記事です。

僕は、もの午後頃着いたときから Vimmer でした。（嘘

一旦 Vimmer になってしまうと、指が覚えたあの世界から抜け出すことは本当に難しいものです。 しかし、今 JavaScript / Sencha Ext JS での開発には、PHPStorm を使うようになりました。

昔の IDE

JavaScript を始めたとき（それは、僕の場合 Ext JS を使い始めたのと同義なんですが）IDE を使ってコーディングを始めました。 Spket IDE という Eclipse のプラグインで、Ext JS の補完ができるといった情報を元にいろいろ試し、その後 WebStorm で Ext JS の補完ができるというので、PHPStorm を購入して使ってもいました。

しかし、それらの補完は動的言語である JavaScript の宿命で、さらにその上で独自のクラスシステムを構築する Ext JS であるため、完全なものからはほど遠く、「ないよりマシ」な程度のものでした。

Vim との出会い

そんな時、Ext JS Perfectday という勉強会があり、そこの懇親会で Vim で開発している話を聞きました。 その後は、Vim + neocomplcache での環境で開発を進めてきました。

Vim + neocomplcache の素晴らしいところは、ノンインテリジェンスの補完だと言うことです。基本的にこれまで入力してきた単語がキャッシュされて補完候補として使われます。開いたファイルの中にある単語も使われるのかな？そんな感じです。 Ext JS の場合ですと、皆さんご存じのように、クラス名や xtype は文字列リテラルの中に書かれます。

[js] Ext.define(‘MyApp.view.MyPanel’, { xtype: ‘mypanel’ : }); [/js]

それを使う時には、次のように xtype を指定しますが、これも文字列の中です。

[js] items: [{ xtype: ‘mypanel’ }] [/js]

賢い IDE の補完は文字列の中を補完してはくれません。 neocomplcache は、リテラルの中でも補完してくれるので、Ext JS をコーディングするときには非常に使いやすかったのです。

だから僕は、ずっと Vim で JavaScript を書き続けてきました。

mixin の登場

IDE の利点は、補完だけではありません。InteliJ IDEA などで Java の開発をすると、静的な言語である Java の利点で、クラスのメソッドの補完だけではなく、クラス呼び出しの際のシグネチャなどもわかります。無名クラスを使ったコールバック処理などの場合は、コードスニペットが挿入されたりもします。

さらに、メソッド名の上で ⌘B を押せば、そのメソッドの定義部分を表示してくれます。これは他人の書いたプログラムを追いかけるときに非常に便利です。

Ext JS の場合はどうでしょう。IDE が Ext JS のクラスをフルサポートしてくれていないため、上記のようなことは望むべくもありませんでした。 ただ、クラス名さえわかっていれば、そのメソッドを探し出すのはさほど難しくありません。もしそのクラスになければ、親クラスをたどっていきます。少々面倒ですが、できないことはありません。

しかし、Ext JS 4 から、mixin が登場しました。ご存じの通り、あるクラスに機能を横からつけることができる機能です。これが入って来ると、とたんにソースコードを追いかけるのが難しくなります。

複数人で大規模なシステムを開発しはじめると、クラスの継承階層は深くなり、mixin も多く使われるようになります。そうなってくると、「このメソッドの実体はどこにあるねん！」ということは頻繁に起こります。

「なんだよ、こんなとこにあったのかよぉ、もぉ勘弁して〜」

僕は、心の中で何度叫んだことでしょう。

JetBrains プラグイン

しかし、皆さまご安心ください。これからはそんな心配をする必要はありません。 Sencha 公式の JatBrains 対応のプラグインがあるからです。

プラグインについては次のブログに詳しく説明されていますので、ご参照ください。

Sencha Ext JS JetBrains Plugin | 株式会社ゼノフィ

最初に説明した、xtype の補完は、この JetBrains プラグインでもできます。というか、こちらはインテリジェンスに補完してくれます。素晴らしいですね。

そして、JetBrains プラグインでは、メソッドなどの定義場所にジャンプするのも簡単です。Sencha クラスシステムを理解しているので、そのメソッドが親クラスや mixin の中にあっても見つけ出してジャンプしてくれます。

これにより開発の効率は大幅にアップします。

Sencha での開発を生業にしている方は、是非このプラグインを使ってください。

あ、忘れてた。 これ、無料では使えないんです。Sencha Ext JS のライセンスが必要です。 しかも、Pro 以上。(;´д｀)

稼がないとですね〜。

明日は、江川さんの記事です。