Ext JS事始め

概要

Webアプリのフロントエンドに限らず、フレームワークの選定って悩みどころですね。

　フロントエンドに絞りネットで検索すると、jQueryに始まり、TypeScriptにAngular、Knockout.js … などなど、実に様々なフレームワークが存在します。
　その中から、作成したいプロダクトやメンバーのスキルセットにマッチし、且つ、数年後も現役なフレームワークを探し出すのは至難の業ともいえる時代です。

そこで、今回お勧めしたいのがSenchaがリリースしている「ExtJS」。

このフレームワークの特徴を幾つか挙げますと…

• 商用とオープンソース(GPL)のデュアルライセンス
• シングルページアプリケーションが容易に構築できる
• コンポーネントベースであり、すでに豊富なコンポーネントが同梱されている
• MVCやMVVMアーキテクチャを使って実装できる
• 他のライブラリと共存可能
• 開発をサポートする強力なツールがある

色々ございますが、（難しい話はさて置いて…）まずは実際に動かしてその感触を確かめて見ましょう。

前提環境

• Windows（Macでも可）
• コンソール（Windowsでは、コマンドプロンプト若しくは、PowerShell）
• お好きなテキストエディタ
• JavaScriptのコーディングスキル
• 少しのやる気

準備

SDKの入手

まずは、中核となるライブラリ（SDK）を入手します。
Sencha GPL Licensingにアクセスして、右側に表示されている入力枠に必要事項を入力します。

「Sencha Ext JS」を選択し、自分自身のメールアドレスを入力、記載されているライセンス内容に同意するためのチェックボックスをチェックし、「DOWNLOAD SDK」をクリックします。
しばらくすると、入力したメールアドレス宛にSenchaからメールが届きます。

　このメールに記載されているURLにアクセスすると、GPLとしてリリースされている最新バージョンのSDKが入手できます。本記事執筆時点（2017年12月7日）では、6.2.0でした。
商用バージョンは 6.5.2 なので、GPLとして公開されているSDKは少し前のバージョンが提供されていることが分かります。

リンクをクリックし、早速ダウンロードしましょう。

ダウンロードが終了したら、わかりやすいディレクトリに全てを解凍します。
ここでは「c:\ext-6.5.2-gpl」とします。

　このSDKさえあれば開発は進められますが、Ext JSで開発するためには必須となるツール「Sencha Cmd」があるので、もれなくインストールしましょう。

Sencha Cmdのインストール

　Download Sencha Cmdにアクセスして、自身の環境に合わせたインストーラをダウンロードしてください。
ダウンロードしたファイルを実行し、インストールを行います。
インストールが終了したら、コンソールを起動して以下コマンドを実行してみましょう。

c:\>sencha
Sencha Cmd v6.5.2.15
Sencha Cmd provides several categories of commands and some global switches. In
most cases, the first step is to generate an application based on a Sencha SDK
such as Ext JS or Sencha Touch:

    sencha -sdk /path/to/sdk generate app MyApp /path/to/myapp

Sencha Cmd supports Ext JS 4.1.1a and higher and Sencha Touch 2.1 and higher.

To get help on commands use the help command:

    sencha help generate app

For more information on using Sencha Cmd, consult the guides found here:

http://docs.sencha.com/cmd/


Options
  * --beta, -be - Enable beta package repositories
  * --crash-log-dir, -cr - Sets the directory to store crash logs. If unspecified, logs are written to the process cwd.
  * --cwd, -cw - Sets the directory from which commands should execute
  * --debug, -d - Sets log level to higher verbosity
  * --info, -i - Sets log level to default
  * --nologo, -n - Suppress the initial Sencha Cmd version display
  * --plain, -pl - enables plain logging output (no highlighting)
  * --quiet, -q - Sets log level to warnings and errors only
  * --sdk-path, -sd - The location of the SDK to use for non-app commands
  * --strict, -st - Treats warnings as errors, exiting with error if any warnings are present
  * --time, -ti - Display the execution time after executing all commands

Categories
  * app - Perform various application build processes
  * compile - Compile sources to produce concatenated output and metadata
  * cordova - Quick init Support for Cordova
  * diag - Perform diagnostic operations on Sencha Cmd
  * framework - Commands to manage frameworks in the current workspace
  * fs - Utility commands to work with files
  * generate - Generates models, controllers, etc. or an entire application
  * manager - Commands for interacting with Sencha Web Application Manager.
  * manifest - Extract class metadata
  * package - Manages local and remote packages
  * phonegap - Quick init support for PhoneGap
  * repository - Manage local repository and remote repository connections
  * template - Commands for working with templates
  * theme - Commands for low-level operations on themes
  * web - Manages a simple HTTP file server
  * workspace - Commands to perform actions on the current workspace

Commands
  * ant - Invoke Ant with helpful properties back to Sencha Cmd
  * audit - Search from the current folder for Sencha frameworks and report their license
  * build - Works as an alias of sencha app build or sencha package build
  * config - Load a properties file or sets a configuration property
  * help - Displays help for commands
  * js - Executes arbitrary JavaScript file(s)
  * switch - Manage the active Sencha Cmd version
  * upgrade - Upgrades Sencha Cmd
  * which - Displays the path to the current version of Sencha Cmd

