WASD Inc. で開発をしている Yutorin です。
弊社のデジちゃいむ で採用している MUI(旧Material-UI) をv4からv5に上げました。
今回、破壊的な変更が多く、システム全体で移行をするのに3週間弱ほどかかりました。
この記事ではどう移行したのか、移行中に困ったことなどを書いていきます。
MUI (Material-UI) とは？
GoogleのMaterial Designに沿って作られた、React向けのUIライブラリです。
見た目の良いコンポーネントが簡単に使えます。
何が変わったのか
MUIv5.0については、下記の公式の記事を参考にしてください。
主な変更としては、
- Material-UI から MUI に名前（サービス名、パッケージ名など）が変わった。
- Emotion でスタイリングするようになった。
- すべてのコンポーネントに
sxが追加された。 - theme や variant の拡張がしやすくなった。
- Unstyled components によって headless なコンポーネントが提供され始めた。（開発中）
ぐらいでしょうか。
Emotionにスタイリングエンジンを変えた事により、sx を使用してスタイルの注入がしやすくなったのが一番大きいと思います。
v4からあった Box のように、propsで display や margin などのスタイリングを注入できるようになったほか、普通のCSSスタイルだけでなく、疑似要素やメディアクエリ、型安全な子コンポーネントへの注入 がすべてのコンポーネントのpropsから使用できるようになりました。
個人的には、コンポーネント自体とそのスタイルが紐付いたおかげで、v4までのJSXとmakeStylesを行ったり来たりすることが無くなったことがとても嬉しいです。
どう変えたのか
下記の公式の記事も併せて参照してください。
現在、弊社では4つのWebサイトで使用しています。
一番規模の小さい、作成したばかりのサイトに導入しどんな感じかテストしてから、段々と規模の大きいサイトに導入していきました。
導入の際、公式から codemod が提供されており、自動的にライブラリの置き換えなど様々なアップデートが行われます・・・が、廃止された一部のpropsやmakeStylesなどは手動で置き換える必要がありました。
困ったこと
規模の小さい順に3つのWebサイトはどうにか人力で移行完了したのですが、一番大きいサイトでは100件弱のmakeStylesを使ったコンポーネントがあり、少しづつsxへと移行したりstyledに置き換えをしていたのですが、1/3が終わった辺りで廃止予定ではあるものの、makeStylesが含まれる @mui/styles を導入して導入完了を優先しました。
その他変わったこと
- propsでの
marginやpaddingなどのSpacingプロパティは今までnumberで1だと1pxだったのが、8倍した値が使われるようになったので大きくなったコンポーネントがあった。theme.spacing()も今までは数値を返していたが、"px"を返すようになった。
@mui/labにLoadingButtonが追加されてloadingの状態をボタンに持たせやすくなった。Pickersもlab入りした。- Notistack などのMUIに依存したライブラリを導入している場合、v5対応版にアップデートしておく。
おわりに
引っかかったところなど多々ありましたが、無事MUIv5の導入を完了しました。
導入してみると予想以上に問題が出てきたりなどで時間がかかったり、他の平行して行っていた開発とも衝突したため大変でした。
反省点としては、ついでにリファクタリングしようと思う誘惑に負けたり、makeStylesを全部置き換えようとして予定以上に時間を使ってしまっていました点があります。
ですので、次回からはリリースを優先する方をちゃんと意識すべきと肝に銘じていきたいですね。
WASD TECH BLOG では主に React、TypeScript、GraphQL に関する記事を定期的に発信していきます。
よろしければ他の記事や、 もお願いします。