Ext JS ClassicとModern ツールキットの違いを理解する

Ext JSは、強力なWebアプリケーション／モバイルアプリケーションを構築するためのJavaScriptフレームワークです。フレームワークには、140を超える高性能でフルテスト済のカスタマイズ可能な UIウィジェット／コンポーネントが搭載されています。さらに、すべての最新ブラウザに対応し、クロスプラットフォーム開発をサポートしています。Ext JSは、アプリを構築するための2つのツールキット（Classic ToolkitとModern Toolkit）を提供しています。それぞれのツールキットは、異なるユースケースに対応するように設計されており、独自の機能と利点を提供します。

ClassicツールキットとModernツールキットに関するよくある誤解は、Modernの方が先進的で、Classicツールキットは古いというものです。その結果、多くの開発者がプロ​​ジェクトに Modernツールキットを選択していますが、実際にはClassicツールキットを使用するべきであったというケースも多々あります。

この記事では、ClassicツールキットとModernツールキットの違いについて説明し、開発者がどのような状況でそれぞれのツールキットを選択すべきかについても解説します。

Ext JS Classicツールキットとは

Classicツールキットは、Ext JSフレームワークに当初から導入されていた、デスクトップアプリケーション／ブラウザ向けに設計されたツールキットです。堅牢なJavaScriptをベースに構築され、成熟し、定評のある、非常に安定したツールキットです。Classicツールキットは、その堅牢性と豊富な機能によって認知されています。

Classicツールキットの主な機能は以下のとおりです。

安定性

Classicツールキットは、堅牢なJavaScripをベースに構築され、非常に安定し、定評あるツールキットです。さらにSenchaでは、その安定性をより確実にするために、長年にわたってExt JS Classicの新バージョンや改良バージョンのリリースを定期的に実施してきました。

こうした安定性によって、Ext JS Classicで構築されたアプリケーションは、長期間にわたって確実に動作させることができます。

そして最近、ClassicツールキットとModernツールキットの両方でさまざまな改善と機能強化が行われたExt JS 7.8をリリースしています。このExt JSバージョンには、Classicツールキットで利用できるFroala Editor互換性サポートも含まれます。

豊富なドキュメント

Senchaは、Classicツールキット向けの包括的なドキュメントを提供しています。詳細ガイド、サンプル、APIリファレンスなどが含まれ、開発者はSencha Ext JSフレームワークの機能を、すぐに理解して活用できるようになります。

広範なブラウザ互換性

Ext JS Classicの際立った特徴の1つは、さまざまなブラウザ間での幅広い互換性です。これには、古いバージョンも含まれます。つまり、Classicツールキットを使用すれば、新しいWeb機能の一部をサポートしていないレガシーブラウザに対してでも、高機能なアプリを作成できるのです。

そのため、Classicツールキットは、さまざまなクライアント環境をサポートする必要があるプロジェクトに最適です。

豊富なコンポーネントセット

Classic ツールキットは、包括的な UI コンポーネントセットをサポートしています。これには、高度なデータグリッド、ツリー、ピボットグリッド、フォーム、グラフなどが含まれます。これらのコンポーネントはより安定しており、従来のUXを提供するため、一貫したデスクトップ エクスペリエンスを提供できます。

言い換えれば、Ext JS Classicは、Modernツールキットよりも、数多くのコンポーネントとより広範な機能を提供するのです。

Classic ツールキットの機能豊富なコンポーネントは、複雑なインターフェイスの構築に適しています。

Classicツールキットを使用する開発者は、JavaScriptと直接やり取りすることで、コンポーネントの操作やカスタマイズが可能になります。こうしたアプローチにより、開発者は、アプリの動作と外観を細かく制御でき、複雑で具体的な要件に対応できます。

考慮すべき事項

Classicツールキットは強力な機能と包括的なコンポーネントセットを提供しますが、HTML5やCSS3などといった最新のWebテクノロジーを最大限活用できない恐れがあります。そのため、最新のブラウザ向けの最新Webアプリを作成する場合、パフォーマンスが最適化されない可能性があります。

Ext JS Modernツールキットとは

