株式会社ゆめみの 23 卒 Advent Calendar 2023の6日目の内容です。
実務で 0→1 開発をする機会があり、予算が少ない && 開発期間が短い(半年?)という背景もあり開発速度を意識した技術選定をする必要がありました。
TL;DR
- スタイリングが容易なUIコンポーネントライブラリ！
- コンポーネントのバリエーションが豊富で困らなかった！
- mantine/{hooks, packages}の使い勝手が良かった！
- v7 系は Emotion が取り除かれたので使い勝手がわからない！
- でも、theme のツラみはある程度解消されてそうだった！
Mantine UI とは
Mantine is a React components library focused on providing great user and developer experience
React で使用出来るコンポーネントライブラリです。
コンポーネントだけでは無く、オリジナルのカスタム hooks ライブラリや form ライブラリなども提供しています。
各ブラウザのサポート状況
- Chromium browsers 108+ – Chrome, Edge, Chrome for Android, etc.
- Firefox 101+
- Safari 15.4+
- IE (any version) is not supported
良かったところ
- Emotion が内蔵されているのでネストされたスタイリングなども容易に出来た。(v6 のみ)
- デザインのベースを Mantine UI のコンポーネントにして頂いてたので、最大限使うことができて実装のコストが減った
- レスポンシブ対応がシンプル
- スケルトンローディングの実装が簡単
- mantine/{hooks, packages} で痒い所に手が届く
Emotion が内蔵されているのでネストされたスタイリングなども容易に出来た。(v6 のみ)
v6 系では内部的に Emotion を使用していることから inline で柔軟にスタイリング出来ました。
// cite: https://mantine.dev/guides/6x-to-7x/#sx-prop
function Demo() {
return <Box sx={{ "&:hover": { background: "red" } }} />;
}
デザインのベースを Mantine UI コンポーネントにして頂いてたので、最大限使うことができて実装のコストが減った
タイトルの通りですね。
共通で使われる Atom / Molecules レベルの UI コンポーネントを極力実装しないことで、開発速度が上がりました。
Mantine UI の Theme 機能でコンポーネントごとの defaultProps や variants を定義することが出来たお陰もあり、効率良く開発出来ました。
コンポーネントごとの Theme 設定
const components: MantineThemeOverride["components"] = {
Text: {
defaultProps: {
variant: "body-medium",
} as Partial<TextProps>,
variants: typographyVariants,
},
// MEMO: Skeleton Component では読み上げをスキップする
Skeleton: {
defaultProps: {
"aria-hidden": true,
},
},
};
Typography に関する Variants の Theme 設定
export const typographyVariants: MantineThemeComponents["Text"]["variants"] = {
"heading-medium": (theme) => ({
root: {
fontSize: 20,
[theme.fn.largerThan("lg")]: {
fontSize: 24,
},
},
}),
"body-medium": (theme) => ({
root: {
fontSize: 16,
[theme.fn.largerThan("lg")]: {
fontSize: 18,
},
},
}),
};
コンポーネントで Typography を変更する
<Text variant="heading-medium">Lorem Ipsum</Text>
レスポンシブ対応がシンプル
プロパティにもよりますが、オブジェクト形式で値を渡すことでブレイクポイントごとに値を切り替えてくれます。
// cite: https://mantine.dev/core/flex/
function Demo() {
return (
<Flex
direction={{ base: "column", sm: "row" }}
gap={{ base: "sm", sm: "lg" }}
justify={{ sm: "center" }}
>
<Button>Button 1</Button>
<Button>Button 2</Button>
<Button>Button 3</Button>
</Flex>
);
}
スケルトンローディングの実装が簡単
通常の場合スケルトンローディングを実装するとなると、レイアウトや行間などを意識して、どの程度シンプルにするかなど考慮すべき事項が多いと思います。
今回は Mantine UI の Skeleton コンポーネントを使用し工数をかけずに実装出来ました。
<Stack gap="lg">
<Skeleton>
<複雑コンポーネントA />
</Skeleton>
<Skeleton>
<複雑コンポーネントB />
</Skeleton>
</Stack>
mantine/{hooks, packages} で痒い所に手が届く
クリップボードを使いたい！ → import { useClipboard } from "@mantine/hooks";
Intersection Observer を使いたい！ → import { useIntersection } from '@mantine/hooks';
ユーザーにトーストを表示したい！ → import { notifications } from "@mantine/notifications";
カルーセルを表示したい！ → import { Carousel } from '@mantine/carousel';
苦労したところ
- Theme の Variants を設定しても補完が効かない
- Theme の colors を設定するためには 10 段階の深みのある色を用意する必要がある
Theme の Variants を設定しても補完が効かない
Text コンポーネントには Typography に関する Variants を設定しているにもかかわらず標準で容易されている variant だけが補完されます。
Theme の colors を設定するためには 10 段階の深みのある色を用意する必要がある
brand を 1 色設定したいだけなのにたくさん定義する必要がありました。
// cite: https://v6.mantine.dev/theming/colors/#primary-color
colors: {
brand: ['#F0BBDD', '#ED9BCF', '#EC7CC3', '#ED5DB8', '#F13EAF', '#F71FA7', '#FF00A1', '#E00890', '#C50E82', '#AD1374'],
},
その為 theme.other に colors を定義し、型定義ファイルを作成し使用していました。
まとめ
- スタイリングが容易なUIコンポーネントライブラリ！
- コンポーネントのバリエーションが豊富で困らなかった！
-
mantine/{hooks, packages}の使い勝手が良かった！ - v7 系は Emotion が取り除かれたので使い勝手がわからない！
- でも、theme のツラみはある程度解消されてそうだった！
感想
今までコンポーネントライブラリとして MUI や Chakra UI を使用してきましたが、Mantine UI を触ることが出来て良かったです。
機会があれば比較の記事を書きたいと思っています。
( shadcn/ui も気になっているので使ってからかな…）
Discussion