MUI v4 から v5 にアップグレードする際に重点的に確認したい点

こんにちは、 Gaji-Labo アシスタントエンジニアの石垣です。
以前の記事では MUI v4 と v5 の変更点とアップグレードに役立つ codemods についてまとめました。
今回は実際に MUI v4 から v5 にアップグレードする際の作業手順と重点的に確認したい点について書いてみたいと思います。

MUIを4から5へアップグレードする

1. MUI v5 を導入する

MUI v5 は v4 とパッケージが異なるため、新たに導入を行う必要があります。

$ yarn add @mui/material @emotion/react @emotion/styled

2. import を差し替える

MUI v4 から import していたコンポーネントやスタイルシステム、ユーティリティ等を逐一 v5 に差し替える必要があります。
手動での置き換えはコストが掛かるので、codemods を使うのがお勧めです。

https://www.gaji.jp/blog/2022/07/12/10437/

3. スタイルの差分を確認する

主に以下の2つの観点からチェックします。

MUI 自体のコンポーネントアップデートによる差分の確認

Select など、 v4 と v5 でスタイルの変更が入っているコンポーネントがあります。
これを既存と同じになるようにスタイルを上書きするか、アップデートするかを選択する必要があります。
既存に合わせる場合は makeStyles や styled で上書きします。
他、スタイルの差分ではありませんが ListItem 等 v4 に存在していた props が v5 では非推奨になっているコンポーネントがあるため、それを修正する必要があります。

v4 と v5 の共存によるスタイル崩れの確認

重点的に見るべきポイントです。
MUI v5 と v4 のコンポーネントが同画面に共存しており、なおかつ makeStyles でスタイルを上書きしている際、CSSの詳細度が入れ替わり意図したスタイルが適用されないという問題があります。
この問題は v5 に完全移行する(同画面内に v4 と v5 の style 要素が同時に生成されることがない)と解消されます。

以上2つの観点からコンポーネントを一つ一つ確認していきます。
Storybook でコンポーネント開発をしている場合はまず全てのコンポーネントを v5 に移行した後 Storybook 上で全てのコンポーネントの差分を確認し、その後ローカルの画面の表示を確認していく方法で進めるのが効率的かと思います。
スタイルの差分を逐一確認するのは目視ではコストが高すぎるので、 Chromatic のような VRT テストを導入するのが良さそうです。

おわりに

今回は MUI v4 から v5 にアップグレードする際の作業手順について書きました。
MUI のアップグレードを行う際の参考にしていただけると幸いです。

Gaji-Laboでは、React経験が豊富なフロントエンドエンジニアを募集しています

弊社ではReactの知見で事業作りに貢献したいフロントエンドエンジニアを募集しています。大きな制作会社や事業会社とはひと味もふた味も違うGaji-Laboを味わいに来ませんか?

もちろん、一緒にお仕事をしてくださるパートナーさんも随時募集中です。まずはお気軽に声をかけてください。お仕事お問い合わせや採用への応募、共に大歓迎です!

求人応募してみる!

タグ


投稿者 Ishigaki Shotaro

アシスタントエンジニアとしてHTML/CSS/JavaScriptの実装やRailsの組み込み、スタイルガイドの構築などを担当しています。 業務の中でさまざまな学びを吸収しながら、文書構造やアクセシビリティに目を向けたマークアップの学習やJavaScriptの学習などを行っています。チームに貢献できるエンジニアとなるために日々奮闘中です。