
Reactのおすすめライブラリを厳選して5つご紹介!
2021.12.20
React ライブラリのおすすめは?

今日は React の…

Reactのライブラリ選びは重要ですよね!?



しょうがない!では、ワシが厳選した、オススメのReactのライブラリを教えるとしようかの!
【師匠が選ぶ】React ライブラリ5選のご紹介!
ここ最近、JavaScript での UI 開発では、React が人気となっていますね!
そして、その JavaScript での開発では、ライブラリは欠かせない存在となっています。
ただこのライブラリの選定は、開発効率化を考えると、かなり重要な工程…
というわけで今回は、UI 開発に便利でオススメできる React ライブラリを、厳選して紹介していきたいと思います。
では早速、見ていきましょう!
※あくまでも師匠がチョイスしたライブラリになります。
Material-UI(マテリアル - ユーアイ)

Material-UI は、Google Material Design のガイドラインに沿って開発された、最も有名な React ライブラリ。
公式ガイドによると、Material-UI を使用している企業には、Netflix や Amazon などがあります。
npm パッケージとしても提供されていて、下記のコマンドでインストールが可能。
1 | npm install @material-ui/core |
「ボタン」「カレンダー」「ダイアログ」など、多くのコンポーネントが提供されています。
もちろん、カスタマイズも OK です!
Material-UI の使い方
使いたいときは、まず使用したいコンポーネントを、インポートしてください。
公式ガイドには、ボタンのサンプルが掲載されています。
1 2 3 4 5 6 7 8 9 10 11 12 13 | import React from 'react'; import ReactDOM from 'react-dom'; import Button from '@material-ui/core/Button'; function App() { return ( <Button variant="contained" color="primary"> Hello World </Button> ); } ReactDOM.render(<App />, document.querySelector('#app')); |
ちなみに、コンポーネントには、あらかじめ props が用意されています。
この props に値を設定することで、カスタマイズができるわけですね!

じゃが、サンプルコードなどがわかりづらいのが難点じゃ…

React-Bootstrap(リアクト - ブーストラップ)

React-Bootstrap は、有名な CSS フレームワークの Bootstrap を、React で使用できるようにしたライブラリ。
React ライブラリの中では、先ほど紹介した Material-UI と並んで有名です。
コンポーネントには、「ボタン」「バッジ」「カード」などが用意されています。
React-Bootstrap の特徴は、Bootstrap のスタイルシートに、完全に依存している点。
また、JQuery への依存を、完全に無くしている点もポイントです。
React-bootstrapの使い方
React-bootstrap では、CSS ファイルを含んでいません。
使用するには、以下のコマンドで、「React-Bootstrap」と「Bootstrap」の両方を、インストールする必要があります。
1 | npm install react-bootstrap bootstrap |
次に、必要なコンポーネントをインポートするといった手順です。
1 2 3 | import Button from 'react-bootstrap/Button'; //もしくは import { Button } from 'react-bootstrap'; |
このとき、「index.js」もしくは「App.js」で、以下のように Bootstrap をインポートしてください。
1 | import 'bootstrap/dist/css/bootstrap.min.css'; |


Ant Design(アンツ デザイン)

Ant Design は、中国系企業 Alibaba が開発した、オープンソースの React ライブラリ。
公式ガイドでは、なんと世界で2番目に人気な React ライブラリなんだとか!
商用利用も OK で、主に中国系企業のサービスで利用されています。
コンポーネントは、TypeScript で書かれており、Web 版とモバイル版で分かれているのが特徴。
Ant Designの使い方
インストールは、以下のコマンドで行います。
1 | npm install antd |
1 | yarn add antd |
使い方は、index.jp をカスタマイズして、使用するコンポーネントをインポートします。
1 | import { DatePicker, message } from 'antd'; |
ちなみに Ant Design では、各コンポーネントは抽象化され、モジュールとして提供。
各コンポーネントには、限られたインタフェースで、アクセスできるようになっています。


Semantic UI React(セマンティック ユーアイ リアクト)

有名な CSS フレームワークの Semantic UI を、React で使用できるようにしたライブラリ。
Semantic UI と同じで、デザインが洗練され、バリエーションも豊富です。
ただし、React コンポーネントは、Semantic UI を全て置き換えるものではありません。
Semantic UI Reactの使い方
インストールは、以下のコマンドで行います。
1 2 3 | npm install semantic-ui-react semantic-ui-css ## もしくは yarn add semantic-ui-react semantic-ui-css |
インストール後、以下の CSS ファイルを、インポートしましょう。
1 | import 'semantic-ui-css/semantic.min.css' |
また Semantic UI React では、「Shorthand Props」として、省略形を指定できます。
例えば、「いいね!」ボタンは、以下を指定することで実装できます。
1 | <Button icon='like' /> |


Font Awesome React(フォント オーサム リアクト)

アイコン画像で有名な、Font Awesome が提供している React ライブラリ。
Font Awesome React の特徴は、使用するアイコンのみを、ライブラリから読み込む点。
つまり、JavaScrpt ファイルが、必要以上に大きくなることがないわけです。
Font Awesome Reactの使い方
インストールするには、以下の2つを行います。
1 2 | npm install @fortawesome/react-fontawesome npm install @fortawesome/fontawesome-svg-core |
そして、使用するアイコンに応じて、以下もインストールしていきましょう。
1 2 | npm install --save @fortawesome/free-brands-svg-icons npm install --save @fortawesome/free-regular-svg-icons |
使用するときは、まずアイコンに応じて、インポートで呼び出しておきます。
次に、「FontAwesomeIcon」の icon プロパティで、対象のアイコンを指定すれば OK です。
1 2 3 4 5 6 7 | import ReactDOM from 'react-dom' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faCoffee } from '@fortawesome/free-solid-svg-icons' const element = <FontAwesomeIcon icon={faCoffee} /> ReactDOM.render(element, document.body) |

パフォーマンスが低下しないということでもあるな!

さいごに
React のおすすめの React ライブラリを、5つ紹介しました。
React ライブラリの中では、Material-UI が人気です!
それに負けず劣らず人気となのが、React-Bootstrap です。
実際に選ぶときは、求める UI と、ライブラリの特徴を考えながら選定していってくださいね!
React ライブラリを使いながら、洗練された UI を、効率良く作っていきましょう!
こちらの記事もオススメ!
さいごの一言

ワシが厳選した、おすすめの React ライブラリは?

とりあえず React-Bootstrapは使ってみます!メモメモ

色々と試してみると良いぞ!

師匠を「Re act(再アクト)」させましょうかね (ΦωΦ)フフフ…

ぎゃ…ぎゃぁぁぁぁぁ…
書いた人はこんな人

- 「好きを仕事にするエンジニア集団」の(株)ライトコードです!
ライトコードは、福岡、東京、大阪の3拠点で事業展開するIT企業です。
現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。
いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。
システム開発依頼・お見積もり大歓迎!
また、現在「WEBエンジニア」「モバイルエンジニア」「営業」「WEBデザイナー」「WEBディレクター」を積極採用中です!
インターンや新卒採用も行っております。
以下よりご応募をお待ちしております!
https://rightcode.co.jp/recruit
ライトコードの日常12月 1, 2023ライトコードクエスト〜東京オフィス歴史編〜
ITエンタメ10月 13, 2023Netflixの成功はレコメンドエンジン?
ライトコードの日常8月 30, 2023退職者の最終出社日に密着してみた!
ITエンタメ8月 3, 2023世界初の量産型ポータブルコンピュータを開発したのに倒産!?アダム・オズボーン