Ext JS Modern は、Ext JSフレームワークの新しいツールキットで、デスクトップとモバイル（タッチデバイス）アプリの双方のニーズに対応するように設計されており、より軽量かつ応答性の高いフレームワークを提供します。

Modernツールキットは、タッチ操作と最新のWeb標準に最適化されており、パフォーマンスと、すっきりとしたミニマルデザインを重視しています。

Modernツールキットの主な機能は以下のとおりです。

最新のWebテクノロジー

Ext JS Modernは、HTML5やCSS3などの最新のWeb標準を最大限に活用し、最新ブラウザを強力にサポートします。これにより、視覚的に魅力的な、より豊かなインタラクティブ性を備えた高機能ユーザーインターフェイスを作成できます。

レスポンシブデザイン

Modernツールキットのコア機能の1つは、レスポンシブ デザインです。つまり、このツールキットで作成したUIは、さまざまな画面サイズや向きに合わせて調整されます。

Modernツールキットを使用すれば、デスクトップ、タブレット、スマートフォンのいずれでも、最新のユーザー エクスペリエンスを提供することができるのです。

タッチに最適化されたインターフェイス

Modernツールキットは、タッチ操作に高度に最適化されたさまざまなコンポーネントとレスポンシブ レイアウトを提供します。これには、ドラッグ、ピンチ、スワイプ、ジェスチャのサポートなどが含まれます。

この機能により、タッチ対応デバイスでも適切に機能する必要があるアプリの構築には、Modernツールキットが最適な選択肢となります。

考慮すべき事項

• 学習曲線が急：最新のJavaScriptフレームワークを習熟していない開発者にとって、Ext JS Modernの学習は少し難しいかもしれません。ツールキットの機能を十分に活用するために、しばしば新しいJavaScript機能に関する専門知識が必要になることがあります。
• 進化する機能：Ext JS Modernは、モダンでレスポンシブなアプリを構築するための堅牢なフレームワークを提供しますが、その機能はまだまだ進化しています。Classicツールキットほど成熟しておらず、安定していません。そのため、Modernツールキットに不具合が発生する場合があり、フレームワークの安定性を得るためには、アップデートが必要となります。

プロジェクトにどのツールキットを選択すべきか?

どの Ext JSツールキットがプロジェクトに適しているかは、特定のプロジェクト要件によって変わってきます。ここでは、ClassicツールキットとModernツールキットの双方について、選択の基準を解説します。

Classicツールキットの選択基準

古いブラウザのサポート

プロジェクトで、古いバージョンを含む幅広いデスクトップブラウザでの実行をサポートする必要がある場合は、Classicツールキットが適しています。このツールキットは、多くのレガシーブラウザと互換性が提供されます。そのため、さまざまな環境でアプリが確実に動作することを保証できます。

安定性と成熟

安定性が最も重要となるプロジェクトの場合、Classicツールキットの長い歴史と実績は信頼のおける選択肢となります。また、豊富なドキュメントと確立されたコミュニティサポートにより、開発プロセスも容易になります。

データ集約型アプリ

アプリでデータ集約型機能、例えば、グリッドやグラフ、複雑なUI、複雑なデータ操作、広範なカスタマイズ オプションなどを必要とする場合は、Classicツールキットが適切な選択です。例えば、Classicグリッドコンポーネントでは、グループ化、要約、フィルタリング、ドラッグ＆ドロップなどの複雑な機能をサポートしています。

アクセシビリティ（ARIAサポート）

プロジェクトでアクセシビリティに重点を置く必要がある場合は、Classic ツールキットが適切な選択肢です。このツールキットには、ARIA（Accessible Rich Internet Applications）サポートが組み込まれています。これは、障害を持つユーザーがアプリにアクセスできるようにする際に非常に重要です。Modernツールキットは、今のところARIAをサポートしていません。

Modernツールキットの選択基準

最新のWebテクノロジーを使用したプロジェクト

以下のケースでは、Modernツールキットが適切な選択肢となります。

• HTML5やCSS3などの最新のWebテクノロジーを活用した最新ブラウザでアプリを実行する必要がある場合
• よりダイナミックで視覚的に魅力的なユーザーインターフェイスの作成を指向する場合

