Open5

UIライブラリを作るためのライブラリを作りたい

mk668amk668a

UIライブラリを作るためのライブラリを作りたい。

UIライブラリのコンポーネントの実装は大変

Selectのコンポーネントであれば、どのような実装が必要であるか考えてみる(optionsも自前で実装する場合)。

・defaultValueが設定されている場合、valueにdefaultValueを設定
・fullWidthなどのサイズの調整
・defaultValueがある場合のvalueの設定
・classの設定
・disabled時の挙動(pointerEvents, 背景色など)
・hover時のcolor, border, backgroundなどの変更
・focus時のcolor, border, backgroundなどの変更
・autoFocus時の挙動(レンダリング後にfocus()を実行)
・stopPropagation()で親要素のクリックイベント無効
・placeholderの表示
・helperTextの表示(エラーの場合の文字色変更)
・Selectを開いた時のoptionsの表示制御(createPortalを使うなど)
・Selectが画面の端に置かれている時の、optionsの表示位置の調整(react-popperを使うなど)
・本来のselect, optionを隠す(visuallyHidden)
・option選択時にvisuallyHiddenで隠された本来のselectタグのeventの取得
・キーボード操作(Tabでfocus, 十字キーで移動, スペースorエンターで選択など)
・optionsを開いている間はスクロールを無効にする
・aria-expanded, aria-selectedなどのアクセシビリティ
・optionを別コンポーネントで実装する場合は、cloneElementで子要素のpropsに値を渡す
AutoCompleteも実装する場合は、debounceとthrottleなどで実装する必要も出てくるかもしれない。

このように1つのコンポーネントを実装するだけでも考えることが多いが、似たコンポーネントであれば、共通する処理は変わらないだろう。

UIライブラリは、デザインとロジックが一体となっているため、複雑になるにつれて、改善するのが難しくなる。
また、UIライブラリを作るにあたって、外部ライブラリと切り離せない実装になることが多い。
特に、CSS(sass, emotion, ゼロランタイム系など)やモジュールバンドラ(webpack, Vite)など技術のアップデートが早いライブラリに依存した実装になっていると、保守運用が大変になる。

UIライブラリを作るためのライブラリを作りたい

そこで、コンポーネントで使用する共通のロジックを関数化し、コンポーネントの実装に必要な機能の一部をimportして使えるようなライブラリを作りたい。

主なメリット

  • 誰もが簡単にUIライブラリを実装できるコアライブラリのようなものができたら、ライブラリ依存の少ない独自のUIライブラリが作りやすくなるだろう。
  • 各コンポーネントに必要なprops、event、その他ロジック、カスタマイズ例など、挙動や実装について詳細に記載したドキュメントができる
  • ドキュメントを作ることによって、HTML Living Standardに取り入れるべき仕様としての貢献もできると思う。
mk668amk668a

このようなライブラリのアイデアや、似たライブラリがあるかなど、情報を集めています。
また、一緒に開発をしてくれる方も募集しています。

mk668amk668a

'package:flutter/material.dart'からReactコンポーネントに変換できる仕組みが作れたらいいかも

mk668amk668a

React NativeってFlutterほどMaterial Componentが充実してなさそうなので、React Nativeの実装を先にすすめて、Webに変換(通女のReactコンポーネントとしても使えるようにする)のがいいのかな
https://rn-material.js.org/

これに関しては、React Nativeに詳しくないので的外れなこと言っているかも

mk668amk668a

愚直にMUIを再開発するしかないのかな、Rustとか使って