インストールされたSenchaCmdのバージョンと共に、使い方のヘルプが表示されます。
簡単なWebサーバとして起動したり、さまざまなスケルトンを作成するコマンドが用意されていることがわかります。

以上で、必要な環境が整いましたので、早速開発を始めましょう。

開発開始！

スケルトンの作成

まずはアプリケーションのひな型を作り、そこから開発を始めると幾分楽に開発を始めることができます。
Ext JSでは、ひな型を作る便利なコマンドが用意されています。
先程インストールした「Sencha Cmd」を使います。
コンソールを開いて以下のコマンドを実行します。

C:\>sencha -sdk c:\ext-6.2.0-gpl generate app sample sample
Sencha Cmd v6.5.2.15
[INF] Copying framework to C:\sample\ext
[INF] Using GPL version of Ext JS version 6.2.0.981 from C:\sample\ext.
[INF] The implications of using GPL version can be found here (http://www.sencha.com/products/extjs/licensing).
[INF] Processing Build Descriptor : classic (development environment)
[INF] Loading compiler context
[INF] Loading app json manifest...
[INF] Appending content to C:\sample\bootstrap.js
[INF] Writing content to C:\sample\classic.json
[INF] merging 237 input resources into C:\sample\build\development\sample\classic\resources
[INF] merged 237 resources into C:\sample\build\development\sample\classic\resources
[INF] merging 18 input resources into C:\sample\build\development\sample
[INF] merged 17 resources into C:\sample\build\development\sample
[INF] Writing content to C:\sample\build\temp\development\sample\slicer-temp\bootstrap.json
[INF] Writing content to C:\sample\build\temp\development\sample\slicer-temp\bootstrap.js
[INF] writing sass content to C:\sample\build\temp\development\sample\sass\sample-all.scss.tmp
[INF] appending sass content to C:\sample\build\temp\development\sample\sass\sample-all.scss.tmp
[INF] appending sass content to C:\sample\build\temp\development\sample\sass\sample-all.scss.tmp
[INF] writing sass content to C:\sample\build\temp\development\sample\sass\config.rb
[INF] Writing content to C:\sample\build\development\sample\classic.json
[WRN] Use of 'require()' will be deprecated: C:/sample/ext/classic/theme-neutral/sass/etc/mixins/font-icon.scss:1
[WRN] Use @import instead
[LOG] Fashion build starting for C:\sample\build\temp\development\sample\sass\sample-all.scss
[WRN] @theme-background-image: Theme image not found: images/menu/default-menubar-group-checked.png
[LOG] Fashion build complete for C:\sample\build\temp\development\sample\sass\sample-all.scss
[LOG] Fashion build completed in 2.781 sec.
[INF] Appending content to C:\sample\bootstrap.js
[INF] Writing content to C:\sample\classic.json
[INF]
[INF] ======================================================================
[INF]
[INF] Processing Build Descriptor : modern (development environment)
[INF] Loading compiler context
[INF] Loading app json manifest...
[INF] Appending content to C:\sample\bootstrap.js
[INF] Writing content to C:\sample\modern.json
[INF] merging 381 input resources into C:\sample\build\development\sample\modern\resources
[INF] merged 381 resources into C:\sample\build\development\sample\modern\resources
[INF] merging 8 input resources into C:\sample\build\development\sample
[INF] merged 0 resources into C:\sample\build\development\sample
[INF] Writing content to C:\sample\build\temp\development\sample\slicer-temp\bootstrap.json
[INF] Writing content to C:\sample\build\temp\development\sample\slicer-temp\bootstrap.js
[INF] writing sass content to C:\sample\build\temp\development\sample\sass\sample-all.scss.tmp
[INF] appending sass content to C:\sample\build\temp\development\sample\sass\sample-all.scss.tmp
[INF] appending sass content to C:\sample\build\temp\development\sample\sass\sample-all.scss.tmp
[INF] Writing content to C:\sample\build\development\sample\modern.json
[WRN] Use of 'require()' will be deprecated: C:/sample/ext/modern/theme-material/sass/src/Component.scss:1
[WRN] Use @import instead
[WRN] Use of 'require()' will be deprecated: C:/sample/ext/modern/theme-base/sass/etc/mixins/font-icon.scss:5
[WRN] Use @import instead
[WRN] Use of 'require()' will be deprecated: C:/sample/ext/modern/theme-base/sass/etc/mixins/icon.scss:5
[WRN] Use @import instead
[WRN] Use of 'require()' will be deprecated: C:/sample/ext/modern/theme-neptune/sass/etc/functions/px-to-em.scss:1
[WRN] Use @import instead
[WRN] Use of 'require()' will be deprecated: C:/sample/ext/modern/theme-neptune/sass/etc/functions/px-to-rem.scss:1
[WRN] Use @import instead
[LOG] Fashion build starting for C:\sample\build\temp\development\sample\sass\sample-all.scss
[LOG] Fashion build complete for C:\sample\build\temp\development\sample\sass\sample-all.scss
[LOG] Fashion build completed in 2.156 sec.
[INF] Appending content to C:\sample\bootstrap.js
[INF] Writing content to C:\sample\modern.json
[INF] Adding application to workspace.json

色々なログが表示されますが、無事にアプリケーションのひな型が作成できた模様です。

Webサーバの起動

コンソールを起動し、先ほど作成したsampleアプリケーションがカレントディレクトリとなるよう移動します。
さらに、Sencha Cmdのコマンドを実行してサーバーを起動させます。

C:\sample>sencha app watch
Sencha Cmd v6.5.2.15
[INF] Using GPL version of Ext JS version 6.2.0.981 from C:\sample\ext.
[INF] The implications of using GPL version can be found here (http://www.sencha.com/products/extjs/licensing).
[INF] Processing Build Descriptor : classic (development environment)
[INF] Starting server on port : 1841
[INF] Mapping http://localhost:1841/~cmd to C:\Users\wild.lycaon\AppPortable\Sencha\cmd\6.5.2.15...
[INF] Mapping http://localhost:1841/ to C:\sample...
[INF] Server started at port : 1841
[INF] Application available at http://localhost:1841
[INF] Loading compiler context
[INF] Loading app json manifest...
[INF] Appending content to C:\sample\bootstrap.js
[INF] Writing content to C:\sample\classic.json
[INF] merging 237 input resources into C:\sample\build\development\sample\classic\resources
[INF] merged 0 resources into C:\sample\build\development\sample\classic\resources
[INF] merging 18 input resources into C:\sample\build\development\sample
[INF] merged 0 resources into C:\sample\build\development\sample
[INF] Writing content to C:\sample\build\temp\development\sample\slicer-temp\bootstrap.json
[INF] Writing content to C:\sample\build\temp\development\sample\slicer-temp\bootstrap.js
[INF] writing sass content to C:\sample\build\temp\development\sample\sass\sample-all.scss.tmp
[INF] appending sass content to C:\sample\build\temp\development\sample\sass\sample-all.scss.tmp
[INF] appending sass content to C:\sample\build\temp\development\sample\sass\sample-all.scss.tmp
[INF] Writing content to C:\sample\build\development\sample\classic.json
[WRN] Use of 'require()' will be deprecated: C:/sample/ext/classic/theme-neutral/sass/etc/mixins/font-icon.scss:1
[WRN] Use @import instead
[LOG] Fashion build starting for C:\sample\build\temp\development\sample\sass\sample-all.scss
[WRN] @theme-background-image: Theme image not found: images/menu/default-menubar-group-checked.png
[LOG] Fashion build complete for C:\sample\build\temp\development\sample\sass\sample-all.scss
[LOG] Fashion build completed in 5.5 sec.
[INF] Appending content to C:\sample\bootstrap.js
[INF] Writing content to C:\sample\classic.json
[INF] Loading Build Environment
[INF] Waiting for changes...
[WRN] Use of 'require()' will be deprecated: C:/sample/ext/classic/theme-neutral/sass/etc/mixins/font-icon.scss:1
[WRN] Use @import instead
[LOG] Fashion waiting for changes...

コンソールへの入力は受け付けなくなりますが、Ctrl+C で処理を止めることができます。

ブラウザで確認

お好きなブラウザを起動し、以下URLにアクセスしてみましょう。

http://localhost:1841

sampleアプリケーションがブラウザ上に表示されます。

コードを編集

少しsampleアプリケーションのコードを修正してみましょう。

C:\sample\classic\src\view\main\Main.js
Ext.define('sample.view.main.Main', {
    ：
    ：省略
    ：
    items: [{
        ：
        ：省略
        ：
        ,{
            title: 'サンプル',
            iconCls: 'fa-cog',
            bind: {
                html: 'サンプルです'
            }
        }
    }]
});

ファイルを保存し、ブラウザを再読み込みさせてみましょう。
Sencha Cmdが起動中であれば、コードの変更が即座に反映されることが確認できたかと思います。

おわりに

　このように、簡単なアプリケーションであればHTMLを一切書かずしてブラウザ上で実行できるアプリケーションが作成できてしまいます。
　また、公式ドキュメントによると、サーバーと通信を行うコンポーネントも用意されているので、サーバー側のソースとフロントエンド側のソースを完全に分離できたり、GUIに至っては、既に相当数のコンポーネントがあるので、新たにコンポーネントを作らなくても既存コンポーネントを組み合わせるだけでも、短時間で相当高度なアプリケーションも作れます。
さらに、各ブラウザへの対応もSencha Cmdに任せておけば、ある程度カバーできてしまいます。

　フロントエンドのアプリケーションをツール一つで完結できてしまう夢のようなフレームワークですが、商用ベースで採用するには少々お高いことや、情報量の絶対数が少ないため学習コストかかってしまうことがデメリットと言えます。
しかしこの辺りは今後、利用者が増えてくれば自ずと解決する部分と思われます。

Webフロントエンドの開発を加速し、共に幸せになりましょう。

私は既に … 幸せです