地味に間欠的に開発を続けている個人用勤怠記録 Web アプリWorking time around開発の停止した Material Component for React(MDC React)をいつまでも使い続けるのもなあ、ということでMDC Web on other frameworksで紹介されているRMWC: React Material Web Componentsに置き換えました。RMWC の日本語の情報はほとんど見かけないのでちょっとメモ。

  • グリッド関連のコンポーネント、一行のときは行(GridRow コンポーネント)を省略して列(GridCell コンポーネント)を直接書けるようになっているのですが、そのせいで複数行のとき Grid コンポーネントの最初の子要素が GridRow コンポーネントでないと子要素全部が GridRow コンポーネントでラップされてレイアウトが崩れます。この「最初の子要素」というのは厳密な条件で、子要素コンポーネントのルートの要素が GridRow コンポーネントでも駄目。ちょっとやな感じの制約です。
  • TextField コンポーネントtextarea プロパティと trailingIcon プロパティを同時に指定するとアイコンがテキストエリアの右下ではなく右中央に表示されます。MDC React ではそんなことなかったので、これは RMWC 独自のバグっぽい。
  • React Testing Libraryでテストコードを書くとき、一部のイベントは普通に書くと発火しません。これはアニメーションとの関係で、ソースコードの *.spec.tsx を見てやっと解決したのですが、actでラップした上でさらにWindow.requestAnimationFrame()でラップする必要があります。で、そうすると act の使いかたがよくないと警告されるという……。これはちょっと回避方法はなさそう。
    • window.scrollTo のモック化が必要なイベントもあります。

なお置き換え自体は上記の点を除けばスムーズに進みました。もちろんコンポーネントやプロパティの名前が違っていたりしましたが、おおむねは機械的に作業できるレベル。機能上の都合で一部コンポーネント構成を変えましたが、その点を除けば置き換え前と置き換え後で見分けはつかないと思います。狙いは達成できてまずは一安心。まあベースとなる CSS フレームワークは同じなのでそうなってもらわないとこまったわけですが。

これでやろうと思っていたことはほぼ達成したので(あとError Boundary対応があるのですがこれは React の Hooks 対応待ち)、Working time around はバージョンを 1.0.0 として一区切りとします。

公開: