Reactでのコンポーネントライブラリをまとめる

Reactでのスタイリングの方法は大きく分けるとCSSでスタイリングする方法と、コンポーネントライブラリを使用する方法の2つがあります。

前回はCSSでのスタイリングをまとめましたので、今回はコンポーネントライブラリによるデザインを解説します。

ポイント

当記事ではcreate-react-app環境を想定します。

CSSでのスタイリング(前回の記事)

CSSでのスタイリングのメリットは自由にデザイン出来ることや、従来のデザインのやり方がそのまま使えることにあります。

デメリットは細かくスタイリングしていかなくてはならないので、技術や労力が必要になることです。

主に以下のような方法があります。

インラインで書く
普通にCSSをimportする
CSSをモジュール化する
Sass を使用する
外部のライブラリを使用する：styled components

こちらは前回の記事で紹介しました。

: ReactでのCSSの使いかたをまとめる
Reactでのスタイリングの方法はかなり色々な方法があり、私自身いまいち整理できていなかったため、まとめてみます。大きく分けるとCSSでスタイリングする方法と、コンポーネントライブラリを使用する方法 ...
続きを見る

コンポーネントライブラリによるデザイン

コンポーネントライブラリを使用するメリットは、すでに完成された美しいデザインのコンポーネントを利用できることにあります。

デメリットはライブラリの使い方を覚えなくてはならないという点や、外部のコンポーネントを使用するため最終的なコードが読みづらくなることなどがあります。

メジャーなコンポーネントライブラリは以下のようなものがあります。

Material UI (Githubスター数：54k)
Ant-design (Githubスター数：56k)
React Bootstrap (Githubスター数：17k)
Semantic UI React (Githubスター数：11k)

今回はこれらの特徴をまとめていきます。

Material UI

Googleが提唱するMaterial DesignをReactで実装するためのコンポーネントライブラリです。おそらくReactで最も使われているコンポーネントライブラリでしょう。

公式ドキュメント

material-ui.com

Material-UI: A popular React UI framework

https://material-ui.com

インストール方法

yarn add @material-ui/core @material-ui/icons

特徴

デザイン
使いやすさ・学習コスト
カスタマイズ性
総合オススメ度

デフォルトでも十分綺麗なデザインで、ボタンを押すと波打つエフェクトが出たり、とてもオシャレです。

また簡単にテーマを作成出来るのでカスタマイズ性も十分ですし、もちろんボタンやツールチップだけ使うという使い方も出来ます。

ただし、学習コストは高いと思います。コンポーネントの名前が少し分かりづらかったり、サンプルが少し複雑だったりと困ることもあるかも知れません。

私が最初に一番困惑したのが、最終的に出力されるHtmlコードがかなり分かりづらかったことです。

変換されたHtmlコード

デザインがずれているときにChromeのツールで確認したいのですが、可読性が低いため調整がしづらかったです。

サンプル

Material UIでテーマのカスタマイズをせずにそのまま使うと以下のようになります。

色合いもいい感じですし、エフェクトも勝手に組み込まれているため十分綺麗な感じになります。

テーマの切り替えに関しては以下の記事にまとめてあります。

: Material-UIでテーマを切り替えられるようにする
Material UIで複数のテーマをユーザが切り替えられるようにします。完成図はこちら。リロードしてもテーマは維持されたままになります。 Contentsはじめに準備実装Materi ...
続きを見る

Ant Design

Alibaba製のコンポーネントライブラリで、プロダクト事例を見ると主に中国系のサービスで利用されているようです。GitHubスター数56kとMaterial UIを上回るスター数です。

公式ドキュメント

ant.design

Ant Design - A UI Design Language and React UI library

https://ant.design

インストール方法

yarn add antd

特徴

デザイン
使いやすさ・学習コスト
カスタマイズ性
総合オススメ度

デザインはシンプルでなんとな〜くBootstrapっぽい。使い方もBootstrapっぽいです。

使い勝手としては、ドキュメントや例が見づらいと私は感じました。テーマのカスタマイズは可能ですが、追加のライブラリをインストールしたりとやや面倒そうです。

また、ファイルサイズが大きく、最適化のためには追加の手順が必要になるようです。

加えてモバイル用は別のライブラリになっていたりと他のライブラリよりも色々面倒みたいですね。

サンプル

同じようにデフォルトのコンポーネントを使ってみました。

React Bootstrap

言わずと知れたCSSフレームワークのBootstrapをReactでも使用するためのComponentライブラリ。GitHubスター数約17kとそこそこ使われています。

公式ドキュメント

react-bootstrap.github.io

https://react-bootstrap.github.io

インストール方法

yarn add react-bootstrap bootstrap

index.jsに記載

import 'bootstrap/dist/css/bootstrap.min.css';

特徴

デザイン
使いやすさ・学習コスト
カスタマイズ性
総合オススメ度

基本的にはBootstrapの考え方が同じように使えるので、今までBootstrapを使っていた方は新しく覚える必要がないというのが最大の利点であると言えます。

カスタマイズもnode-sassを使えば非常に簡単です。例えば以下のように設定したscssファイルをimportすればprimaryカラーが変更できます。

$theme-colors: (
  "primary": red
);

@import "bootstrap/scss/bootstrap";

sassを使いたくない方はクラス名指定でスタイルを変更することも出来ます。

また出力されたコードも今までのBootstrapを使ったHtmlと同じになるため可読性も高くわかりやすかったです。

サンプル

Reactのコンポーネントの書き方をするだけで、中身はBootstrapそのまんまです。

ちなみにコードはこんな感じです。(抜粋)

<Row className="justify-content-md-center">
    <Col xs={10} className="mt-3">
      <Form>
        <Form.Group>
          <Form.Label>Add Todo</Form.Label>
          <Form.Control type="text" placeholder="Please Input Text" />
        </Form.Group>
        <Button variant="primary" type="submit">
          Submit
        </Button>
      </Form>
    </Col>