ReactのUIコンポーネントライブラリの一覧表(2017/5版)

はじめに

Reactでは様々なリッチなコンポーネントが使えます。Electronで使いたいので調べてみました。
どんなリッチコンポーネントが提供されているか調べるため、
「react best ui library」などで検索してまとめました。

この記事は、そんなライブラリのまとめです。サンプリングは厳密ではないので参考までに。
下の図は、いくつかのライブラリのデモからピックアップしたものです。

image.png

「react best ui library」でヒットしたページのまとめ

以下の5つのサイトで紹介されているものの表を作ってみました。

英語の記事
10 Best ReactJS UI Frameworks for rapid prototyping
What is the best UI component library for a React based web app.
19 Open Source React Component Libraries to use in your next project
Awesome React Components
日本語の記事
Qiita-早く・それなりの UI を実現する React コンポーネントセット 16 選

これらとそれ以外のコンポーネントはここにもまとめられています。
https://github.com/enaqx/awesome-react#components

比較表

①~⑤のカラムにはそれぞれのサイトでの紹介順が書いています。備考*マークのものだけコメントしています。

  • ④のサイトはいいものもすごく小さなものも紹介されていました。
  • GitHub公開されているものは、リリース回数を開発の頻度とみなしています。
  • v1.0を超えてないライブラリの、バージョン番号はリリースされまくっていても低いことがあり、
    あまり当てにならないようです。
  • ③のページは、19といいつつ20個紹介していました。。。
名前 作成元 ライセンス デモ/説明 最新バージョン 備考 コメント
Material UI 1 9 2 1 Google's Material Design MIT demo v0.18.1
React-Bootstrap 2 3 8 8 GitHub(129release) MIT demo 0.31.0 * Do I even need a description here? Bootstrap is, without a doubt, the most popular UI framework that is out there.
React-Foundation 3 14 GitHub(34release) MIT list 0.7.0
Essence 4 GitHub(0release) ? * HPリンク切れ? http://getessence.io/
React-MDL (Material Deisgn Lite) 5 5 10 Google GitHub(26release) Apache 2.0 demo 1.3.0
Belle 6 1 4 GitHub(0release) MIT demo
Elemental-UI 7 1 3 7 GitHub(44release) MIT demoはHPのタブから v0.6.1
MUI 8 16 5 GitHub(144release) MIT demo 0.9.16
grommet 9 8 6 6 HP-GitHub(41release) Apache 2.0 demo v1.4.0
React Toolbox 10 4 2 2 GitHub(68release) MIT demo 0.0.0-alpha.11
Ant Design 11 6 6 GitHub(116release) MIT demoはHPのcomponentsから 2.10.1 * Treeがある。Dan:Lisence is not clear to me
Semantic UI React 2 20 5 16 GitHub(237release) MIT demoはHPのElementsから 0.68.3 広告やSeach、Gridがある
Office Fabric 7 Microsoft-GitHub(317release) MIT demo 0.70.0 * RTL Support TypeScript
Pivotal UI 4 GitHub(93release) MIT demoは左のタブから v8.1.0
React Desktop 5 GitHub(21release) MIT demo 0.3.0 * コンポーネントは少ない
Rebass 7 3 GitHub(18release) MIT demo 0.3.4 * コンポーネントは少ない
React-PhotonKit 10 GitHub(?release) MIT demo v0.4.2 * 一通りはあるが他と比べて少ない。
react-widgets 11 GitHub(92release) MIT demoは左のタブから 3.4.2 * コンポーネントは少ない
TouchStoneJs 12 GitHub(0release) MIT demoなし * SmartPhoneの画像のみ、デモはなし
react-d3 13 GitHub(13release) MIT 画像あり v0.9.0 * グラフに特化
Onsen 15 ? ? demo * iOS Android用
SearchKit 17 ? ? ドキュメントにコンポーネントのリストあり 0.10.1 * 画面はきれい。ElasticSearchと連携できる模様
Mesosphere 18 GitHub(82release) Apache 2.0 v2.12.1 * コンポーネントは少ない
vistarmedia 19 ? ? リストはHPに延々とあり。
reactstrap 9 GitHub(84release) MIT demo 4.6.2 * 一通りはある。
material-design-react 11 DEPRECATED DEPRECATED
react-materialize 12 GitHub(9release) MIT 左のタブにコンポーネント一覧あり v0.18.2 * 11コンポーネントと一通りはある。
react-uikit-components 13 GitHub(0release) MIT 個人作成 * 9コンポーネント、個人作成
uikit-react 14 GitHub(30release) MIT demoなし v2.3.2 * コンポーネント数不明。Exampleも少ない
react-semantify 15 GitHub(26release) MIT v0.6.0 * 中の人がSemantic-UIを作り始めたとのこと。
React SketchApp 1 GitHub(21release) MIT readmeに画像あり v0.10.3 * レンダリングツール? currently in beta and APIs are subject to change.
React Flexbox Grid 3 GitHub(38release) MIT 1.1.3 * グリッドのみ? Grid List component
React PhotoSwipe 4 GitHub(10release) MIT v1.2.0 * 画像をSwipeするだけ?
React Waypoint 7 MIT v7.0.3 * Animetaion or capture Waypoints is the easiest way to trigger a function when you scroll to an element.

