1. HOME
  2. ブログ
  3. エンジニアになろう!
  4. Reactのおすすめライブラリを厳選して5つご紹介!
Reactのおすすめライブラリを厳選して5つご紹介!

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

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 パッケージとしても提供されていて、下記のコマンドでインストールが可能。

「ボタン」「カレンダー」「ダイアログ」など、多くのコンポーネントが提供されています。

もちろん、カスタマイズも OK です!

Material-UI の使い方

使いたいときは、まず使用したいコンポーネントを、インポートしてください。

公式ガイドには、ボタンのサンプルが掲載されています。

ちなみに、コンポーネントには、あらかじめ 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」の両方を、インストールする必要があります。

次に、必要なコンポーネントをインポートするといった手順です。

このとき、「index.js」もしくは「App.js」で、以下のように Bootstrap をインポートしてください。

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

Ant Design(アンツ デザイン)

Ant Design(アンツ デザイン)

Ant Design は、中国系企業 Alibaba が開発した、オープンソースの React ライブラリ。

公式ガイドでは、なんと世界で2番目に人気な React ライブラリなんだとか!

商用利用も OK で、主に中国系企業のサービスで利用されています。

コンポーネントは、TypeScript で書かれており、Web 版とモバイル版で分かれているのが特徴。

Ant Designの使い方

インストールは、以下のコマンドで行います。

使い方は、index.jp をカスタマイズして、使用するコンポーネントをインポートします。

ちなみに Ant Design では、各コンポーネントは抽象化され、モジュールとして提供

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

にゃんこ師匠にゃんこ師匠
つまり、コンポーネント内部で処理を完結できるように、設計されておるということじゃな!
ミツオカミツオカ
Ant Design の公式サイトはコチラ

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

Semantic UI React

有名な CSS フレームワークの Semantic UI を、React で使用できるようにしたライブラリ。

Semantic UI と同じで、デザインが洗練され、バリエーションも豊富です。

ただし、React コンポーネントは、Semantic UI を全て置き換えるものではありません

Semantic UI Reactの使い方

インストールは、以下のコマンドで行います。

インストール後、以下の CSS ファイルを、インポートしましょう。

また Semantic UI React では、「Shorthand Props」として、省略形を指定できます

例えば、「いいね!」ボタンは、以下を指定することで実装できます。

にゃんこ師匠にゃんこ師匠
Semantic UI React は、シンプルな構造が特徴的なライブラリじゃ!
ミツオカミツオカ
Semantic UI React の公式サイトはコチラ

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

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

アイコン画像で有名な、Font Awesome が提供している React ライブラリ。

Font Awesome React の特徴は、使用するアイコンのみを、ライブラリから読み込む点。

つまり、JavaScrpt ファイルが、必要以上に大きくなることがないわけです。

Font Awesome Reactの使い方

インストールするには、以下の2つを行います。

そして、使用するアイコンに応じて、以下もインストールしていきましょう。

使用するときは、まずアイコンに応じて、インポートで呼び出しておきます。

次に、「FontAwesomeIcon」の icon プロパティで、対象のアイコンを指定すれば OK です。

にゃんこ師匠にゃんこ師匠
必要な分だけを、ライブラリから読み込むということは…
パフォーマンスが低下しないということでもあるな!
ミツオカミツオカ
Font Awesome React の公式サイトはコチラ

さいごに

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

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

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

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

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

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


さいごの一言

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

書いた人はこんな人

広告メディア事業部
広告メディア事業部
「好きを仕事にするエンジニア集団」の(株)ライトコードです!

ライトコードは、福岡、東京、大阪の3拠点で事業展開するIT企業です。
現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。
いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。

システム開発依頼・お見積もり大歓迎!

また、現在「WEBエンジニア」「モバイルエンジニア」「営業」「WEBデザイナー」「WEBディレクター」を積極採用中です!
インターンや新卒採用も行っております。

以下よりご応募をお待ちしております!
https://rightcode.co.jp/recruit

関連記事

採用情報

\ あの有名サービスに参画!? /

バックエンドエンジニア

\ クリエイティブの最前線 /

フロントエンドエンジニア

\ 世界を変える…! /

Androidエンジニア

\ みんなが使うアプリを創る /

iOSエンジニア