オープンツール (Open Tooling) で Ext JS アプリケーションを生成して実行する手順をメモっとく。Ext JS 6.6 がリリースされ、これまでの Sencha Cmd だけでなく npm をベースとしたオープンツールによってアプリケーションを生成したりビルドしたりできるようになったのだ。

前提条件

Java 8 と Node が必要なのでインストールしておこう。Java は 8 とバージョン指定がある。Node は最新で大丈夫なので、下記のように Homebrew でインストールしておく。

$ brew install node

Sencha のレジストリにログインする

Ext JS 本体や ExtGen などのオープンツールは Sencha のレジストリから提供されるので、Sencha のレジストリにログインしておく必要がある。

商用ライセンスを持っていれば、サポートポータルにログインするときのアカウントでログインできる。ただし、Username に入力するメールアドレスの @ は .. に置換して入力する必要がある。

商用ライセンスを持っていなければ、Try Sencha Ext JS 6.6 with Open Tooling から試用を申し込んで利用する。

$ npm login --registry=http://npm.sencha.com --scope=@sencha
Username: takuya.tsuchida..example.com
Password: 
Email: (this IS public) [email protected]
Logged in as takuya.tsuchida..example.com to scope @sencha on http://npm.sencha.com/.

ExtGen をインストールする

Ext JS アプリケーションを生成する ExtGen パッケージを npm でインストールする。

$ npm install -g @sencha/ext-gen

Ext JS アプリケーションを生成する

Ext JS 6.6 のアプリケーションを ExtGen を使用して生成する。今回はデフォルト設定でアプリケーションを生成する。様々な設定が可能なようなので、詳細な使い方は ext-gen --help を実行して確認してほしい。

$ ext-gen app -a

Ext JS アプリケーションを実行する

my-app ディレクトリに MyApp プロジェクトが生成されるので、そのアプリケーションを実行してみよう。下記のコマンドを実行すると自動的にデフォルトブラウザーが立ち上がってサンプルアプリケーションが表示されるはずだ。

$ cd my-app
$ npm start

今回は Ext JS 6.6 で追加されたオープンツールを使用して Ext JS アプリケーションを生成して実行する手順について説明した。Sencha Cmd からオープンツールへの移行は様子を見ながらになると思うが、JavaScript 界隈でデファクトスタンダードになっているツールなのでいずれは全面移行する気がする。個人的には Sencha Architect で生成されるプロジェクトのビルドツールがオープンツールになったら移行しようかなと思っている。

参考文献

https://www.sencha.com/blog/announcing-sencha-ext-js-6-6-with-open-tooling-ga-ja/
http://docs.sencha.com/extjs/6.6.0/guides/getting_started/open_tooling.html