フロントエンド技術を学ぼう 3-19.UIウィジェット＆コンポーネントツールキット

Front-end Developer Handbook 2017を教科書にフロントエンド周りの技術を習得する連載。

第71回は Part III: Front-End Dev Toolsから、19項のUI Widget & Component Toolkitsを紹介します。

UIウィジェット＆コンポーネントツールキットの説明です。

UIウィジェット＆コンポーネントツールキット

ウェブプラットフォーム

• Bootstrap 3 or Bootstrap 4
• Kendo UI for jQuery [無料～有料]
• Materialize
• Office UI Fabric
• Semantic UI
• UiKit
• Webix [$]

アドバイス

UIのウィジェット/コンポーネントの基本セットが必要な場合は、Semantic UIから始めましょう。グリッド、スプレッドシート、またはピボットグリッドが必要なものを構築する場合は、Kendo UIまたはWebixを参照する必要があります。また、これらのソリューションのほとんどは依然としてjQueryが必要です。

特定のWebプラットフォーム

• Ant Design
• Material ui
• react-semantic-ui

アドバイス

私がReactアプリケーションを構築しようとしていて、ウィジェット/コンポーネントのツールキットが必要な場合は、react-semantic-uiやAnt Designを使用します。もしくは、使用したいと思うコンポーネントのいくつかはjQueryに強く依存してる事実を受け入れるようにします。

Webプラットフォームを使用したデスクトップ/ラップトップ/ネットブックのネイティブアプリケーション (NW.jsとElectronを使用する場合など)

• Photon
• React UI Components for OS X El Capitan and Windows 10

特定のWebプラットフォーム上のモバイル/タブレットアプリケーション (タッチ中心のUIなど)

• Framework7
• Kendo UI Mobile
• Ratchet