MUI v6について内容おさらい＆最新情報を追ってみる

こんにちは、Gaji-Labo フロントエンドエンジニアの石垣です。

今回は、2024年にリリースが予定されている React 用UIコンポーネントライブラリの MUI バージョン6について書いてみます。

2024年1月のアナウンスではMUI v6は2024年第2四半期のリリースとされていましたが、2024年8月現在も開発進行中で予定より少し遅れてはいるようです。
しかし着実に開発が進んでいるので、年内のリリースを見越して現段階での最新情報を含めた内容おさらいをしてみたいと思います。

また、今回の記事は、2024年2月に発表した「MUI v6, v7 が2024年にリリースされるので新機能を調べてみた」のスライドをもとに、そこから更新された情報もあるため2024年8月時点での最新情報を含んだ形で執筆しています。

スライドは以下からご覧いただけます。

MUIに関する他の記事はこちらからご覧ください。

シリーズ「Material-UIを実践で使ってみた」まとめ ++ Gaji-Laboブログ

MUI v6, v7 のリリーススケジュール

公式ブログで2024年1月に行われたアナウンスでは、MUI v6は2024年第2四半期に、MUI v7は第4四半期にリリースされる予定となっていました。

GitHub Milestones を見ると2024年8月現在で v6 の進捗は7割ほど進んでいるようです。

スケジュールは暫定的なものであり確定ではないという公式のコメントがありますので、リリース時期は見直される可能性があります。

なぜ短いスパンでのリリースになった？

MUI v5 は Material-UI v4 から2年以上の開発期間を経てリリースされた大規模なアップデートとなり、結果的に移行コストが高くなっていました。
これを受けて、MUI チームは移行コストを抑えるために、より頻繁に小規模なリリースを行う方針に変更したとのことです。

公式ブログには以下のように記載されています。

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.

https://mui.com/blog/2023-material-ui-v6-and-beyond/

個人的にも Material-UI v4 から MUI v5 のアップデートについては年単位での改修作業になり、非常にコストが高く大変だったという印象です……。

MUI v6の最大の新機能 Pigment CSS

MUI v6の最大の新機能はゼロランタイムCSS-in-JSパッケージである「Pigment CSS」の導入です。

Pigment CSSは「Linaria」というゼロランタイムCSS-in-JSライブラリをベースにした MUI 独自のスタイリングシステムで、ゼロランタイムのため以前のスタイリングシステムにあった className が重複する問題などを防ぎ、パフォーマンスも向上しています。
また、React Server Components（RSC）をサポートしているのも特徴です。

記法としては emotion を採用していた MUI v5 と同じく styled() や css() の記法をそのまま使用でき、sx prop も引き続き使用できます。
パッケージは @pigment-css として提供されており MUI とは独立した開発が行われています。

v6 ではゼロランタイムスタイリングエンジンの導入に焦点が当てられており、デザインの更新などの新機能は v7 に持ち越されるようです。

MUIによる独自の実装のためPigment CSSの開発が長期スパンでどうなるかは未知数ですが、案件で Material-UI v4 を使っていた際に、ゼロランタイムではないことで className の重複によるスタイル上書きの問題が発生した経験があるため、ゼロランタイムCSS-in-JSの導入はとても嬉しいところです。

他に大きな変更としては主に以下が含まれています。

• IEサポートの完全終了
• React 19 のサポート対応、React 17 のサポート終了（議論中）
• MUI X v7 は Material-UI のアップデートに追従するか（議論中）

MUI v6の進捗状況は GitHub Milestones で確認できます。

Material UI: v6 Milestone · GitHub

おわりに

今回は、2024年にリリース予定の MUI v6 について、新機能や最新の情報をまとめてみました。
次回以降で Pigment CSS についての掘り下げた記事なども書ければと思います。

Gaji-Labo は MUI や shadcn/ui などのUIコンポーネントライブラリの実践的な知見を持つメンバーが在籍しています。
今すぐ転職をお考えでなくとも、カジュアル面談で気軽に Gaji-Labo メンバーと技術の話をしてみませんか？
興味のある方はぜひ各種採用サイトをチェックしてみてください！

参考記事

• The road to Material UI v6 and beyond – MUI
• Introducing Pigment CSS: the next generation of CSS-in-JS – MUI