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世界初の量産型ポータブルコンピュータを開発したのに倒産!?アダム・オズボーン
関連記事
採用情報
\ あの有名サービスに参画!? /
バックエンドエンジニア
\ クリエイティブの最前線 /
フロントエンドエンジニア
\ 世界を変える…！ /
Androidエンジニア
\ みんなが使うアプリを創る /
iOSエンジニア
