Reactでのアプリケーション作成を行っている皆さま、UIの実装に苦労していませんか？

ソースコードを直打ちしてUIを作成すると必要最低限のもので表現できます。そのため、デザインの自由度が高く機能も最低限の画面構成を実現が可能となります。

しかし、本当に使いやすいUIの実現のためにはデザインのスキルやレイアウトへの工夫が必要です。

コーディング以外の部分に時間を取られてしまい肝心の機能実装に費やす時間を確保できなくなってしまうリスクが頭に浮かんでいる方もいらっしゃることでしょう。それに、要素を追加する度にひとつひとつデザインをしていくのも大変です。

そこで、さまざまなところから提供されているライブラリを使用することをおすすめします！

今回の記事では、UIに関するライブラリを厳選してご紹介します！

Reactのライブラリとは？

Reactのライブラリとは？

一般的にライブラリとは、よく使うプログラムをひとまとめにしたもののことを指します。

ライブラリにはプログラムが入っていますが基本的に単体で動かすことはできず、他の実行が可能なプログラムから呼び出されることで動作します。

Reactはそれ自身がJavaScriptライブラリであり、ReactのライブラリとはReactから呼び出されるプログラムがひとまとめになったものです。

ライブラリを使用する際の注意点

Reactライブラリを利用することで簡単にコンポーネントを実装できます。しかし、いくつか注意点もあります。

  • ReactとReactライブラリの整合性
  • 過度に使い過ぎないようにする
  • 成果物の使いやすさを重視する

上記の点に注意が必要なので、それぞれ詳しく

ReactとReactライブラリの整合性

ReactもReactライブラリも常に更新されているものがほとんどです。

ここで問題となってくるのは、Reactのバージョンが更新されたタイミングでReactライブラリも同時に更新されているとは限らないという点です。

例えばReactのバージョンアップで非推奨となった構文があったとします。このときReactライブラリはリアルタイムで構文が非推奨になったということを知ることはできないので、ライブラリ側が更新されるまでは非推奨の動きを続けてしまうことになります。

過度に使い過ぎないようにする

ライブラリを実装するとそれだけ処理が重くなり、レンダリングが遅くなります。

たくさんのライブラリを使えば使うほど読み込みに時間も掛かってしまい、場合によってはブラウザ側でエラーと判断されます。

使いそうなライブラリを先に全てインストールするといったことは避けて、必要なライブラリを場合によって適切に使用しましょう。

成果物の使いやすさを重視する

実装が簡単という理由でライブラリが使用されることがあります。

このような開発者目線ではなくユーザの目線に立つことを忘れないでください。

使いやすいライブラリという視点よりも、あくまでもユーザが使いやすいUIを提供することができるライブラリを選びましょう。

Reactのライブラリおすすめ3選

Reactのライブラリおすすめ3選

それでは、Reactのライブラリの中でおすすめのものを3つ紹介します。

本記事で特にオススメするライブラリは以下の3つです！

  • UIライブラリの代表格：Material-UI
  • アイコンに特化したライブラリ：Font Awesome React
  • アニメーションに特化したライブラリ：Framer Motion

代表的なUIライブラリ「Material-UI」

https://mui.com/

「Material-UI」はMaterial Designを簡単に実現できるライブラリです。

特徴

Material-UIにはテーマやパレットという考え方があり、統一感のある色やレイアウトを簡単に実現することができます。

使い方

以下のコマンドでインストールします。

npm install @mui/material @emotion/react @emotion/styled

公式サイトに載っている簡単な例としては以下のソースコードをApp.jsに記載すると、「Hello World」というテキストの入ったボタンを表示することができます。

import * as React from 'react';
import ReactDOM from 'react-dom';
import Button from '@mui/material/Button';

function App() {
  return <Button variant="contained">Hello World</Button>;
}

ReactDOM.render(<App />, document.querySelector('#app'));

他のUIライブラリ

  • React-Bootstrap：CSSのフレームワークでおなじみのBootstrapをReactに導入するためのライブラリです。BootstrapのコンポーネントをJSXで扱えるようにします。
  • Ant Design of React：中国のAlibabaが開発したデザインシステムである「Ant Design」に則って作られたライブラリ。
  • Semantic UI React：レスポンシブなレイアウトのWebサイトを作成するために人気のあるSemantic UIというCSSフレームワークをReactに導入するためのライブラリです。
  • Chakra UI：Reactアプリケーションに必要なコンポーネントを提供するライブラリです。限られたパラメータを設定することで、統一感のあるデザインを表現することができます。
  • Evergreen：柔軟にUIを構成できるライブラリ。ただし、開発途中の個所があるので公式ドキュメントを見て使いたいコンポーネントを使用できるかを確認する手間がある。

