MUIからShadcnへの移行: 課題を乗り越える

あるUIライブラリから別のUIライブラリへの移行は、困難な作業になる場合があります。多くの開発者がバンドルサイズの最適化やデザインの一貫性の強化によってアプリケーションを改善する方法を探している現在、このトピックは特に関連性が高くなっています。

移行の道のり

私たちの移行では、バンドルサイズが大幅に減少し、テーマ設定に一貫性が生まれ、デザインシステムが統一されたことがわかりました。しかし、そのプロセスには課題もありました。移行中に直面した7つの落とし穴と、それぞれの対処法を紹介します。

落とし穴1: ダイアログのフォーカス動作の違い

MUIの Dialog コンポーネントは、レンダリングごとにフォーカスを強制的に取り戻すため、根本的な問題が隠れてしまうことがあります。対照的に、Radixの Dialog コンポーネントは自動的にフォーカスを管理しないため、これまでMUIが隠していたバグが明らかになります。非同期データに依存するフォームを持つダイアログがありました。MUIでは、最終的に入力フィールドにフォーカスが当たっていましたが、Radixでは、ダイアログのボディにフォーカスが留まりました。

修正: データが準備できた時点で最初の入力フィールドに確実にフォーカスが当たるよう、フォーム内に明示的なフォーカス管理を実装しました。これにより、どのコンポーネントがフォーカスを持っているかをより意識するようになり、良い結果をもたらしました。

落とし穴2: Drawerコンポーネントの不一致

MUIは、モバイルファーストのボトムシートを想定した Drawer コンポーネントを提供しています。しかし、アプリシェル内のサイドパネルには、Shadcnの Sheet コンポーネントの方が適しています。当初、私たちはdrawerを Drawerに移行しましたが、閉じる際にアニメーションの不具合が発生しました。

修正: 私たちは Sheetに切り替えることで、この問題をわずか数分で解決しました。既存のMUIの Drawerがある場合は、時間を節約するためにそれを Sheet にマッピングしてください。

落とし穴3: Selectコンポーネントのスクロール動作

私たちがRadixの Select を Dialogの内部に配置したとき、ドロップダウンリストはポータル内の document.bodyにレンダリングされました。祖先要素に transform や overflow: hiddenのような特定のCSSプロパティがある場合、リストだけでなくページ全体がスクロールされる問題が発生しました。

修正: 私たちは SelectContent コンポーネントの position を"popper"に調整し、ダイアログのラッパーに競合するCSSプロパティがないことを確認しました。これにより、スクロールの問題が解決しました。

落とし穴4: Selectコンポーネントの書き換え

また、非同期の読み込みや複数選択のオプションに react-select を使用していました。これをRadixの Select に置き換えるには、機能の違いから大幅な書き換えが必要でした。

修正: 私たちは、さまざまなユースケースに対応するために、Radixの <CxSelect /> コンポーネントと Popover をベースにしたカスタムの Command コンポーネントを構築しました。より複雑なシナリオでは、元の react-select の実装を維持しました。

落とし穴5: テーマトークンのマッピングの課題

MUIのテーマはJavaScriptオブジェクトを使用しますが、ShadcnのテーマはCSS変数に依存しています。これにより、テーマトークンの不一致が生じました。

修正: 包括的な監査を実施し、アプリケーション全体で一貫性を保つために、ハードコーディングされた値をShadcnのCSS変数に置き換えました。

落とし穴6: コンポーネントの所有権とカスタマイズ

Shadcn UIでは、開発者がプロジェクト内で直接コンポーネントを所有およびカスタマイズできます。これは従来のコンポーネントライブラリとは異なります。この変化により、考え方と開発手法を変える必要があります。

修正: この所有権モデルを受け入れるようにワークフローを適応させ、コンポーネントの実装とスタイリングをより詳細に制御できるようにしました。

落とし穴7: 依存関係の管理と競合

移行中、Radixの @radix-ui/react-primitive パッケージのサイレントアップデートに遭遇しました。これにより、 @mui/baseへの新たな依存関係が導入され、バージョンの競合によるビルドの失敗につながりました。

修正: 私たちは @radix-ui/react-primitive パッケージを特定のバージョンに固定し、すべてのMUIおよびShadcn UIのパッケージを調整するために、徹底的な依存関係のアップグレードを実行しました。

結論

課題はありましたが、MUIからShadcnへの移行には価値がありました。バンドルサイズの大幅な削減、テーマ設定の改善、統一されたデザインシステムを実現しました。

メリット

• バンドルサイズが減少し、パフォーマンスが向上する。
• デザインシステムが統一され、一貫性が強化される。
• CSS変数による明確なテーマ設定。

デメリット

• 複数の落とし穴がある複雑な移行プロセス。
• 特定のコンポーネントで大幅な書き換えが必要になった。
• 移行中の依存関係の管理の問題。

注意

この記事は教育目的で作成されています。記載されているプレースホルダーの値は、実装時に実際の値に置き換える必要があります。情報に頼る前に、必ず元の情報源で確認を行ってください。

よくある質問

• MUIからShadcnへ移行する主な利点は何ですか？ — 主な利点は、バンドルサイズの削減と、より一貫性のあるテーマ設定システムです。
• 移行時によくある落とし穴にはどのようなものがありますか？ — よくある落とし穴としては、フォーカス管理の問題、コンポーネントの不一致、依存関係の競合などが挙げられます。
• 移行プロセスをスムーズに進めるにはどうすればよいですか？ — 慎重な計画、徹底的なテスト、そして問題が発生するたびに各落とし穴に対処することで、移行をよりスムーズに進めることができます。
• MUIのDrawerとShadcnのSheetの違いは何ですか？ — MUIのDrawerはモバイルファーストのボトムシート向けに設計されていますが、ShadcnのSheetはアプリシェル内のサイドパネルを想定しています。
• UIコンポーネントにおいてフォーカス管理が重要なのはなぜですか？ — 適切なフォーカス管理により、特にフォームやインタラクティブな要素において、より良いユーザーエクスペリエンスが保証されます。
• 依存関係の競合が発生した場合はどうすればよいですか？ — パッケージを特定のバージョンに固定し、依存関係のアップグレードを実行することで、競合を解決できる場合があります。

タグ

#mui #shadcn #migration #webdev #UI #react #frontend #development