これまで、開発者が「早く・それなりの UI 」を実現するために、Bootstrap などの CSS フレームワークが重宝されてきました。
しかし今では、React などのライブラリを使って UI をコンポーネント化するようになってきています。
React であっても、事前に CSS フレームワークを読み込んでおき、クラス名を付与することでこれまでと同じように使うことができます。
ただ、既存の CSS フレームワークは内部で jQuery を使用していることが多いので、React と jQuery を共存させるか、jQuery 部分を自前で実装しないといけません。
そこで React で「早く・それなりの UI 」を作れそうな React コンポーネントセットを手当たり次第に調べてみました。
Note: Web 向け UI の コンポーネントのみとなっています。React Native や Onsen UI などのハイブリッドアプリ/モバイル Web アプリ向け UI は含めていません。
React コンポーネントセット 16 選
React コンポーネントセットは、Button や Form などの UI パーツを React コンポーネントとして扱えるようにして、セットとして提供したものです。
多くの場合、React コンポーネントで import すると、render 内で使えるようになります。
英語では "a Set of React Components" や "React UI Library" と呼ばれているようなのですが、ここでは React コンポーネントセットと呼んでいます。
また「React が前提となっている React コンポーネントセット」と「既存の CSS を移植した React コンポーネントセット」の 2 つに分類しています。
太字になっているものが、ある程度メンテナンスされていて、個人的におすすめできそうなものです。
- React を前提とした React コンポーネントセット
- 既存の CSS を移植した React コンポーネントセット
React を前提とした React コンポーネントセット
React 向けに作られたもの、あるいは公式で React をサポートしているものです。
React での使用が前提なので、props を渡すことでコンポーネントをカスタマイズできたり、CSS Modules を使ってスタイルを上書きできたり、Server Side Rendering が考慮されていたりします。
既存の CSS フレームワークを使うことにこだわりがないのであれば、こちらから選ぶのが良さそうです。
material-ui
- official sites: http://www.material-ui.com/
- github: https://github.com/callemall/material-ui
- npm: https://www.npmjs.com/package/material-ui
- status: in development (v0.15.2)
Google Material Design のガイドラインに沿った React コンポーネントセットです。
日本でも使っている人が多く、情報量も多いので使いやすいと思います。
コンポーネントの種類が充実していてクオリティも高い上、Server Side Rendering が考慮されていたり、テーマやカラーパレットなども用意されていたりして、安心感があります。
react-toolbox
- official sites: http://react-toolbox.io/
- github: https://github.com/react-toolbox/react-toolbox
- npm: https://www.npmjs.com/package/react-toolbox
- status: Stable (v1.0.1)
material-ui と同じく、Google Material Design のガイドラインに沿った React コンポーネントセットです。
コンポーネントの充実度は material-ui に遜色なく、テーマやカラーパレットもあります。
material-ui との最も大きな違いは、CSS の管理方法です。
material-ui はインラインスタイルで書かれていますが、react-toolbox は CSS Modules を使用して sass で書かれたスタイルをインポートしています。
Note: CSS Modules を使うと、もし既存のオリジナルな CSS がある場合に、React コンポーネントにインポートすることができます。興味のある方は、ぜひ下記の記事を読んでみてください。
Reactを使ったモジュラーCSS : CSS-in-JSとCSS Module http://postd.cc/modular-css-with-react/
rebass
- official sites: http://jxnblk.com/rebass/
- github: https://github.com/jxnblk/rebass
- npm: https://www.npmjs.com/package/rebass
- status: in development (v0.3.0)
React Context を使用したテーマ変更が特徴の React コンポーネントセットです。
オプションを付ける感覚で、フォントや色だけでなく、余白なども変えることができ、かなり自由度があります。Demo を触ってみるとイメージがわくかと思います。
フレームワークを使うとどうしても見た目にオリジナリティが出すのが難しくなってしまうので、手軽に見栄えを変えられるのは良さそうですね。
belle
- official sites: http://nikgraf.github.io/belle/
- github: https://github.com/nikgraf/belle
- npm: https://www.npmjs.com/package/belle
- status: Stable (v2.0.7)
種類はそこまで多くありませんが、シンプルでフラットな React コンポーネントを提供しています。
比較的コンポーネントに渡せるプロパティが多い印象ですが、material-ui と使い勝手はさほど変わらなそうです。
mui
- official sites: https://www.muicss.com/
- github: https://github.com/muicss/mui
- npm: https://www.npmjs.com/package/muicss
- status: in development (v0.6.5)
Google Material Design のガイドラインに沿った軽量な CSS フレームワークです。
React と Angular を公式でサポートしており、CSS (LESS) もあります。
あくまで基本的なコンポーネントとヘルパを提供することが目的であり、今のところ、コンポーネントの種類自体はさほど多くありません。
ただ、Web だけでなくモバイル、メール、iOS / Android で統一した UI が利用できることを目指しており、メール用のコンポーネントや Sketch 用のデザインファイルも提供されています。
Roadmap によると、v1 までにコンポーネントの種類が揃ってくるようなので楽しみです。
grommet
- official sites: http://www.grommet.io/docs/
- github: https://github.com/grommet/grommet
- npm: https://www.npmjs.com/package/grommet
- status: in development (v0.6.9)
エンタプライズ向けのハイクオリティな UX フレームワークです。
React をベースに開発されていますが、開発者向けというよりかはデザイナー向けに作られていて、Sketch / Illustrator / Axure / Balsamiq 用のデザインファイルがあります。
用意されているコンポーネント群も多様で、珍しいものでは Map, Meter, Number Input, SocialShare, Value, Video, WorldMap などが用意されていました。
elemental-ui
- official sites: http://elemental-ui.com/
- github: https://github.com/elementalui/elemental
- npm: https://www.npmjs.com/package/elemental
- status: in development (v0.5.14)
Keystone.js という CMS プラットフォームで使用されている React コンポーネントセットです。
軽量なライブラリで、Bootstrap に似た Button や Form などの基本的なコンポーネントが提供されていました。
Keystone.js から切りだされたもののようで、まだ実験段階という印象です。
既存の CSS を移植した React コンポーネントセット
既存の CSS を React コンポーネントとして提供するものです。
使用するには、本家の CSS / JavaScript か、React コンポーネント向けに少し変えた CSS / JavaScript を事前に読み込ませる必要があります。
CSS 単体としても使用できるため、React を使ってレンダリングするページとしないページがある場合、共通の UI にできるのがメリットかもしれません。
ただ、ものによっては本家の CSS フレームワークの一部をサポートしていなかったり、jQuery 依存であったりします。
Note: jQuery 依存なフレームワークをどうしても使いたい場合は、以下のサイトが参考になりそうです。
React と jQuery を共存させる http://recruit.gmo.jp/engineer/jisedai/blog/react-with-jquery/
react-bootstrap
- official sites: http://react-bootstrap.github.io/
- github: https://github.com/react-bootstrap/react-bootstrap
- npm: https://www.npmjs.com/package/react-bootstrap
- status: in development (v0.29.5)
Bootstrap の React コンポーネントセット。Bootstrap の豊富なコンポーネント群が、jQuery の依存なしにほぼ使えます。
現在は v1 に向けて開発中のため注意が必要。大きく変わる可能性があるとのこと。
ただコミュニティの規模が大きく、かなり成熟しているので、安定していると思います。
reactstrap
- official sites: https://reactstrap.github.io/
- github: https://github.com/reactstrap/reactstrap/
- npm: https://www.npmjs.com/package/reactstrap
- status: Stable (v1.5.0)
Bootstrap 4 が使いたい人向けの React コンポーネントセット。一通りよく使うものは揃っていますが、react-bootstrap と比べると相当少ないです。
Bootstrap 4 自体がまだ alpha 版のため、あまりおすすめはできません...。
react-mdl
- official sites: https://tleunen.github.io/react-mdl/
- github: https://react-mdl.github.io/react-mdl/
- npm: https://www.npmjs.com/package/react-mdl
- status: Stable (v1.6.1)
Google 製 Material Design Lite の React コンポーネントセット。
マテリアルデザインが使いたい人はこちら。
material-design-react
- github: https://github.com/nikvm/material-design-react
- npm: https://www.npmjs.com/package/material-design-react
- status: in development (v0.2.1)
Google 製 Material Design Lite の React コンポーネントセット。
こちらは On break. Have a look at https://github.com/tleunen/react-mdl for a more complete implementation following similar goals. とあり、現在お休み中のようです。
react-mdl を参照してほしいとのこと。
react-materialize
- official sites: https://react-materialize.github.io/
- github: https://github.com/react-materialize/react-materialize
- npm: https://www.npmjs.com/package/react-materialize
- status: in development (v0.14.4)
materialize の React コンポーネントセット。
Material Design Lite と同じく、マテリアルデザインの代表的な CSS フレームワークだと思います。
しかしこちらは jQuery 依存のようです...。見た目としてこちらが好みならありかもしれません。
react-uikit-components
- official sites: http://otissv.github.io/react-uikit-components/
- github: https://github.com/otissv/react-uikit-components
- npm: https://www.npmjs.com/package/react-uikit-components
- status: Stable (v1.2.0)
UIkit の React コンポーネントセット。
コンポーネントやヘルパが充実しているので、一通り使うには困らないという印象です。
また、それぞれのコンポーネントは react-uikit-* に切り出されています。(例えば Button コンポーネントは react-uikit-button にあります)
一部のコンポーネントだけ使うこともできますし、ソースが辿りやすいのもメリットだなと思いました。
uikit-react
- official sites: https://uikit-react.firebaseapp.com/
- github: https://github.com/stipsan/uikit-react
- npm: https://www.npmjs.com/package/uikit-react
- status: in development (v0.0.10)
UIkit の React コンポーネントセット。
まだ alpha 版のため、github 上では警告がでています。
ドキュメントもまだ少ないので、しばらくは前述の react-uikit-components を使うと良さそうです。
react-semantify
- official sites: http://jessy1092.github.io/react-semantify/
- github: https://github.com/jessy1092/react-semantify
- npm: https://www.npmjs.com/package/react-semantify
- status: in development (v0.5.1)
Semantic UI の React コンポーネントセット。
jQuery 依存のようなので注意が必要です。コンポーネントにはまだ Pre-release のものも多いので、今後に期待ですね。
react-semantic-ui
- github: https://github.com/jhudson8/react-semantic-ui
- npm: https://www.npmjs.com/package/react-semantic-ui
- status: in development (v0.2.0)
Semantic UI の React コンポーネントセット。
The purpose of this project is not to recreate every semantic-ui component but only where it makes sense and React components can add value. とあり、すべての Semantic UI のコンポーネントを置き換えるものではないとのこと。
おわりに
紹介したものの多くは、まだ in development なので、使用には注意した方がいいかもしれません。
しかし、これらのコンポーネントセットには十分安定したものも出てきていますので、ぜひ検討してみてください。
また、React コンポーネントセットの使用がオーバースペックな場合は、単機能なコンポーネントを React Components で探すことも選択肢の一つかと思います。
ぜひお役立てください! Enjoy!
参考
- React＋CSSフレームワークを検討してみたよ http://qiita.com/usagi-f/items/9c675737ef44d0bfcb4e
- 5 ReactJS Application Frameworks to Get Your App Running Quickly http://www.gajotres.net/5-reactjs-application-frameworks-to-get-your-app-running-quickly/
- React UI Libraries http://blog.webkid.io/react-ui-libraries/
- Existing UI libraries to use with React.js? http://stackoverflow.com/questions/23380903/existing-ui-libraries-to-use-with-react-js
- 公開されているReact Componentを利用してみる http://qiita.com/koba04/items/2b11361d9e199cf279e2