![メディアチーム](/_next/image?url=https%3A%2F%2Fapi.rightcode.co.jp%2Fwp-content%2Fuploads%2F2024%2F12%2Fmedia_new_icon-150x150.png&w=64&q=75)
Reactのおすすめライブラリを厳選して5つご紹介!
![メディアチーム](/_next/image?url=https%3A%2F%2Fapi.rightcode.co.jp%2Fwp-content%2Fuploads%2F2024%2F12%2Fmedia_new_icon-150x150.png&w=64&q=75)
エンジニアになろう!
![Reactのおすすめライブラリを厳選して5つご紹介!](/_next/image?url=https%3A%2F%2Fapi.rightcode.co.jp%2Fwp-content%2Fuploads%2F2021%2F09%2Freact-recommended-library-thumb.png&w=3840&q=75)
React ライブラリのおすすめは?
![にゃんこ師匠](https://api.rightcode.co.jp/wp-content/uploads/2019/03/neko-teach-1.jpg)
今日は React の…
![ミツオカ](https://api.rightcode.co.jp/wp-content/uploads/2019/03/syojyo.jpg)
Reactのライブラリ選びは重要ですよね!?
![にゃんこ師匠](https://api.rightcode.co.jp/wp-content/uploads/2019/03/neko-teach-1.jpg)
![ミツオカ](https://api.rightcode.co.jp/wp-content/uploads/2019/03/syojyo.jpg)
![にゃんこ師匠](https://api.rightcode.co.jp/wp-content/uploads/2019/03/neko-teach-1.jpg)
しょうがない!では、ワシが厳選した、オススメのReactのライブラリを教えるとしようかの!
【師匠が選ぶ】React ライブラリ5選のご紹介!
ここ最近、JavaScript での UI 開発では、React が人気となっていますね!
そして、その JavaScript での開発では、ライブラリは欠かせない存在となっています。
ただこのライブラリの選定は、開発効率化を考えると、かなり重要な工程…
というわけで今回は、UI 開発に便利でオススメできる React ライブラリを、厳選して紹介していきたいと思います。
では早速、見ていきましょう!
※あくまでも師匠がチョイスしたライブラリになります。
Material-UI(マテリアル - ユーアイ)
![Material-UI](https://api.rightcode.co.jp/wp-content/uploads/2020/12/Material-UI.png)
Material-UI は、Google Material Design のガイドラインに沿って開発された、最も有名な React ライブラリ。
公式ガイドによると、Material-UI を使用している企業には、Netflix や Amazon などがあります。
npm パッケージとしても提供されていて、下記のコマンドでインストールが可能。
1npm install @material-ui/core
「ボタン」「カレンダー」「ダイアログ」など、多くのコンポーネントが提供されています。
もちろん、カスタマイズも OK です!
Material-UI の使い方
使いたいときは、まず使用したいコンポーネントを、インポートしてください。
公式ガイドには、ボタンのサンプルが掲載されています。
1import React from 'react';
2import ReactDOM from 'react-dom';
3import Button from '@material-ui/core/Button';
4
5function App() {
6 return (
7 <Button variant="contained" color="primary">
8 Hello World
9 </Button>
10 );
11}
12
13ReactDOM.render(<App />, document.querySelector('#app'));
ちなみに、コンポーネントには、あらかじめ props が用意されています。
この props に値を設定することで、カスタマイズができるわけですね!
![にゃんこ師匠](https://api.rightcode.co.jp/wp-content/uploads/2019/03/neko-teach-1.jpg)
じゃが、サンプルコードなどがわかりづらいのが難点じゃ…
![ミツオカ](https://api.rightcode.co.jp/wp-content/uploads/2019/03/syojyo.jpg)
React-Bootstrap(リアクト - ブーストラップ)
![React-Bootstrap](https://api.rightcode.co.jp/wp-content/uploads/2020/12/React-Bootstrap.png)
React-Bootstrap は、有名な CSS フレームワークの Bootstrap を、React で使用できるようにしたライブラリ。
React ライブラリの中では、先ほど紹介した Material-UI と並んで有名です。
コンポーネントには、「ボタン」「バッジ」「カード」などが用意されています。
React-Bootstrap の特徴は、Bootstrap のスタイルシートに、完全に依存している点。
また、JQuery への依存を、完全に無くしている点もポイントです。
React-bootstrapの使い方
React-bootstrap では、CSS ファイルを含んでいません。
使用するには、以下のコマンドで、「React-Bootstrap」と「Bootstrap」の両方を、インストールする必要があります。
1npm install react-bootstrap bootstrap
次に、必要なコンポーネントをインポートするといった手順です。
1import Button from 'react-bootstrap/Button';
2//もしくは
3import { Button } from 'react-bootstrap';
このとき、「index.js」もしくは「App.js」で、以下のように Bootstrap をインポートしてください。
1import 'bootstrap/dist/css/bootstrap.min.css';
![にゃんこ師匠](https://api.rightcode.co.jp/wp-content/uploads/2019/03/neko-teach-1.jpg)
![ミツオカ](https://api.rightcode.co.jp/wp-content/uploads/2019/03/syojyo.jpg)
Ant Design(アンツ デザイン)
![Ant Design(アンツ デザイン)](https://api.rightcode.co.jp/wp-content/uploads/2021/07/1-react-recommended-library.jpg)
Ant Design は、中国系企業 Alibaba が開発した、オープンソースの React ライブラリ。
公式ガイドでは、なんと世界で2番目に人気な React ライブラリなんだとか!
商用利用も OK で、主に中国系企業のサービスで利用されています。
コンポーネントは、TypeScript で書かれており、Web 版とモバイル版で分かれているのが特徴。
Ant Designの使い方
インストールは、以下のコマンドで行います。
1npm install antd
1yarn add antd
使い方は、index.jp をカスタマイズして、使用するコンポーネントをインポートします。
1import { DatePicker, message } from 'antd';
ちなみに Ant Design では、各コンポーネントは抽象化され、モジュールとして提供。
各コンポーネントには、限られたインタフェースで、アクセスできるようになっています。
![にゃんこ師匠](https://api.rightcode.co.jp/wp-content/uploads/2019/03/neko-teach-1.jpg)
![ミツオカ](https://api.rightcode.co.jp/wp-content/uploads/2019/03/syojyo.jpg)
Semantic UI React(セマンティック ユーアイ リアクト)
![Semantic UI React](https://api.rightcode.co.jp/wp-content/uploads/2020/12/Semantic_UI_React.png)
有名な CSS フレームワークの Semantic UI を、React で使用できるようにしたライブラリ。
Semantic UI と同じで、デザインが洗練され、バリエーションも豊富です。
ただし、React コンポーネントは、Semantic UI を全て置き換えるものではありません。
Semantic UI Reactの使い方
インストールは、以下のコマンドで行います。
1npm install semantic-ui-react semantic-ui-css
2## もしくは
3yarn add semantic-ui-react semantic-ui-css
インストール後、以下の CSS ファイルを、インポートしましょう。
1import 'semantic-ui-css/semantic.min.css'
また Semantic UI React では、「Shorthand Props」として、省略形を指定できます。
例えば、「いいね!」ボタンは、以下を指定することで実装できます。
1<Button icon='like' />
![にゃんこ師匠](https://api.rightcode.co.jp/wp-content/uploads/2019/03/neko-teach-1.jpg)
![ミツオカ](https://api.rightcode.co.jp/wp-content/uploads/2019/03/syojyo.jpg)
Font Awesome React(フォント オーサム リアクト)
![Font Awesome React(フォント オーサム リアクト)](https://api.rightcode.co.jp/wp-content/uploads/2021/07/2-react-recommended-library.png)
アイコン画像で有名な、Font Awesome が提供している React ライブラリ。
Font Awesome React の特徴は、使用するアイコンのみを、ライブラリから読み込む点。
つまり、JavaScrpt ファイルが、必要以上に大きくなることがないわけです。
Font Awesome Reactの使い方
インストールするには、以下の2つを行います。
1npm install @fortawesome/react-fontawesome
2npm install @fortawesome/fontawesome-svg-core
そして、使用するアイコンに応じて、以下もインストールしていきましょう。
1npm install --save @fortawesome/free-brands-svg-icons
2npm install --save @fortawesome/free-regular-svg-icons
使用するときは、まずアイコンに応じて、インポートで呼び出しておきます。
次に、「FontAwesomeIcon」の icon プロパティで、対象のアイコンを指定すれば OK です。
1import ReactDOM from 'react-dom'
2import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
3import { faCoffee } from '@fortawesome/free-solid-svg-icons'
4
5const element = <FontAwesomeIcon icon={faCoffee} />
6
7ReactDOM.render(element, document.body)
![にゃんこ師匠](https://api.rightcode.co.jp/wp-content/uploads/2019/03/neko-teach-1.jpg)
パフォーマンスが低下しないということでもあるな!
![ミツオカ](https://api.rightcode.co.jp/wp-content/uploads/2019/03/syojyo.jpg)
さいごに
React のおすすめの React ライブラリを、5つ紹介しました。
React ライブラリの中では、Material-UI が人気です!
それに負けず劣らず人気となのが、React-Bootstrap です。
実際に選ぶときは、求める UI と、ライブラリの特徴を考えながら選定していってくださいね!
React ライブラリを使いながら、洗練された UI を、効率良く作っていきましょう!
こちらの記事もオススメ!
2020.07.27IT・コンピューターの歴史特集IT・コンピューターの歴史をまとめていきたいと思います!弊社ブログにある記事のみで構成しているため、まだ「未完成状態」...
2020.08.07JavaScript 特集知識編JavaScriptを使ってできることをわかりやすく解説!JavaScriptの歴史【紆余曲折を経たプログラミン...
さいごの一言
![にゃんこ師匠](https://api.rightcode.co.jp/wp-content/uploads/2019/03/neko-teach-1.jpg)
ワシが厳選した、おすすめの React ライブラリは?
![ミツオカ](https://api.rightcode.co.jp/wp-content/uploads/2019/03/syojyo.jpg)
とりあえず React-Bootstrapは使ってみます!メモメモ
![にゃんこ師匠](https://api.rightcode.co.jp/wp-content/uploads/2019/03/neko-teach-1.jpg)
色々と試してみると良いぞ!
![ミツオカ](https://api.rightcode.co.jp/wp-content/uploads/2019/03/syojyo.jpg)
師匠を「Re act(再アクト)」させましょうかね (ΦωΦ)フフフ…
![にゃんこ師匠](https://api.rightcode.co.jp/wp-content/uploads/2019/03/neko-teach-1.jpg)
ぎゃ…ぎゃぁぁぁぁぁ…
ライトコードでは、エンジニアを積極採用中!
ライトコードでは、エンジニアを積極採用しています!社長と一杯しながらお話しする機会もご用意しております。そのほかカジュアル面談等もございますので、くわしくは採用情報をご確認ください。
採用情報へ
![メディアチーム](/_next/image?url=https%3A%2F%2Fapi.rightcode.co.jp%2Fwp-content%2Fuploads%2F2024%2F12%2Fmedia_new_icon-150x150.png&w=3840&q=75)
「好きを仕事にするエンジニア集団」の(株)ライトコードです! ライトコードは、福岡、東京、大阪、名古屋の4拠点で事業展開するIT企業です。 現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。 いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。 システム開発依頼・お見積もり大歓迎! また、現在「WEBエンジニア」「モバイルエンジニア」「営業」「WEBデザイナー」を積極採用中です! インターンや新卒採用も行っております。 以下よりご応募をお待ちしております! https://rightcode.co.jp/recruit