React ライブラリのおすすめは？

にゃんこ師匠

では、授業はじめていこうかの～！
今日は React の…

ミツオカ

師匠ー！！
Reactのライブラリ選びは重要ですよね！？

にゃんこ師匠

…まあ、言ってることは合ってるな！

ミツオカ

ずばり！オススメはどれですか？

にゃんこ師匠

ちょ、直球じゃな…
しょうがない！では、ワシが厳選した、オススメのReactのライブラリを教えるとしようかの！

【師匠が選ぶ】React ライブラリ5選のご紹介！

ここ最近、JavaScript での UI 開発では、React が人気となっていますね！

そして、その JavaScript での開発では、ライブラリは欠かせない存在となっています。

ただこのライブラリの選定は、開発効率化を考えると、かなり重要な工程…

というわけで今回は、UI 開発に便利でオススメできる React ライブラリを、厳選して紹介していきたいと思います。

では早速、見ていきましょう！

※あくまでも師匠がチョイスしたライブラリになります。

Material-UI（マテリアル - ユーアイ）

公式ガイドによると、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 に値を設定することで、カスタマイズができるわけですね！

にゃんこ師匠

Material-UI は、出回ってる情報量が多いのがメリット！
じゃが、サンプルコードなどがわかりづらいのが難点じゃ…

ミツオカ

Material-UI の公式サイトはコチラ！

React-Bootstrap（リアクト - ブーストラップ）

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';

にゃんこ師匠

普段 Bootstrap を使っているエンジニアなら、React-Bootstrap はほとんど変わらんから、扱いやすいじゃろな！

ミツオカ

React-Bootstrap の公式サイトはコチラ！

Ant Design（アンツ デザイン）

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 では、各コンポーネントは抽象化され、モジュールとして提供。

各コンポーネントには、限られたインタフェースで、アクセスできるようになっています。

にゃんこ師匠

つまり、コンポーネント内部で処理を完結できるように、設計されておるということじゃな！

ミツオカ

Ant Design の公式サイトはコチラ！

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' />

にゃんこ師匠

Semantic UI React は、シンプルな構造が特徴的なライブラリじゃ！

ミツオカ

Semantic UI React の公式サイトはコチラ！

Font Awesome React（フォント オーサム リアクト）

アイコン画像で有名な、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)

にゃんこ師匠

必要な分だけを、ライブラリから読み込むということは…
パフォーマンスが低下しないということでもあるな！

ミツオカ

Font Awesome React の公式サイトはコチラ！

さいごに

React のおすすめの React ライブラリを、5つ紹介しました。

React ライブラリの中では、Material-UI が人気です！

それに負けず劣らず人気となのが、React-Bootstrap です。

実際に選ぶときは、求める UI と、ライブラリの特徴を考えながら選定していってくださいね！

React ライブラリを使いながら、洗練された UI を、効率良く作っていきましょう！

こちらの記事もオススメ！

さいごの一言

にゃんこ師匠

どうじゃったかの？
ワシが厳選した、おすすめの React ライブラリは？

ミツオカ

とっても、勉強になりました！
とりあえず React-Bootstrapは使ってみます！ﾒﾓﾒﾓ

にゃんこ師匠

ちなみに、React ライブラリにはな、あまり良くないライブラリもあるんじゃ！
色々と試してみると良いぞ！

ミツオカ

なるほど。では…
師匠を「Re act（再アクト）」させましょうかね (ΦωΦ)ﾌﾌﾌ…

にゃんこ師匠

…え!?ミツオカ…!?再アクトってなんじゃ!?ﾌﾞﾙｶﾞｸ…
ぎゃ…ぎゃぁぁぁぁぁ…