ReactのUIフレームワーク（コンポーネントライブラリ）の選定

[IshimotoTakara]

コンポーネントライブラリを使用するメリット

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

デメリット

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

MUIがかなり洗練されているが、学習コストは高め

求める UI と、ライブラリの特徴を考えながら選定する必要がある。

[IshimotoTakara]

MUI

Reactで最も使われているコンポーネントライブラリ 世界で最も広範なUIキットの1つであるGoogleのマテリアルデザインUIに基づいて構築されている。 UI を構築するための Material デフォルトでも十分綺麗なデザインで、ボタンを押すと波打つエフェクトが出たりと洒落ている。 簡単にテーマを作成出来るのでカスタマイズ性も十分だし、ボタンやツールチップだけ使うという使い方も出来る。 コンポーネントの名前が少し分かりづらかったり、サンプルが複雑（最終的に出力されるHtmlコードがかなり分かりづらい）だったりと学習コストは高い

• 公式サイト https://mui.com/

• Demo https://amateur-engineer.com/react-material-ui/

• v5

  • v5 でコンポーネントのカスタマイズをよりやりやすくするような新機能が取り入れられた

  • プロダクト

    • MUI Core：すぐに使用できる基本コンポーネント群 + 永久に無料で使えるもの
    • MUI X：より複雑なユースケース向けの高度なコンポーネント群 + 有料部分も含むもの
    • Templates：コミュニティによって開発された、MUI を使用したテンプレート

  • v4→v5でパッケージ名やインストール方法が変更

    • パッケージ名 パッケージ名が変更になっている分、v4 と v5 を共存させることもできそう

      @material-ui/core -> @mui/material
      @material-ui/system -> @mui/system
      @material-ui/unstyled -> @mui/core
      @material-ui/styles -> @mui/styles
      @material-ui/icons -> @mui/icons-material
      @material-ui/lab -> @mui/lab
      @material-ui/types -> @mui/types
      @material-ui/styled-engine -> @mui/styled-engine
      @material-ui/styled-engine-sc ->@mui/styled-engine-sc
      @material-ui/private-theming -> @mui/private-theming
      @material-ui/codemod -> @mui/codemod
      @material-ui/docs -> @mui/docs
      @material-ui/envinfo -> @mui/envinfo

    • インストール方法

      • v5 ではデザインシステムの実体であるスタイリングソリューションが変更され、emotionかstyled-componentsを使うようになった。

        • React：17.0.0 以上
        • react-dom：17.0.0 以上

        // **emotion** を使う場合
        npm install @mui/material @emotion/react @emotion/styled
        or
        yarn add @mui/material @emotion/react @emotion/styled
        
        // **styled-components** を使う場合
        npm install @mui/material @mui/styled-engine-sc styled-components
        or
        yarn add @mui/material @mui/styled-engine-sc styled-components

      • v4

        • React：16.8.0 以上
        • react-dom：16.8.0 以上

        npm install @material-ui/core
        or
        yarn add @material-ui/core

  • スタイリングソリューション

    v4 ではスタイリングソリューションとして JSS が使われていが、v5 では emotion もしくは styled-components がデザインシステムの実体として使われることになった。

    v5 では、makeStylesは廃止され、styled()でのカスタマイズがメインになっていくとのこと。

    • v5：styled方式例

      import { VFC, ReactNode } from 'react';
      import { styled } from '@mui/material/styles';
      import Button from '@mui/material/Button';
      
      const CustomButton = styled(Button)({
        backgroundColor: 'red'
      });
      
      type Props = {
        children: ReactNode;
      }
      
      const StyledButton: VFC<Props> = ({ children }) => {
        return <CustomButton variant="contained">{children}</CustomButton>;
      };
      
      export default StyledButton;

    • v4：makeStyles方式例

      import { VFC, ReactNode } from 'react';
      import { makeStyles } from '@material-ui/core/styles';
      import Button from '@material-ui/core/Button';
      
      const useStyles = makeStyles({
          button: {
              backgroundColor: 'green'
          }
      });
      
      type Props = {
          children: ReactNode;
      }
      
      const HooksButton: VFC<Props> = ({ children }) => {
          const classes = useStyles();
      
          return (
              <Button variant="contained" className={classes.button}>
                  {children}
              </Button>
          );
      }
      
      export default HooksButton;

React Bootstrap

BootstrapのReact版。

Bootstrapは、WebサイトおよびWebアプリケーション向けの最も古くから人気のあるオープンソースCSSフレームワークの1つ。 Bootstrapは、モバイルファーストのWeb開発を優先する最初のCSSフレームワークの1つであり、開発者がレスポンシブルWebサイトを早く構築および拡張できるようにした。

• 公式サイト React-Bootstrap React-BootstrapはBootstrapJavascriptに取って代わり、JQueryのようなリソースを大量に消費する依存関係を捨てて、包括的で単純なReactコンポーネントライブラリを構築した。

• React-Bootstrap–コンポーネント Bootstrapを熟知していたら、React-Bootstrapの一般的な外観のコンポーネントライブラリにすぐに気付くでしょう。CSSの前身と同様に、React-Bootstrapは、モバイルアプリケーションよりもWebデザインを優先するUIコンポーネントに特化しています。

• React-Bootstrap–テーマ設定とカスタマイズ

• React-Bootstrapは非常に一般的で、スタイリングが最小限であるため、デザイナーは簡単に調整やカスタマイズができます。 Bootstrapで確定されたクラスとバリアントにより、CSSを使用してコンポーネントを簡単に選択およびカスタマイズできます。 Bootstrapの長い歴史と幅広い使用により、管理ダッシュボードから多目的Webサイト、eコマース、ランディングページなど、あらゆるものに対応する無料のプレミアムReact-Bootstrapテーマとテンプレートがたくさん見つかります。

Semantic UI React

Semantic UIReactは、React-Bootstrapの代替として人気。

• 公式サイト

  React-Bootstrap

• Semantic UI React – コンポーネント Semantic UI Reactには、WebサイトおよびWebアプリケーション用の幅広いUIコンポーネントがある。 コンポーネントは、ミニマムでシンプルなまま、Bootstrapよりもクリーンでモダンなスタイル。  Semantic UI Reactは、1,600を超える無料アイコンと7,864（有料）を含むFontAwesomeアイコンセットを使用している。
• Semantic UI React – テーマ設定とカスタマイズ
  Semantic UIは、コンポーネントが簡単にカスタマイズできる、直感的でわかりやすい命名規則を使用している。
  ドキュメントには、SemanticUIReactを使ったテーマ設定について一つ一つ説明したガイドも含まれている。
  Semantic UIには、MUIやReact-Bootstrapにあるようなテンプレートオプションがほとんどない。
• Semantic UI React – ドキュメント
  Semantic UI Reactの対話型のドキュメントには、コードを検査してコンポーネントを色々と試すためのCodeSandboxの事例が用意されている。
  ドキュメントでは、サンプル、コード、プロップを切り替えて、多角的にコンポーネントを可視化することもできる。