HOME > 開発者向けBLOG > Sencha Blog >  Sencha IDE プラグイン内のコードコンプリーションガイド

Technology Note 開発者向けBLOG

Sencha Blog

Sencha IDE プラグイン内のコードコンプリーションガイド

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

この記事は、US Sencha社ブログComplete All The Things! A Guide to Code Completion in Sencha IDE Plugins (2016年2月25日|Mark Brocato) を翻訳したものです。

2015年、私のチームは人気のある3つのIDE: Eclipse、Visual Studio、JetBrains product ライン(INtelliJ、WebStorm、RubyMine、PhpStorm、PyCharm)用にプラグインを開発しました。Ext JS は広大で機能性豊かなライブラリであり、MVC/MVVM、チャーティング、データ、アニメーションなどのフロントエンド開発の “フルスタック” を取り囲む存在です。開発者としては、たくさん提供してくれるフレームワークを使う時の一番の挑戦となることは、何をすることが可能なのか細部まで全体の絵をしっかり見るということです。素晴らしい IDE は大きなフレームワークを小さく、そして管理しやすく見せることができます。これは入力する度に手助けとなるサジェスチョンを表示させることによって可能となります。我々はユーザーの皆さんが Ext JS の機能の全てが指先にあるように感じてほしいため、プラグインを開発する上ではコードコンプリーションをトッププライオリティーに持ってきました。

Sencha IDE プラグイン内でのコードコンプリーションは、JavaScript IDE に期待するものよりも遥か上をいくものです。以下がいくつかのハイライトです：

以下のスクリーンショットは Visual Studio 2015 のものです。

クラス名

ストリング内でも、どんな Ext JS クラスもしくはネームスペースでも入力し始めるとマッチングした結果が表示されます：

Class Names

Configs

Ext JS コンポーネントは非常に柔軟です。各クラスはたくさんのコンフィギュレーションオプションを持っています。コンフィグブロックで ctrl-space を入力すると、使用しているクラスでの関連したコンフィグ一覧が表示されます。

Configs

プロパティとメソッド

コンポーネントを一度インスタンス化すると、プラグインはそのコンポーネントのプロパティとメソッド全てをサジェストします：

Properties and Methods

イベント

ctrl-space をどんなリスナーオブジェクト、もしくは .on、 .mon、 .un、.mun、の最初のパラメータに入力すると、使用可能なイベントがリストとして表示されます。

Events

Xtype、Types、その他エイリアス

プラグインはエイリアスが使用されている場所なら値をサジェストします。一番よく使われるエイリアスはxtypeであり、ビューコンポーネントのショートハンド名です。

Xtypes

その他、ViewController や ViewModel タイプのエイリアスもサポートされています。

Other Aliases

フィールドタイプももちろんされています。

Field Types

基本的にどこでも “type” を使用すれば、コンテキストにあわせて関連するタイプのリストが表示されます。

コントローラメソッド

バウンドコントローラを持ったビューの場合、もしあなたの ViewController が以下のようなメソッドがある場合…

Controller Methods

… ビュー内のリスナーコンフィグの値内で ctrl-space を入力すると見られることができます。

Listener Config

ビューレファレンス

ビューコントローラ内で、ビューコンポーネントへのレファレンスが必要な場合。ビュー内でレファレンスを宣言した場合…

View References

…ビューコントローラ内で見ることができます。

ViewController

バインド表現

プラグインはバインド表現を書いている時に、ビューモデル内にストア、データ、リンク、フォーミュラをレファレンスすることもできます。ビューモデルクラス内で以下のように宣言してください…

Bind Expressions

…ビュー内でバインド表現を完成させると見ることができます。

Views

ベストプラクティス

JSDuck

Sencha JS IDE プラグインはどのようにして貴方が入力する都度、何をサジェストするかを判定しているでしょうか？コードをインデックスし、クラス作成や JSDuck/JSDoc コメントの、Ext.define などの共通の Ext JS コンベンションを探します。JSDuck は全ての API ドキュメントを生成するために Sencha が使用するドキュメンテーションツールです。もしプロジェクトをドキュメントするのにまだ使用していないのであれば、使用することを強くおすすめします。検索可能で素晴らしいドキュメントを製作できるとは別に、IDE 経験も豊かになります。なぜならプラグインがクラスを理解するスピードが向上するからです。例えば、独自のクラスコンフィグを @cfg タグをつかってアノテートした場合…

Annotate your own classes’ configs

…コード内のどこか別の場所でコンポーネントのインスタンスを作成した場合に見ることができます…

Creating instances of the component

Ext JS ソースコード

一番重要かもしれませんが、プラグインは Ext JS フレームワーク自体をインデックス化しなければコードサジェスチョンを提供することはできません。それを有効にするには、フレームワークソースはプロジェクト内のどこかに駐在しなければなりません。Sencha Cmd を使ってプロジェクトをビルドする場合、これは自動的に行われます。もしフレームワークソースがプロジェクト内に駐在しないのであれば、プラグインを直接指すことも以下のガイドで可能となります。

結論

今回は、 Eclipse、Visual Studio、JetBrains product ライン(INtelliJ、WebStorm、RubyMine、PhpStorm、PyCharm)の Sencha IDE プラグインをどのように活用できるかをまとめてみました。もし質問やフィードバックなどあれば Eclipse、Visual Studio、JetBrains プラグインフォーラムで共有してください。

<

>