Upgrade AdviserでExt JSアプリのアップグレードを効率化

Ext JSを用いて構築された大規模アプリケーションのアップグレードは、開発チームにとって大きな課題となり得ます。この記事では、Ext JSアプリケーションを最新の状態に維持していくべき理由、アップグレードプロセスにおける一般的な障害、そしてリスクを最小限に抑え、貴重な開発時間を節約するための重要なツール「Ext JS Upgrade Adviser」について解説します。

Ext JSのアップグレードの必要性

Ext JSの古いバージョンをメンテナンス稼働させている開発者の多くは、アプリケーションがまだ「問題なく動作している」ため、アップグレードの必要性を疑問視しているかもしれません。しかし、アップグレードを怠ることで、いくつかの深刻なリスクが発生する可能性があるのです。

1. セキュリティとサポート

Ext JSの古いバージョンは、セキュリティパッチや公式サポートが提供されません。これは、アプリケーションが脆弱性にさらされる可能性にあり、機密データや顧客データを扱う際に大きな懸念事項があるということです。

2. ブラウザの互換性

Chrome、Edge、Safariなど、最新のブラウザは急速に進化しています。レガシーな Ext JS コードは、新しいブラウザではサポートされなくなったり、安全ではないと判断されたりする古い機能に依存している可能性があります。Ext JSフレームワークをアップグレードすれば、長期的な互換性を確保できます。 さらに、今日のブラウザのほとんどはChromiumをベースにしており、ECMAScript 6（ES6）標準に厳密に準拠しています。古い構文で動作しているアプリケーションは、Chromiumのアップデート時に動作しなくなり、予期せぬ障害を引き起こす可能性があります。

3. パフォーマンスの向上

Ext JS の各メジャーリリースでは、パフォーマンスの最適化（レンダリングの高速化、メモリ効率の向上、グリッドやチャートのパフォーマンス強化など）が加えられています。アップグレードを行わないでいると、開発者はこれらの重要な改善を取り入れることなく、見逃してしまうのです。

4. 新機能とツール

新しいバージョンには、高度なツール、更新されたコンポーネント、そして改善されたアクセシビリティなどの新機能が搭載されています。例えば、Sencha Architectは最新バージョンでその動作が高速化され、Microsoft Visual Studio Codeに統合されるRapid Ext JSなど、最新の開発環境によって、より優れたWYSIWYG機能を提供します。

5. 生産性と将来性

非推奨のAPIや古いツールの使用は開発のスピードを低下させ、バグ発生のリスクを高めます。チームがアップグレードを先延ばしにすればするほど、最終的なプロセスはより困難で複雑になります。定期的なアップデートは、アプリケーションのセキュリティと互換性を維持し、将来のフレームワークの機能強化にも対応できるようにします。

Ext JS アップグレードにおける主要な課題

このようなメリットがあるにもかかわらず、アップグレード作業は次のような困難に直面し、先延ばしされることがよくあります。

• 非推奨のAPIと重大な変更
  アップグレードでは、存在しなくなったり変更されたメソッド、コンフィグ、イベント（例えば、Ext.grid.Panelのアップデート）を特定し、置き換えることが必要です。互換性を損なう変更に対しては、多くの場合、構文の調整、リファクタリング、クラス名の変更などが必要となります。
• アーキテクチャの変化
  これまでのメジャーバージョンアップで、いくつかの構造的な変更が加えられています。例えば、Ext JS 5では、MVCを補完するMVVMアーキテクチャが導入され、Ext JS 6ではデスクトップ用のClassic、モバイル用のModernの2つのツールキットが導入されました。
• 複数のバージョンジャンプ
  非常に古いバージョンで実行されているアプリケーションは、一度い最新バージョンへアップグレードすることができず、段階的にバージョン間をアップグレードしていく必要がある場合があり、より複雑になります。
• ツールキットの移行
  モバイルレスポンシブ対応のためにClassicツールキットからModernツールキットに移行するのは、プラグアンドプレイで済むことはほとんどありません。多くの場合、レイアウトの再設計、テーマの調整、レスポンシブな動作の改良が必要になります。
