初心者のためのExtJS入門

ExtJSを使うので、ついでにまとめていきます

ExtJS6.6の新機能

最後の更新からかなり間が空きました。

ようやくExtJS6.6を触ったので追加機能のうち大き目っぽい2つだけ取り上げます(執筆の途中でExtJS6.7が出たようで、ちょっと今更感ありますが。。)

ext-genコマンド

ext-genというNodeモジュールでアプリケーションの作成などができるようになったみたいです。 まとめてくださっている方がいらっしゃるので、詳しくはリンク先を参照ください。

https://qiita.com/martini3oz/items/5c94e11322c33697c8b3

私はWindows64bitで開発してますが、ext-genのインストールになぜか失敗したところで挫折しました。 nodeやnpmのバージョンを上げてみたりしたのですが、これまで通りSenchaコマンドで作成することも可能だったので「じゃあ別にいいや」と。

ただし、ExtJS6.7はどうなのかちょっと分からない状況です(ちなみにExtJS6.7のトライアル版ではext-genでのアプリケーション作成に成功しました)。 ExtJS6.6まではトライアル版をダウンロードしてSenchaコマンドでの作成を試せましたが、ExtJS6.7からはトライアル版は完全にNodeモジュールでしか提供されていないようなので。。 だいぶライセンス周りの対応が厳しくなってきたように感じます。

ルーティングの指定が柔軟になった

ルーティングの書き方が柔軟になりました。

Ext.define('MyApp.view.main.MainController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.app-main',

    routes: {
        'user/:{id:num}': {
            action: 'onUser',
            before: 'onBeforeUser',
            name: 'user'
        }
    },

    onBeforeuser: function (values) {
        console.log(values.id);
    }

上記のように、以前は「user/:id」と書いていたところを「user/:{id}」と指定できるようになりました。 どうなるかというと、コールバック関数の引数にオブジェクトとして渡され「values.id」のように値を参照できるようになりました。 以前は「user/:id」であれば、コールバック関数の第1引数がそのまま:idの値になっていたのが異なるところです。 複数のパラメータが出てくると、オブジェクトのほうが扱いやすそうです。

また、以前よりも簡潔にパラメータに制限をかけられるようになりました。 例えば「user/:{id:num}」とすることで、idの部分を数値のみに制限できます。

さいごに

エンバカデロに買収されて以降、正直ExtJS大丈夫かいな?という気持ちはずっとあります。 ExtJS自体は評価していますし、SPAの業務アプリケーションを作成するという場合は非常に優秀なフロントエンドライブラリであることは間違いないので、ひとまずExtJS7までは見守っていくつもりです。仕事なんかでも参考にできる機能や実装なんかもあるだろうし。

でも、Vue.jsのVuetifyあたりはUIコンポーネントがなかなか良さげなので、試した感触が良さそうなら乗り換える気持ちもあります。ライブラリの選定が難しい時期にきてます。

いずれにしても、ライセンス周りの対応でここまでガチガチにされてくると、さらに普及の障害になるのではないかと考えています。

=> 追伸

ExtJSには完全に見切りを付け、現在(2022年12月)はQuasar Frameworkを使うようになりました。