先進的なWebサイトを構築するなら、UIコンポーネントを作り、使いこなす必要があります。欲しい機能がカレンダーでも、スライダー、グラフ、そのほかのユーザーインタラクションの向上や単純化に役立つどのような機能でも、選択肢は自分で作成するか既存の機能を有効活用するかのどちらかです。
コンポーネントを自分で開発すると手間がかかり、複雑な作業になりがちです。本当に画期的な取り組みでないかぎり、有益な時間の使い方とは言えません。こうした場面ではUIライブラリーやフレームワークが活躍します。ライブラリーは一般的なUIコンポーネントを作成する作業を簡単にしてくれます。既存のフレームワークを有効活用すれば、用途に合わせたカスタマイズができます。
特に広く使われているフレームワークがjQuery UIです。jQuery UIは、jQueryをベースに開発されたウィジェット、エフェクト、テーマの拡張セットを、独自のコンポーネントセットとして分離したものです。jQuery UIのすべての部品を単一バンドルでダウンロードすることも、必要なコンポーネントと機能だけを選択することもできます。jQuery UIのようなコレクションを使うことで、作成するコンポーネントの見た目に一貫性を持たせられ、またコンポーネントを効率良く開発できるようになります。
jQuery UIはとても便利で頼りになりますが、ほかのフレームワークにも完成度の高いコントロールが備わっています。本記事ではこうしたフレームワークの分析や比較をしていきます。
Kendo UI
有償のフレームワークです。
Kendo UIは開発速度の向上に役立つ70種類以上のコンポーネントを提供しています。コンポーネントはレスポンシブで、テーマを適用でき、動作が軽く、カスタマイズ性に優れています。
Kendo UIには優れたインタラクティブ要素の作成に役立つ、さまざまな特長があります。
第1に、Kendo UIのコンポーネントは軽快な動作を実現するために、Telerikが一から作り上げたものです。ほかのフレームワークとは異なり、Kendo UIのウィジェットは素のJavaScriptから作られているためjQueryを必要としません。モバイルデバイスでも快適に動作し、安定しています。
第2に、モバイルデバイスでの使用がKendo UIのもう1つの魅力です。モバイルデバイスで使うことを念頭に置いた設計によって、利用環境に最適化したレスポンシブなレイアウトを提供しています。ほとんどのウィジェットがモバイルデバイスに合わせてコントロールを調節、変更してくれます。すばらしい機能です。下の図のスライダーコンポーネントは画面サイズに合わせて自動で設定を調節してくれます。
実装の観点からも、コントロールは考え抜かれています。開発者はJavaScript内でコントロールをセットアップすることも、サーバーサイドで設定することもできます（例：PHP経由の出力）。Web以外でも、アプリでコントロールを使いたい人のために、AndroidやiOS用にフレームワークを派生させたものが用意されています。
第3の興味深い点が、Angular JSとの統合コンポーネントです。Angularのプロジェクトに最適になるようにUI要素を一から作り上げた、完成度の高いシステムです。Angularの使用に関心があるなら、Kendo UIがこうした機能を備えていることを知っておいて損はありません。Kendo UIのサポートがあれば開発は大きく前進します。
注意すべき点は、Kendo UIは無料のフレームワークではないということです。Kendo UIは商用のライブラリーで、価格は必要なライセンスにもよりますが最大で数千ドルかかります。この価格のために開発者は尻込みしてしまうかもしれませんが、クオリティとサポートは支払う金額に値するものです。
Webix
無償または有償のフレームワークです。
Webixを使えば一般的なUI要素を素早く、簡単に作成できます。Webixにはデータビジュアライゼーション、レイアウト、ナビゲーション、コントロール編集といったさまざまな機能があります。コンポーネントの一部（カレンダー、アコーディオン、ダイアログなど）はjQuery UIと同じですが、WebixにはjQuery UIを拡張、発展させた機能が数多く備わっています。
ドキュメントは感動的です。すべてのコントロールにAPIリファレンスガイドが付属していて、ガイドにはコントロールのすべてのメソッド、プロパティ、イベントについての説明があります。さらに、ほどんどのコントロールに複数のサンプルへのリンクがあり、コントロールの機能が的確に分かるようになっています。分かりやすいドキュメントを読めることは本当に大切なので、Webixが時間をかけてドキュメントを作っているのはすばらしいことです。
もう1つ注目に値するのが、Webixはブログでコンテンツを頻繁に配信しており、UIコンポーネントのアクセシビリティーに関することなど、さまざまな投稿を通じて有益なアドバイスや実用的な例を提供している点です。数多くのフレームワークがある今日では、最新のコンテンツを提供してくれるフレームワークを見つけるのは簡単ではありません。
Webixは無償版と有償版の両方があります。無償版はWebixの導入と使用に必要な機能の大半を備えており、図、リスト、ツリー、カレンダーなど一般的な要素を利用できます。
有償版は、追加のコントロール（複数選択や範囲指定ができる日付けピッカーなど）に加え、サポートとアシストを受けられます。
さらに有償版ではスケジューラーなどの高機能なソリューションを利用できます。
有料の高機能なウィジェットを使うことで、コンポーネントを自分で作成する手間がなくなり、機能とスタイルのカスタマイズに集中できます。
まとめると、無償版のウィジェットは堅実で、かなりの機能を利用できます。優れたコントロールをこれだけ無料で利用できることを考えれば、サービスの一部が有償コンポーネントであることは理解できますし、適切だと思います。利用者に必要なのは、Widgetのドキュメントに目を通して追加のコントロールや機能が価格に見合ったものか判断することです。
ドキュメントの充実した、基本的に無償のソリューションでユーザーインターフェイスを作成したいなら、Webixが最適です。
JQwidgets
条件付きで無償、または有償のフレームワークです。
JQWidgetsはjQueryを使ったフレームワークでWebサイト向けのレスポンシブ、高速、堅牢なコンポーネントを作成できます。JQWidgetsのコンポーネントは、jQueryの機能を強化してインタラクティブかつダイナミックな、カスタマイズ性に優れたウィジェットの提供を目的として作られました。
新たにフレームワークを学ぶときは、開発者に連絡をとって動作の仕組みを質問できれば理想的です。JQWidgetsは気軽に利用できるフォーラムを提供しています。JQWidgetsはこのフォーラムを頻繁にチェックしているようです。フォーラムのほかに開発者のブログ（記事、リリースノート、その他全般を扱っています）もあります。ブログは最近更新されたばかりです。
ドキュメントはどのフレームワークでも中心的な存在で、JQWidgetsでも例外ではありません。JQWidgetsのドキュメントにはそれぞれのウィジェットについての動作説明があり、説明の最後にはサンプルコードと親切なデモが付いています。これはポップオーバーウィジェットのドキュメントです。さらに、各ウィジェットについてシンプルで分かりやすいAPIリファレンスガイドと、それぞれのプロパティやメソッドの実装方法の例が記載されています。
また、JQWidgetsはReact、Angular、さらにASP .NETコンポーネントもサポートしています。この3つのうちのどれかを使うつもりなら、JQWidgetsを利用することで多くの時間を節約できるかもしれません。
JQWidgetsがこうした一般的なフレームワークをサポートしているのはすばらしいことです。JQWidgetsを単独で利用しても良いですし、Angularなどと組み合わせた利用もできます。まさにWin-Winの関係です。
JQWidgetsは条件付き無償、有償の両方で利用できます。非商用利用はできますが、商用利用する場合（多くの人がそうだと思います）はライセンスを購入しなければなりません。
価格はサポートと企業の規模によって異なります。単独で開発しているなら低価格のオプションを利用できます。一方、企業として利用する場合はより高価格なライセンスが必要になります。要するに、より多く払えばよりハイレベルなサポートを受けられるということです。どのオプションが適切かは状況次第です。
EasyUI
条件付きで無償、または有償のフレームワークです。
EasyUIはjQueryのウィジェットを拡張した機能が集まったものです。EasyUIで作ったインタラクティブ要素を使って、先進的でレスポンシブなWebサイトやWebアプリを構築できます。EasyUIは一般的なUI要素をHTMLマークアップから直接作成できますが、JavaScriptによる作成もできます。
EasyUIのデザインはこれまでに見たほかのUIフレームワークと違って見えるかもしれません。デザインの一部が少し古い感じがします。まるで2010年頃に設計されたかのようです。
デフォルトのスタイルは退屈に感じるかもしれませんが、EasyUIには優れたライブ・テーマエディターが備わっており、フォントサイズや文字の色、背景色、位置、そのほかのほとんどの一般的なプロパティを調節できます。さらにCSSに直接アクセスできるので、いろいろと試しながら好みのテーマを作れます。
下の図は「マテリアルデザイン」テーマを使った様子です。
EasyUIのドキュメントはシンプルで直観的です。コントロールはすべて左側に配置され、関連する情報が右側に書かれています。各コントロールにはスクリーンショットやサンプルコードが付属しているほか、すべてのプロパティ、メソッド、イベントの説明もあります。不満があるとすれば、変更をリアルタイムで確認できるデモがないことです。
デモのメインページには各コントロールのデモが見れるクイックリンクがあります。たとえばパネルコントロールのデモではカスタムコントロールや入れ子になったパネルなどの見た目を確認できます。
jQuery EasyUIは非商用目的で使う場合は無料ですが、開発者として使うならライセンスが必要です。価格は問い合わせページにあるように比較的リーズナブルです（ほかのフレームワークの高めの価格帯と比べて）。このライブラリーは最初の一歩を踏み出すには最適です。さらに、活気のあるフォーラムや各種拡張機能など、よりハイエンドなサービスや充実したサポートも用意されています。
まとめると、EasyUIは堅実なフレームワークで、見た目が少し古い（Webサイトとドキュメントの両方とも）ことを除けば、jQuery UIの代わりに使う最初のフレームワークとして確実な選択肢です。
Wijmo
有償のフレームワークです。
WijmoはTypeScriptで書かれたカスタムJavaScriptコントロール群で、高速、レスポンシブで拡張性のあるUIコントロールを作成できます。Wijmoは幅広い種類のコントロールを提供し、React、Angular、VueなどさまざまなJavaScriptフレームワークをサポートしています。
Wijmoはさまざまなコントロールをサポートしていますが、大部分はデータビジュアライゼーションと、グラフ、メーター、入力コントロール、表といったインプットに関するものです。ほかのフレームワークはダイアログやレイアウトなど基本的なコントロールを一通り提供していますが、Wijmoは「データ」に注力しているようです。
興味深いのは、Wijmoは最新バージョンであるWijmo 5と、レガシーバージョンであるWijmo 3の両方をサポートしている点です。Wijmo 5は最新の標準に基づいて作られているためIE8では動作しません。このようなときにレガシーバージョンが役立ちます。Wijmo 3はjQueryをベースにしており、IE6までサポートしています。古いフレームワークが今でもサポートされていて、万が一必要になっても選択肢は残されていることを知っておいて損はありません。
WijmoのドキュメントとWebサイトの構造は分かりにくいです。すべてのコントロールがドキュメントのページに一覧表示されていますが、あまり親切でなく魅力的にも見えません。たとえば、グラフモジュールについてより詳しく知りたい場合は、このページ にたどり着くはずです。ドキュメントにはクラスとインターフェイスについての詳細な情報はありますが、画像やコードサンプル、解説、デモによる具体的なコントロールの実装についての説明はありません。
Webサイトには「エクスプローラー」セクションがあり、コントロールの見た目を確認できるほか、設定の調節もできるようになっています。これはおもしろいツールですし、見た目や操作感を確かめるのにも便利です。
下の図はFlexdchartコンポーネントを使った線グラフの例です。
ほかのフレームワークでは各コンポーネントに専用ページを設けたり、複数のサブページに分けて技術コンポーネント、例、解説を載せたりしてより良い形でドキュメントを提供しています。
ドキュメントがしっかりしていることは、新たなフレームワークを導入する際にとても重要な要素です。Wijmoでは、グラフモジュールの動作を（そしてコードサンプルも）確認するためにデモページに戻ってFlexchartのデモを見なければなりません。もう1つの注目すべき点がブログ（最近更新されたばかり）です。役立つコツ、システムの特集、さまざまなアイデアなどを配信しているようです。追加情報として有益です。
まとまりのないWebサイトはさておき、コントロールは興味深いものです。それぞれのコントロールは表示方法を調整可能で、独自の機能へのコールバックを提供し、用途に合わせたスタイルを作れます。
Wijmoには無料試用期間が用意されています（Kendoと似ています）が、商用利用する場合はライセンスが必要です。購入ページにプランの説明があります。価格は必要なものによって変わります。Wijmo 5だけ必要なら単体で購入できますが、.NET / Xamarin用のコントロールが必要ならハイエンドな企業向けライセンスが必要です。
Wijmoは主にデータビジュアライゼーションに機能を絞っているため、HighChartsなどのライブラリーとも比較できます。HighChartsはもっとも優れたグラフ描画ライブラリーの1つです。
jQuery UIの代わりに使えるフレームワーク
まとめると、jQuery UIの代わりに使えたりjQueryの機能を補えたりするすばらしいフレームワークがたくさんあります。これまで見てきたように、こうしたフレームワークの大半は有償ですが納得できるものです。
結局のところ、解決策は2つあります。コミュニティが魅力のjQuery UIのようなオープンソースの取り組みを利用するか、支払った金額に見合った対価を受け取れる企業のサービスを購入するかです。
すでにフレームワークを使っていて、一から作り上げる手間を省くことで効果を上げているなら理想的です。なにか欲しい機能やコントロールが必要な場合は、既存のフレームワーク（今回見てきたようなもの）の価格で手に入れられるものに見合っているか、あるいは同じ性能のものを作るために時間と労力を費やす価値があるか、検討が必要です。
高品質なライブラリーはほかにもあります。Alternative ToというWebサイトはさまざまなソリューションをまとめてあるので、良いユーザーインターフェイスを作りたいと思ったときにはいろいろと試せます。
※本記事はDominic Myersが査読を担当しています。最高のコンテンツに仕上げるために尽力してくれたSitePointの査読担当者のみなさんに感謝します。
（原文：Top 5 jQuery UI Alternatives）
［翻訳：薮田佳佑／編集：Livit］