• テストと検証
  数千ものコンポーネントを使用している大規模なExt JSアプリケーションでは、フレームワークの小さな変更でさえも広範囲にわたる影響を及ぼす可能性があります。手動テストのみに頼ると、数週間かかることになり、導入が遅れる場合があります。

Ext JS Upgrade Adviser

Ext JS Upgrade Adviserは、こうしたアップグレードの課題に直接対処します。Ext JSライセンスをお持ちのすべてのお客様に無料で提供され、アプリケーションの旧バージョン（4、5、6 など）から最新リリースへの移行を支援します。 主な機能は、アプリケーションのコードベースをスキャンし、非推奨または削除されたAPI、メソッド、コンフィグを特定することです。その後、実用的なアップグレードの推奨事項を含む詳細レポートを生成し、時間、労力、リスクを大幅に削減します。

Upgrade Adviserの主な機能

現時点で完全なアップグレード作業を行わない場合でも、Upgrade Adviserはリンティングツールのように機能し、プロジェクト内の古いコードセグメントやエラーのあるコードセグメントを識別するのに役立てることができます。

ステップバイステップのアップグレードプロセス

Upgrade AdviserとSencha Commandを用いて、Ext JSアプリケーションをアップグレードする場合の推奨されるアプローチは、以下の通りです。

準備

1. アプリケーションのクリーンアップ – 古いExt JSコードベースにエラーがないことを確認します。 2. プロジェクトのバックアップ – Senchaアプリのアップグレードを実行する前、あるいはツールによるソースファイルの変更を許可する前に、必ず完全なバックアップを作成しておきます。

分析と修正（Upgrade Adviserの使用）

3. Upgrade Adviserによるスキャンを実行 – Upgrade Adviserでプロジェクトフォルダーを開き、ClassicまたはModernを選択、現在のバージョン (例: 5.0.0) とターゲットバージョン (例: 7.9) を指定。[Analyze] をクリックします。
4. レポートの確認 – Upgrade Adviserが、警告またはエラーとして分類された非推奨のAPIについて、ファイルの場所と推奨される修正 (非推奨のautoScrollコンフィグをscrollableに置き換えるなど) とともにリストします。
5. 修正の適用 – 開発者は、特定された問題を手動で修正するか、Upgrade Adviserによって特定の項目を自動修正させるかを選択できます。自動修正後、分析を再実行して問題リストがクリアされていることを確認します。ヒント: sencha app upgrade を実行する前または実行後にアドバイザーを実行できます。ワークフローに応じて、両方のシーケンスが機能します。

最終アップグレードとテスト（Sencha Commandの使用）

6. アップグレードの実行 –ターミナルまたは PowerShell でプロジェクトフォルダに移動し、以下のコマンドを実行します。

sencha app upgrade –full /path/to/new/sdk

7. アプリケーションのリビルド – 以下のコマンドを使用して、クリーンアップとリビルドを実行します。

sencha app cleanapp upgrade
sencha app build development

安定したバージョンが作成できたら、以下のコマンドを使用してプロダクションバージョンをビルドします。

sencha app build production

8. フルテスト – 以下のコマンドを実行し、ローカルテストサーバーを起動します。

sencha app watch

アプリケーションが最新の Ext JS バージョンで正しく機能することを確認します。

アップグレード後の新機能のロック解除

アプリケーションが最新バージョンで実行できるようになれば、開発者は次のような新バージョンで提供される機能を活用できるようになります。

• app.jsonの最新テーマ（例: Neptune から Triton または Material への切り替え）
• Sencha Kitchen Sinkサンプルにあるような新たに利用可能になったフレームワークコンポーネント、最適化されたグリッド、チャート、D3アダプターなど

Ext JS Upgrade Adviserを用いてアプリケーションをアップグレードすれば、これまで複雑で時間のかかるプロセスだったアップグレード作業が、合理化され、予測可能で、安全な最新化のプロセスへと変わります。