掲載順位(載っていないものは100点)でスコア付けすると、トップ10は以下のようになりました。
1. Material UI http://www.material-ui.com/
2. Elemental-UI http://elemental-ui.com/
3. React Toolbox http://react-toolbox.com/#/
4. React-Bootstrap https://react-bootstrap.github.io/
5. grommet https://grommet.github.io/
6. Semantic UI React http://react.semantic-ui.com/introduction
7. Belle http://nikgraf.github.io/belle/
8. React-MDL (Material Deisgn Lite) https://getmdl.io/
9. Ant Design http://beta.ant.design/docs/react/introduce
10. MUI https://www.muicss.com/

ライセンスについて

  • MITライセンスは、著作権表示および本許諾表示さえすればコピー、改変、商用利用等自由です。 Wikipediaを引用すると以下のようになっています。

特徴
要約すると、MIT Licenseとは次のようなライセンスである。
このソフトウェアを誰でも無償で無制限に扱って良い。ただし、著作権表示および本許諾表示をソフトウェアのすべての複製または重要な部分に記載しなければならない。
作者または著作権者は、ソフトウェアに関してなんら責任を負わない。

  • Apache 2ライセンスはWikipediaを引用すると以下のようになっています。

ライセンス条件
他のフリーソフトウェア向けライセンスと同様、Apache Licenseではユーザーがそのソフトウェアの使用や頒布、修正、派生版の頒布をすることを制限しない。
Apache Licenseは、頒布される二次的著作物が同じライセンスで提供されたり、フリーソフトウエア、オープンソースソフトウェアとして頒布されることを要求しない。要求するのは、ユーザーがそのソフトウェアにApache Licenseのコードが使われていることを知らせる文言を入れることだけである。従って、コピーレフトライセンスと異なり、Apache Licenseコードの二次創作物のユーザーには、フリーなライセンスが適用されない可能性もある。
ライセンスされたファイルそれぞれに元々ある著作権と特許権の記述はそのまま保持されなければならず、何らかの修正が施されている場合は、その旨を追加記述しなければならない。

ライブラリを選定する判断基準

②のサイトに選ぶべき条件としてDanという人がコメントしていました。参考になるので日本語訳しておきます。

  1. License for it and for the components used by the library. E.g. in case of React Toolbox - the library provides all the components under MIT, but in case of ANT the library is using other libraries, that are not under MIT.
  2. Is the library extensible or not for your needs.
  3. Roadmap
  4. JS or Typescript
  5. LESS, SASS, CSS
  6. # of bugs
  7. UI support for RTL (right to left) and Accessibility
  8. and so many other items
  1. ライブラリとそれが使っているライブラリのライセンス
    例:React-ToolboxはMITライセンスのもとに提供されているが、ANT(Ant Design)の場合は、MITライセンスではないライブラリをつかっている。
  2. 必要な時に拡張できるかどうか
  3. ロードマップ
    (リリース頻度、開発版かリリース版かどうか、開発が中断、終了していないか)
  4. JavaScriptか、Typescript (TypeScriptやCoffeScriptやECMAScriptか)
  5. スタイルの書き方が、CSSか、LESSか、SASSか
  6. バグの数
  7. UIがRTLプロパティ=右から左(アラビア語など)や利便性をサポートしているか
  8. その他の多くの項目