Latest Ext JS 7.8 is now available. Learn more

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

June 12, 2024 156 Views
Show

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

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

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

Ext JS Classicツールキットとは

Ext JS, a popular JavaScript framework, Classic toolkit

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 toolkit

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ツールキットは、応答性とパフォーマンスを考慮し、タッチデバイスを含むさまざまなプラットフォームやデバイスで動作するように設計されています。

Sencha CTA Banner - Try Sencha Ext JS

Recommended Articles

Ext JS 7.8リリース

このたび、Senchaチームは、Sencha Ext JS 7.8のリリースを発表しました。このリリースでは、7.7リリースに続き、Grid、Timefield、Chart、TreePanelなどユーザーの皆さんからの要望に応え、ModernおよびClassicツールキットに数多くの品質強化を行っています。また、Ext JS 7.8には、Classicツールキットの新機能Froalaに加え、CheckBox、Grid、DataViewの改善、Grid、Combo、CheckBox、Chart、Date Field、TreePanel、Storeなどに対する要望の多かった機能、双方のツールキットに対する品質改善が含まれます。

Virtual JS Days 2024のハイライト

2024年2月20日~22日、第3回目となる「Virtual JavaScript Days」が開催されました。JavaScript の幅広いトピックを採り上げた数多くのセッションを実施。その内容は、Senchaの最新製品、ReExt、Rapid Ext JSまで多岐にわたり、JavaScriptの最新のサンプルも含まれます。 このカンファレンスでは多くのトピックをカバーしています。Senchaでセールスエンジニアを務めるMarc Gusmano氏は、注目すべきセッションを主催しました。Marc は Sencha の最新製品「ReExt」について、詳細なプレゼンテーションを実施。その機能とメリットを、参加者に理解してもらうべく詳細に説明しました。 カンファレンスは、Senchaのジェネラルマネージャを務めるStephen Strake氏によるキーノートでスタートしました。キーノートでは、会社の将来のビジョンについての洞察を共有しています。世界中から JavaScript 開発者、エンジニア、愛好家が集まるとてもエキサイティングなイベントとなりました。これは、JavaScript エコシステムの最新情報について学ぶユニークな機会と言えます。

Ext JS 7.7リリース

このたび、Senchaチームは、Sencha Ext JS 7.7のリリースを発表しました。このリリースでは、7.6リリースに続き、Grid、Modern Sliderfieldなどユーザーの皆さんからの要望の多かった機能の強化に加え、双方のツールキットで、Grid、Chart、TreePanel、Timefield、ComboBox、Storeなどにフォーカスして品質改善を行っています。

Sencha 2023/2024 ロードマップアップデート

このブログ記事では、近い将来に計画しているSencha製品のリリースについての詳細を説明します。 Sencha チームでは、日々お客様と対話を続けており、皆さんのフィードバックが、製品全体の方向性の決定に大きな役割を果たしています。 ロードマップアップデートの詳細を説明する前に、Senchaの新しいサービスを含め、ここ数ヶ月で提供した内容についてまとめておきたいと思います。

JavaScript開発者必見のオンラインイベント「SenchaCon 2023」

常に最新のテクノロジー、ツール、トレンドを把握することの重要性を理解しているJavaScript開発者。そんなエンジニアを対象とした、オンラインイベント「SenchaCon 2023」が開催されます。 このカンファレンスでは、あらゆるレベルのJavaScript開発者が集い、スキルアップやナレッジを共有できる環境を提供します。SenchaCon 2023には、注目のスピーカーが登壇し、興味深いコンテンツをお届けします。まさに、必見のイベントです。 SenchaCon 2023は、米国中部標準の2023年4月12日9時(日本時間4月12日23時)に開催されます。

Sencha GRUIの新しいブランド・アイデンティティ「BestReactGrid」

Senchaでは、「Sencha GRUI」を「BestReactGrid」にリブランドし、Reactコミュニティに向け、React開発者のユーザーエクスペリエンスの向上を実現するスタンドアロンエンティティとして提供することを発表しました。この比類ない機能と特長により、BestReactGridは、世界中のReact開発者にとって絶好の選択肢となるものと期待されます。

View More