このツールキットは、特に最新のブラウザやデバイスにおいて、より優れたパフォーマンスとより豊かなユーザーエクスペリエンスを実現します。

複数のデバイスやプラットフォーム

プロジェクトをさまざまなデバイスやプラットフォーム、特にモバイルデバイスやタッチデバイスでの実行を必要とする場合には、Modernツールキットを選択します。そのコンポーネントとレイアウトシステムは、レスポンシブでタッチ操作に最適化された設計が施されています。

考慮すべきその他の要素

モバイルとデスクトップブラウザの双方に対応したアプリ

モバイルブラウザとデスクトップブラウザの双方、あるいは最新のブラウザと古いブラウザの双方に対応したWebアプリを作成する必要がある場合には、両方のツールキットを活用するという選択肢もあります。例えば、ツールキットごとに個別のビューを構築したり、Ext JSの機能を活用してデバイスの種類を検出し、適切なビューを読み込むことも可能です。

プロジェクトのタイムラインとチームの専門性

短期間でプロジェクトを完了する必要があり、チームが最新のWebテクノロジーに精通していない場合は、Classicツールキットの使用が適切な選択肢となり得ます。

HTML 5やCSS3などの最新Web テクノロジーに精通していない開発者にとって、Modernツールキットの学習曲線は急になる恐れがあります。

Ext JS ClassicとModernツールキットを切り替えるには

• 新規Ext JSアプリケーションを最初から作成し、コンポーネントを少しずつ移行させます。Sencha Cmdを使用して、新しいアプリケーションフレームワークをスキャフォールディングします。
• 新しいツールキットに必要なすべての依存関係がインストールされていることを確認します。
• 既存のアプリのコンポーネントを分析します。どのコンポーネントが新しいツールキットのどれに直接対応するか、どのコンポーネントに大きな変更が必要かを評価します。
• コンポーネントを一度にすべて移行するのではなく、1 つずつ移行していきます。レイアウトやコンテナなどの基本的なコンポーネントから始め、グリッドやフォームなどのより複雑なコンポーネントに徐々に移行します。
• ツールキット間での名前の競合や API規則の差異に注意します。これには、メソッド名、プロパティ名、イベント名などが含まれます。コンポーネントの命名については、Ext JSドキュメント を参照してください。
• 移行時に各コンポーネントを徹底的にテストし、新しい環境で正しく動作することを確認します。
• 移行中に問題が発生した場合は、いつでもSenchaサポートに問い合わせ、専門スタッフのサポートを受けることができます。

まとめ

Ext JSは、Web アプリケーション開発のために、ClassicとModernという 2 つの主要なツールキットを提供しています。これらのツールキットも、それぞれ異なるタイプのプロジェクトやユースケース向けに設計されています。Classicツールキットは、広範かつ堅牢なコンポーネントセットを提供し、古いブラウザでの実行が必要な場合も含め、デスクトップアプリの構築において広く利用されています。

Modernツールキットは、さまざまなデバイスやプラットフォーム、特にモバイルデバイスやタッチデバイスでシームレスに動作することが求められるアプリケーションに最適です。

ぜひ、Ext JSを使用して堅牢なアプリの構築をスタートしてください。

FAQ

Ext JSは何に使用されていますか?

Ext JSは、強力なモバイルおよびデスクトップWebアプリの構築に使用されます。140を超えるUIコンポーネントを提供し、MVCアーキテクチャとMVVMアーキテクチャの両方をサポートしています。また、Senchaプラットフォームで提供される追加のツールを使用して、Ext JSアプリケーションを簡単に構築することもできます。これには次のものが含まれます。

• Sencha Architect
• Sencha Cmd
• Sencha Test
• Sencha Touch

Ext JS ClassicツールキットとModernツールキットの違いは何ですか?

Classicツールキットは、主にデスクトップブラウザ向けに設計された定評のあるツールキットです。Modernツールキットは、応答性とパフォーマンスを考慮し、タッチデバイスを含むさまざまなプラットフォームやデバイスで動作するように設計されています。