MUI v6, v7 が2024年にリリースされるので新機能を調べてみた

2024/02/16（金） 19:00〜 React LT会で発表したスライドです。
https://twitter.com/@semigura

Transcript

1. semigura @ 株式会社Gaji-Labo 2024/02/16 React LT会 MUI v6, v7 が2024年にリリースされるので 新機能を調べてみた 1
2. 自己紹介 株式会社Gaji-Labo フロントエンドエンジニア React + TypeScript + Next.js + MUI デザイナーと連携しながら Presentational Component を書く日々 猫と音楽が好き 最近は Astro に興味あり 石垣祥太郎 ＠semigura 2
3. MUI v6, v7 の新機能を調べてみた 3 1. MUI の概要 - React用UIコンポーネントライブラリ - コンポーネントとスタイルシステムについて 2. MUI v6, v7 のリリース時期と新機能について - 2024 年の第 2 四半期、第 4 四半期にリリース予定
4. MUI とは？ 4 - React 用UIコンポーネントライブラリ - 旧 Material-UI - 正確には、「MUI」という UIツールスイートの中に 「Material UI」「Joy UI」 「Base UI」が含まれている - Material Design に準拠したUIの コンポーネントを導入するだけで 使える https://mui.com/
5. MUI とは？ 5 標準的なコンポーネントが網羅されている - Inputs - Button, Text Field など - Data display - Typography, Icons など - Feedback - Alert, Progress など （ユーザー入力を受けて表示するコンポーネント） - Surface - Card, Accordion など （子コンポーネントを包含するコンポーネント）
6. MUI とは？ 6 標準的なコンポーネントが網羅されている - Navigation - Link, Pagination など - Layout - Box, Grid, Stack など - Lab - Timeline など（まだ試験運用中のコンポーネント） - Utils - CSS Baseline, No SSR など
7. MUI とは？ 7 スタイリング方法は大きく分けて3つ - ThemeProvider + createTheme - styled() - sx props
8. MUI とは？ 8 ThemeProvider + createTheme import * as React from 'react'; import { red } from '@mui/material/colors'; import { ThemeProvider, createTheme } from '@mui/material/styles'; const theme = createTheme({ palette: { primary: { main: red[500], }, }, }); function App() { return <ThemeProvider theme={theme}>...</ThemeProvider>; }
9. MUI とは？ 9 styled() import * as React from 'react'; import { styled } from '@mui/system'; const MyComponent = styled('div')({ color: 'darkslategray', backgroundColor: 'aliceblue', padding: 8, borderRadius: 4, }); export default function BasicUsage() { return <MyComponent>Styled div</MyComponent>; }
10. MUI とは？ 10 sx props <ThemeProvider theme={theme}> <Box sx={{ color: 'text.secondary' }}>Sessions</Box> <Box sx={{ color: 'text.primary', fontSize: 34, fontWeight: 'medium' }}> 98.3 K </Box> <Box sx={{ color: 'text.secondary', display: 'inline', fontSize: 14 }}> vs. last week </Box> </ThemeProvider>
11. MUI の使い勝手について 11 - 機能的には文句なし - 充実したコンポーネント - ドキュメントも豊富 - スタイリングは工夫が必要 - 記法が複数あるので「この記法で実装する」という意思決定が必要 - MUI にスタイルシステムが内包されているので依存度が高い - 外部CSSライブラリも併用可 - 動的に style 要素が生成されているのでパフォーマンスに難あり - => v6 でゼロランタイムCSS採用
12. MUI v6, v7 のリリース時期について 12 リリーススケジュール - 最新版は2021年9月にリリースされた v5 - 2024年中に v6 と v7 のリリースが予定されている
13. MUI v6, v7 のリリース時期について 13 なぜ v6 と v7 が短いスパンでのリリースになった？ - → 小規模なリリースをより頻繁に行う方針にシフトした - v4 => v5 への移行コストの高さが一因
14. MUI v6, v7 のリリース時期について 14 > One of the biggest lessons we learned during the v4 to v5 cycle is that smaller major releases with fewer breaking changes are the way to go. Many developers expressed how frustrating it was to migrate to v5 when it shipped in late 2021, and we can definitely empathize! We want to make sure that never happens again. That means you can expect more gradual updates spread out across two major releases in 2024. https://mui.com/blog/2023-material-ui-v6-and-beyond/ v4 => v5 への移行コストの高さは公式でも言及されています > 多くの開発者が v5 移行にフラストレーションを感じていた 個人的にも辛い体験が…… - パッケージ名が @material-ui => @mui に変わったので単純なアップデートで対応できない - 旧 @material-ui と @mui が同居していると動的に生成される style 要素で旧スタイルが優先されて しまう
15. MUI v6, v7 の新機能について 15 https://mui.com/blog/2023-material-ui-v6-and-beyond/
16. MUI v6 の新機能について 16 CSSのゼロランタイム化 https://github.com/mui/material-ui/issues/38137
17. MUI v6 の新機能について 17 CSSのゼロランタイム化に伴う styled() 記法の変化 https://github.com/mui/material-ui/issues/38137 const Component = styled('div')({ color: "black", variants: { size: { small: { fontSize: '0.9rem', margin: 10 }, medium: { fontSize: '1rem', margin: 15 }, large: { fontSize: '1.2rem', margin: 20 }, } }, defaultVariants: { size: "medium" } }) import * as React from 'react'; import { styled } from '@mui/system'; const MyComponent = styled('div')({ color: 'darkslategray', backgroundColor: 'aliceblue', padding: 8, borderRadius: 4, }); export default function BasicUsage() { return <MyComponent>Styled div</MyComponent>; } 古 新
18. MUI v6 の新機能について 18 Next.js サポートの向上 https://github.com/mui/material-ui/issues/34905
19. MUI v6 の新機能について 19 React Server Component のサポート https://github.com/mui/material-ui/issues/35993
20. MUI v6 の新機能について 20 https://github.com/mui/material-ui/milestone/42
21. MUI v6, v7 の新機能について 21 https://mui.com/blog/2023-material-ui-v6-and-beyond/
22. MUI v7 の新機能について 22 https://mui.com/blog/2023-material-ui-v6-and-beyond/
23. MUI v6, v7 のリリースについて 23 気になるところ - 移行コストはどれくらい？ - 旧 styled() と新 styled() の記法は同居できる？ - Material 3 と Material Design の見た目は同居できる？ => まだわからない 2024 年の第 2 四半期に詳細なアナウンスがある予定 個人的には…後方互換性があるとありがたい パッケージ名の変更 @material-ui => @mui のような大規模変更は避けてほしい…
24. 24 まとめ 1. MUI の概要 2. MUI v6, v7 のリリース時期と新機能について - 2024 年の第 2 四半期、第 4 四半期にリリース予定 - v6 はゼロランタイムCSSを中心にNext.js サポート向上や パフォーマンス向上など - v7 は Material 3 のサポートが中心 - 移行コストに関してはまだ不明
25. 会社紹介 プロダクトの課題を一緒に解決します。 最適な技術と、適切な手段で。 Gaji-Laboは、スタートアップのプロダクト開発や新 規事業チームの成長支援の会社です。 フロントエンド開発やUIデザインなどの専門技術の 提供を軸に、成長支援のためのチームワークの提 供を一番大切にしています。 フロントエンド開発 UIデザイン / 情報設計 チーム / プロセス支援
26. 26 フロントエンド開発者と UI デザイナーが チームメンバーとして参画するスタートアップ支援の会社で す。 少しでも興味を持っていただけましたら、気軽にお問い合わせください。 お仕事のご依頼・ご相談 採用に関するお問い合わせ サービス案内ページ https://www.gaji.jp/services 採用情報ページ https://www.gaji.jp/recruit
27. 参考URL 27 • MUI 公式サイト： https://mui.com/ • Material-UI v6: Milestone：https://github.com/mui/material-ui/milestone/42 • The road to Material UI v6 and beyond - MUI: https://mui.com/blog/2023-material-ui-v6-and-beyond/