アイコンに特化「Font Awesome React」

https://fontawesome.com/v5/docs/web/use-with/react

Font Awesomeから提供されているアイコンやロゴをReactから使用可能とするライブラリです。

特徴

アイコンが所属しているパッケージのみを使用するので、比較的時間をかけずにアイコンを表示させることができます。

使い方

Font Awesomeのアイコン検索ページから使用したいアイコンを確認します。

検索用のテキストボックスにキーワードを入力して、アイコンを探してください。

今回はTwitterのシンプルなアイコンを使用したいと思います。

検索結果から一番左のアイコンをクリックしてください。

モーダルで情報が現れるので、「React」の情報を確かめます。

以下のコマンドを実行して必須のパッケージをインストールします。

npm install @fortawesome/react-fontawesome
npm install @fortawesome/fontawesome-svg-core

次に以下のコマンドを実行してアイコンが所属しているパッケージをインストールします。

npm install @fortawesome/free-brands-svg-icons

今回は先ほど確かめたアイコンの情報「<FontAwesomeIcon icon=”fa-brands fa-twitter” />」からアイコンがbrandsパッケージに所属していると分かります。

そのため、brandsをインストールしています。

次にソースコード上でパッケージとアイコンをインポートして、アイコンを呼び出します。

以下はcreate-react-appを用いて、App.jsに記述した例です。

import React from 'react';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faTwitter } from "@fortawesome/free-brands-svg-icons";

function App() {
  return (
    <FontAwesomeIcon icon={faTwitter} />
  );
}

export default App;

所属しているパッケージからTwitterのアイコンのみを使えるようにしています。

ブラウザでは、このように表示されます。

他のアイコン特化系ライブラリ

  • ReactIcons：こちらも種類が豊富なアイコンのライブラリです。Font Awesomをはじめとしたアイコンライブラリがまとめられています。
  • React Loader Spinner：読み込みなどで処理が重くなってしまう場合にローディングの画面を表示させるライブラリです。

アニメーションに特化「Framer Motion」

https://www.framer.com/motion/

オープンソースのモーションライブラリです。ページが遷移するときのアニメーションなどを簡単に実装することができます。

特徴

高い柔軟性を備えており、CSSアニメーションを宣言的に記述することができます。

使い方

以下のコマンドでインストールできます。

npm install framer-motion

今回は例としてdivで定義された正方形をページのロード時に拡大させます。

create-react-appでReactのプロジェクトを作成している場合はそれぞれのファイルに以下のソースコードを記述してください。

App.css

.sample {
  background-color: blue;
  width: 100px;
  height: 100px;
  margin: 300px auto;
}


App.js

import React from 'react';
import { motion } from "framer-motion"
import './App.css';

function App() {
  return (
    <div className='App'>
      <motion.div className="sample" animate={{ scale: 2 }} transition={{ duration: 0.5 }} />
   </div>
  );
}

export default App;

これらを記述すると、ブラウザでページをロードしたときに青色の正方形が拡大されるアニメーションが実装されていることが分かります。

他のアニメーション系ライブラリ

  • React-Lottie：WebだけでなくiOSやAndroidなどのネイティブアプリにも対応しているライブラリです。LotteFilesというコミュニティサイトでは多くのアニメーションが公開されています。
  • React Animated Burgers：アニメーションで動くハンバーガーメニューを実装することのできるライブラリです。
  • React Reveal：画面をスクロールしたときに動くアニメーションを実装できるライブラリです。スライドアニメーションも作成することができます。
  • react beautiful dnd：ドラッグ&ドロップをしたときの動作を実装することのできるライブラリです。サンプルも豊富でこちらもおすすめできるライブラリです。

まとめ

今回、おすすめのライブラリである「Material-UI」「Font Awesome React」「Framer Motion」をご紹介させていただきました！

是非、ご自分のアプリケーションにも組み込んで使ってみてくださいね。