Edited at

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

More than 1 year has passed since last update.


はじめに

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. その他の多くの項目