430
414

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

有益なReactライブラリまとめ

Last updated at Posted at 2021-05-17

この記事について

Web開発で1からいい感じのUIを作成しようと骨が折れることが多いですが、世の中にはOSSで簡単にかっこいいUIを作れるライブラリがあります。

本記事では、実際に使ってみてよかったそんな便利なReact UIライブラリをご紹介していきます。

この記事は良さげなライブラリを見つけるたびに不定期更新していきます
「こんなライブラリもあるよ!」という方はコメント欄へ🙏

ちなみにGithubのReactトピックでは面白いプロジェクトが結構見つかるので仕事の合間とかにみています。

UI系

Material UI

言わずもがな最も有名なUIフレームワーク
数年前に比べドキュメントも充実しコミュニティも成熟してきた感があり、サンプルが多いのも魅力的です。

React Boostrap

超有名Web FrameworkのReact版。Material UIや後述のAnt Designよりもミニマルで学習コストも低い印象。

Ant Design

Ant Designはアリババにより開発されているUIフレームワークです。
エンタープライズレベルのUIを提供しており、Material UIに次いで人気があります。

Ant DesignはUI構築に加えて以下のようなアニメーションが簡単に作れることも魅力的です。

1*_6S4VTzzGwRtebx-ys4htA.gif

HP

Github

Rebass

RebassはUIライブラリの中でもミニマルで洗練されたデザインが特徴的です。
Themeの管理がしやすく、個人でモダンなアプリを作るときには好んで使いますがまだStableではないため業務レベルではまだ導入が難しいかもしれません。

HP

Github

Evergreen

こちらもUIフレームワーク。個人的にはボタンのデザインやらが最近ぽくて好き。
ただ、HPで紹介されているコンポーネントの半分はまだ開発途中なので実用性は低め。今後に期待です。

Formik

React Loader Spinner

いい感じのローディング画面を表示してくれるライブラリ。
インポートしてパラメータ指定すればすぐに使えちゃいます。

1*2nJgZmFETW8dRuP75Ch9qw.gif

Video React

YouTubeなどのビデオの埋め込みをいい感じにしてくれるライブラリ。
カバー画像を指定できるので見た目がいい感じになります。
自作しようとすると何気めんどくさかったりするので便利です。
こちらからサンプルを見ることができます。

React Flicking

スクロールやスライドできるUIを提供してくれるライブラリ。言葉で説明するのは難しいので詳しくはDemoを見てみてほしい。かなり便利だし開発やメンテもちゃんとされていそうな感じ。

Demo

Github

Animation系

React Typed

まるでタイピングしているように文字が動くテキストエフェクトを実装できるjQueryライブラリであるTyped.jsをReact用にType.jsをCommponentとしてラップしているライブラリ。

Github

本家Github

React Animations

こんな感じの簡単なアニメーションを実装できるライブラリ
1*bkPR-nhoZ5aTw_et9Mt7Ow.gif

Github

React Reveal

画面スクロールで起こるアニメーションに特化しているライブラリ。
HPに活用事例がたくさん掲載されているのが嬉しい。
現状Reactでスクロールアニメーション実装するならこれ一択。

HP

Github

Drag and Drop系

react dnd

ReactでDrag and Dropの動作を実現できる元祖ライブラリ。

HP

Github

react beautiful dnd

53614150-efbed780-3c2c-11e9-9204-a5d2e746faca.gif
名前の通りreact dndよりも綺麗なUIを提供してくれる。
Githubのスター数もこちらが多く、私はこちらを好んで使います。

Github

ちなみにReactを使ったJiraのクローンプロジェクトではreact-beautiful-dndが使われていて、実装の参考になります。

グラフ、チャート系

Recharts

pasted image 0.png

グラフ系では一番古いライブラリ。
SVGがサポートされていて、外部ライブラリの依存も少ないので使いやすいです。

Victory

pasted image 0.png
VictoryはReactとReact Nativeの両方に使うことのできるライブラリです。
ウェブとモバイルで同じAPIを利用しています。

Visx

visx-gallery.png

VisxはAirbnbによって開発されているチャートライブラリ。
再利用可能なコンポーネントを低レベルからカスタマイズできるため、独自のUIを作りたい方にはおすすめです。

React-Vis

pasted image 0.png

Uberにより開発されているチャート用ライブラリ。
他のライブラリよりも学習コストを低く簡単に実装できるような設計になっています。

React StockCharts

pasted image 0.png

株価専用のチャートライブラリ。

テーブル系

Material Table

テーブル系ライブラリでは1番使えわれているライブラリ。
カスタマイズ性が高く、CSVエクスポートをサポートしているなど多機能です。

Material-UI-datatables

Material UIを使って実装されていて、レスポンシブなテーブルが構築可能です。

スライド系

React PDF

PDFをコンポーネントとしてレンダリングしてみやすくしてくれるライブラリ

デモはこちらから。

Spectacle

Markdownやらからスライトを作成でき、スライド発表機能まで搭載されているライブラリ。
便利ですが、個人的にはSlidevという最近でたVueベースのライブラリの方が高機能だし好きです。

React Awesome Slider

demo-cube.gif
画像スライドを簡単に作成できるライブラリ。
ノーマルCSSを適応できたりカスタマイズ性が高く良い。

React Image Gallery

フォトギャラリーを簡単に作れるライブラリ。
私の場合GatsbyでHP作る時とかによく使います。

React-Carousel-Image-Gallery.gif

Example

Github

その他

react-textarea-autosize

名前の通り自動でサイズ調整してくれるTextInputを提供してくれるライブラリ。(詳しくはDemoを見てください)
何気に便利です。

Demo

Github

Superset

Apacheにより提供されているReactのBIフレームワークです。かなり多機能ですが、個人開発では使い道は少なそうな感じ。本業は機械学習でデータよく使うので使いこなしたい!

Docusaurus

Facebookが公開しているオープンソース開発のためのドキュメンテーションツール(ウェブサイト)です。Reactで書かれているためReactでカスタマイズや拡張ができます。

Github

HP

終わりに

ここまで色々なライブラリを紹介してきましたが、ライブラリへの過度な依存はよきせぬエラーを招いたりする原因になるので、適度に。。。笑
ではよきReactライフを👋

430
414
1

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
430
414

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?