Open IshimotoTakara opened 2 years ago
Reactで最も使われているコンポーネントライブラリ 世界で最も広範なUIキットの1つであるGoogleのマテリアルデザインUIに基づいて構築されている。 UI を構築するための Material デフォルトでも十分綺麗なデザインで、ボタンを押すと波打つエフェクトが出たりと洒落ている。 簡単にテーマを作成出来るのでカスタマイズ性も十分だし、ボタンやツールチップだけ使うという使い方も出来る。 コンポーネントの名前が少し分かりづらかったり、サンプルが複雑(最終的に出力されるHtmlコードがかなり分かりづらい)だったりと学習コストは高い
公式サイト https://mui.com/
v5
v5 でコンポーネントのカスタマイズをよりやりやすくするような新機能が取り入れられた
プロダクト
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を使うようになった。
// **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
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;
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 UIReactは、React-Bootstrapの代替として人気。
公式サイト
コンポーネントライブラリを使用するメリット
すでに完成された美しいデザインのコンポーネントを利用できることにあります。
デメリット
ライブラリの使い方を覚えなくてはならないという点や、外部のコンポーネントを使用するため最終的なコードが読みづらくなることなど。
MUIがかなり洗練されているが、学習コストは高め
求める UI と、ライブラリの特徴を考えながら選定する必要がある。