MUI v4 から v5 の移行に役立つツール codemods

こんにちは、 Gaji-Labo アシスタントエンジニアの石垣です。

今回は、 React + MUI のプロジェクトで、 MUI のバージョンを4から5へアップグレードする時に使える移行支援ツール（codemods）をご紹介します。

codemods について

MUI のバージョン5は2021年9月に正式リリースされましたが、その際に多くの破壊的な変更が行われました。詳しくは弊社ブログで以前書いた記事もご覧ください。

そのため、アップグレードには import の置き換えや props の変更など、コンポーネントのコードを書き換える必要があります。しかし、この作業を1つ1つ行うのはコストがかかります。

そこでそういった作業の手間を軽減するために、公式の移行ツール（ codemods と呼ばれています）が用意されています。これは、 v5 用にコードを自動的に最適化するもので、少ない労力で移行することができます。

多くの codemod がありますが（全ての codemods のリストは https://github.com/mui/material-ui/blob/master/packages/mui-codemod/README.md に記載されています)、 v4から v5 への移行では、preset-safe という codemod を使うことでほとんどの移行作業に対応が可能です。

preset-safe を使う

preset-safe はいくつかの codemod をバンドルしたものです。含まれる codemods は公式リストに記載されています。

https://github.com/mui/material-ui/blob/master/packages/mui-codemod/README.md#-preset-safe

以下のように使用します。

$ npx @mui/codemod v5.0.0/preset-safe <path|folder>

この codemods は、 import や deprecated な props など、 v5 への移行に必要なほとんど書き換えを自動的に適用してくれます。

preset-safe に含まれない v5 への移行用 codemods

上記の preset-safe には含まれていない codemods もいくつかあるため紹介します。

component-rename-prop

コンポーネントの props をリネームするための codemod です。

npx @mui/codemod v5.0.0/component-rename-prop <path> -- --component=Grid --from=prop --to=newProp

date-pickers-moved-to-x

Date Picker コンポーネントのインポートを @mui/lab から @mui/x-date-pickers @mui/x-date-pickers-pro に置き換える codemod です。

npx @mui/codemod v5.0.0/date-pickers-moved-to-x <path>

jss-to-styled

makeStyles と withStyles で記述された JSS を styled API で置き換える codemod です。

以前の記事でもご紹介しましたが、 v5 では makeStyles と withStyles は非推奨となり、代わりに styled API が使われるようになりました。

preset-safe に含まれない codemod の中で最も使用頻度の高いものだと思います。

npx @mui/codemod v5.0.0/jss-to-styled <path>

jss-to-tss-react

makeStyles と withStyles で記述された JSS を tss-react API で置き換える codemod です。

TSS は MUI と統合された TypeScript のスタイル記法で、 makeStyles や withStyles の記法をそのまま扱えるため、同じ記法を使い続けたい場合にお勧めの選択肢です。

npx @mui/codemod v5.0.0/jss-to-tss-react <path>

link-underline-hover

Linkコンポーネントに underline="hover" を追加します。
v5 のデフォルトの underline prop は always（常に表示）なので、 v4 と同じ表示にしたい場合はこちらを適用します。

npx @mui/codemod v5.0.0/link-underline-hover <path>

optimal-imports

import を以下のように変更します。

-import red from '@material-ui/core/colors/red';
-import createTheme from '@material-ui/core/styles/createTheme';
+import { red } from '@material-ui/core/colors';
+import { createTheme } from '@material-ui/core/styles';

npx @mui/codemod v5.0.0/optimal-imports <path>

top-level-imports

サブモジュールから import されるコンポーネントを、ルートから import するように変更します。

-import List from '@mui/material/List';
-import Grid from '@mui/material/Grid';
+import { List, Grid } from '@mui/material';

npx @mui/codemod v5.0.0/top-level-imports <path>

variant-prop

TextField, Select, FormControl コンポーネントに、variant prop が渡されていない場合に variant="standard" を追加します。こちらも v4 と同じ見た目にする際に必要な codemod です。

npx @mui/codemod v5.0.0/variant-prop <path>

おわりに

今回は、 React + MUI のプロジェクトで、MUI のバージョンを4から5へアップグレードする時に使える移行支援ツール（codemods）をご紹介しました。

最終的な移行作業は一つ一つの確認が必要ですが、今回ご紹介したようなツールをうまく活用することで作業コストを削減していきたいですね。

Material-UIの実践で得た知見をシリーズ記事として集めてみました。Material-UIの開発に興味がある方、Material-UIをどう使ったらいいかの情報が知りたい方、実践でのポイントを吸収したいと思っている方などにおすすめの内容です。