Webプログラミング

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で最も使われているコンポーネントライブラリでしょう。

公式ドキュメント
インストール方法

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を上回るスター数です。

公式ドキュメント
インストール方法

yarn add antd

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

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

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

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

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

 

サンプル

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

 

React Bootstrap

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

公式ドキュメント
インストール方法

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>

 

Semantic UI React

CSSライブラリとして有名なSemantic UIをReactで使用できるようにしたコンポーネントライブラリです。まだ執筆時点でバージョン0.88と開発中のようですが、これからどんどん伸びてきそうです。

公式ドキュメント
インストール方法

yarn add semantic-ui-react semantic-ui-css

またこのようにCSSをimportする必要があります。

import 'semantic-ui-css/semantic.min.css'

 

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

私はSemantic UIを使ったことがなかったのですが、それでも簡単に使うことが出来ました。ドキュメントが見やすく、デザイン例も示されているため学習コストもそこまで高くないと思われます。

ただしテーマのカスタマイズはAnt Designと同じように追加のライブラリのインストールや設定が必要なため、あまり便利ではありません。

サンプル

サンプルが見やすかったため、比較的簡単に書くことが出来ました。

 

それ以外のコンポーネントライブラリ

今回は紹介しませんでしたが、他にもたくさんのコンポーネントライブラリがあります。特にモバイル向けに特化したOnsen UIなどは注目しています。

 

まとめ

今回はReactのコンポーネントライブラリを紹介しました。また実際にコードを書いて使用感を確かめてみました。

私のおすすめ度としてはMaterial UI > Semantic UI > React Bootstrap > Ant Designという感じです。

今のところはMaterial UIが一番洗練されている感じがしますが、学習コストは高めです。

Semantic UIは使いやすかったですし、検索してみると日本でも使っている方がちらほらいるので今後の展開も期待できます。

React Bootstrapは良くも悪くも普通です。今までBootstrapを使っていた方は学習コストがかからないため非常に良い選択肢になると思います。Sassを使えばカスタマイズも簡単に出来ます。

Ant Design はドキュメントが見づらく、やや使いづらい感じがしました。

 

===

当サイトでは引き続きMaterial UIを使っていく予定です。

この記事は参考になりましたか?

下記のボタンよりアンケートにご協力お願いします。

-Webプログラミング
-

© 2020 エンジニアの本棚