LoginSignup
2074
1950

More than 1 year has passed since last update.

@kyrieleison(Yuka Tsuboi)

早く・それなりの UI を実現する React コンポーネントセット 16 選

Last updated at Posted at 2016-07-10

これまで、開発者が「早く・それなりの 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 コンポーネントセット

React 向けに作られたもの、あるいは公式で React をサポートしているものです。
React での使用が前提なので、props を渡すことでコンポーネントをカスタマイズできたり、CSS Modules を使ってスタイルを上書きできたり、Server Side Rendering が考慮されていたりします。

既存の CSS フレームワークを使うことにこだわりがないのであれば、こちらから選ぶのが良さそうです。

material-ui

screenshot-www.material-ui.com 2016-07-10 19-56-03.png

Google Material Design のガイドラインに沿った React コンポーネントセットです。
日本でも使っている人が多く、情報量も多いので使いやすいと思います。
コンポーネントの種類が充実していてクオリティも高い上、Server Side Rendering が考慮されていたり、テーマやカラーパレットなども用意されていたりして、安心感があります。

react-toolbox

screenshot-react-toolbox.com 2016-07-10 19-59-36.png

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

screenshot-jxnblk.com 2016-07-10 20-01-25.png

React Context を使用したテーマ変更が特徴の React コンポーネントセットです。
オプションを付ける感覚で、フォントや色だけでなく、余白なども変えることができ、かなり自由度があります。Demo を触ってみるとイメージがわくかと思います。

フレームワークを使うとどうしても見た目にオリジナリティが出すのが難しくなってしまうので、手軽に見栄えを変えられるのは良さそうですね。

belle

screenshot-nikgraf.github.io 2016-07-10 20-02-22.png

種類はそこまで多くありませんが、シンプルでフラットな React コンポーネントを提供しています。
比較的コンポーネントに渡せるプロパティが多い印象ですが、material-ui と使い勝手はさほど変わらなそうです。

mui

screenshot-www.muicss.com 2016-07-10 20-03-04.png

Google Material Design のガイドラインに沿った軽量な CSS フレームワークです。
React と Angular を公式でサポートしており、CSS (LESS) もあります。

あくまで基本的なコンポーネントとヘルパを提供することが目的であり、今のところ、コンポーネントの種類自体はさほど多くありません。
ただ、Web だけでなくモバイル、メール、iOS / Android で統一した UI が利用できることを目指しており、メール用のコンポーネントや Sketch 用のデザインファイルも提供されています。

Roadmap によると、v1 までにコンポーネントの種類が揃ってくるようなので楽しみです。

grommet

screenshot-www.grommet.io 2016-07-10 20-03-52.png

エンタプライズ向けのハイクオリティな UX フレームワークです。
React をベースに開発されていますが、開発者向けというよりかはデザイナー向けに作られていて、Sketch / Illustrator / Axure / Balsamiq 用のデザインファイルがあります。
用意されているコンポーネント群も多様で、珍しいものでは Map, Meter, Number Input, SocialShare, Value, Video, WorldMap などが用意されていました。

elemental-ui

screenshot-elemental-ui.com 2016-07-10 20-04-25.png

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

screenshot-react-bootstrap.github.io 2016-07-10 20-04-52.png

Bootstrap の React コンポーネントセット。Bootstrap の豊富なコンポーネント群が、jQuery の依存なしにほぼ使えます。
現在は v1 に向けて開発中のため注意が必要。大きく変わる可能性があるとのこと。
ただコミュニティの規模が大きく、かなり成熟しているので、安定していると思います。

reactstrap

screenshot-reactstrap.github.io 2016-07-10 20-05-30.png

Bootstrap 4 が使いたい人向けの React コンポーネントセット。一通りよく使うものは揃っていますが、react-bootstrap と比べると相当少ないです。
Bootstrap 4 自体がまだ alpha 版のため、あまりおすすめはできません...。

react-mdl

screenshot-tleunen.github.io 2016-07-10 20-06-22.png

Google 製 Material Design Lite の React コンポーネントセット。
マテリアルデザインが使いたい人はこちら。

material-design-react

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

screenshot-react-materialize.github.io 2016-07-10 20-07-37.png

materialize の React コンポーネントセット。
Material Design Lite と同じく、マテリアルデザインの代表的な CSS フレームワークだと思います。
しかしこちらは jQuery 依存のようです...。見た目としてこちらが好みならありかもしれません。

react-uikit-components

screenshot-otissv.github.io 2016-07-10 20-08-20.png

UIkit の React コンポーネントセット。
コンポーネントやヘルパが充実しているので、一通り使うには困らないという印象です。

また、それぞれのコンポーネントは react-uikit-* に切り出されています。(例えば Button コンポーネントは react-uikit-button にあります)
一部のコンポーネントだけ使うこともできますし、ソースが辿りやすいのもメリットだなと思いました。

uikit-react

screenshot-uikit-react.firebaseapp.com 2016-07-10 20-08-59.png

UIkit の React コンポーネントセット。
まだ alpha 版のため、github 上では警告がでています。
ドキュメントもまだ少ないので、しばらくは前述の react-uikit-components を使うと良さそうです。

react-semantify

screenshot-jessy1092.github.io 2016-07-10 20-09-35.png

Semantic UI の React コンポーネントセット。
jQuery 依存のようなので注意が必要です。コンポーネントにはまだ Pre-release のものも多いので、今後に期待ですね。

react-semantic-ui

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!

参考

2074
1950
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2074
1950