• トップ
  • ブログ一覧
  • Reactのおすすめライブラリを厳選して5つご紹介!
  • Reactのおすすめライブラリを厳選して5つご紹介!

    広告メディア事業部広告メディア事業部
    2021.09.14

    エンジニアになろう!

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

    にゃんこ師匠にゃんこ師匠
    では、授業はじめていこうかの~!
    今日は React の…
    ミツオカミツオカ
    師匠ー!!
    Reactのライブラリ選びは重要ですよね!?
    にゃんこ師匠にゃんこ師匠
    …まあ、言ってることは合ってるな!
    ミツオカミツオカ
    ずばり!オススメはどれですか?
    にゃんこ師匠にゃんこ師匠
    ちょ、直球じゃな…
    しょうがない!では、ワシが厳選した、オススメのReactのライブラリを教えるとしようかの!

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

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

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

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

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

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

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

    Material-UI(マテリアル - ユーアイ)

    Material-UI

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

    にゃんこ師匠にゃんこ師匠
    Material-UI は、出回ってる情報量が多いのがメリット!
    じゃが、サンプルコードなどがわかりづらいのが難点じゃ…
    ミツオカミツオカ
    Material-UI の公式サイトはコチラ

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

    React-Bootstrap

    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';
    にゃんこ師匠にゃんこ師匠
    普段 Bootstrap を使っているエンジニアなら、React-Bootstrap はほとんど変わらんから、扱いやすいじゃろな!
    ミツオカミツオカ
    React-Bootstrap の公式サイトはコチラ

    Ant Design(アンツ デザイン)

    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

    有名な 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' />
    にゃんこ師匠にゃんこ師匠
    Semantic UI React は、シンプルな構造が特徴的なライブラリじゃ!
    ミツオカミツオカ
    Semantic UI React の公式サイトはコチラ

    Font Awesome 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 を、効率良く作っていきましょう!

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

    featureImg2020.07.27IT・コンピューターの歴史特集IT・コンピューターの歴史をまとめていきたいと思います!弊社ブログにある記事のみで構成しているため、まだ「未完成状態」...
    featureImg2020.08.07JavaScript 特集知識編JavaScriptを使ってできることをわかりやすく解説!JavaScriptの歴史【紆余曲折を経たプログラミン...

    さいごの一言

    にゃんこ師匠にゃんこ師匠
    どうじゃったかの?
    ワシが厳選した、おすすめの React ライブラリは?
    ミツオカミツオカ
    とっても、勉強になりました!
    とりあえず React-Bootstrapは使ってみます!メモメモ
    にゃんこ師匠にゃんこ師匠
    ちなみに、React ライブラリにはな、あまり良くないライブラリもあるんじゃ!
    色々と試してみると良いぞ!
    ミツオカミツオカ
    なるほど。では…
    師匠を「Re act(再アクト)」させましょうかね (ΦωΦ)フフフ…
    にゃんこ師匠にゃんこ師匠
    …え!?ミツオカ…!?再アクトってなんじゃ!?ブルガク…
    ぎゃ…ぎゃぁぁぁぁぁ…
    広告メディア事業部

    広告メディア事業部

    おすすめ記事