新たなCSS/UI フレームワークを導入する

[no-yan]

Bootstrapでの新規開発をやめ、今後は別のフレームワークを導入したい

ShitforcesはUIをBootstrapに頼っていますが、Bootstrapはモダンなフレームワークに比べ表現力が低いです。"mt-3"のように付属するクラス名でカスタマイズできますが、クラス名の数が限られており、制約の割に学習コストが高いです。
結果として、デザインをカスタマイズしようとするとbootstrap以外にcssを作成することになります。フレームワークを使っているのに他でCSSを使っているのは、フレームワークの機能が用途に対して不十分だということでしょう。

それならフレームワークの中でカスタマイズしやすいCSS/UIフレームワークを導入していきませんか。
この基準を満たしているライブラリが望ましいと思います。

• 便利コンポーネントが豊富　skeltonや、pagenation
• 型チェックの存在（きちんとエラーをはいてくれる）
• デザインがついていてモダン

UI フレームワーク or CSS フレームワーク

CSSフレームワークは

• CSSをJSファイル内に書ける　→　メンテナンスコスト減
• 型チェックあり（ないものも）
• 大半が学習コスト低
• デザインはいちから作る必要あり（CSSをかんたんにかける以上のことはしない）

UI フレームワーク

• デザインを提供
• CSSをあまり知らなくてもつかえる部分がある
• CSSが上達することはない
• 拡張性はフレームワーク次第
• 実装が面倒な部分をスキップできる（タブやモーダル）

バリバリCSSを書ける開発者は少ないとおもうので、かんたんに拡張可能なコンポーネントを使って開発を低コストにすることを主目的にするべきだと思います。
多分、shitforcesの開発者はreminさんを除いてcssを直接書きたくないということに同意できるだろうと思うので、cssを書かずにすむUIフレームワークを使うことを検討しませんか。
個人的にはchakraをいま試しています。

UIフレームワーク

たとえばchakra-ui, material-uiなど。

chakraの紹介

https://zenn.dev/terrierscript/books/2021-05-chakra-ui
https://www.youtube.com/watch?v=mbtDV5EkSAI&t=340s

css フレームワークの比較検討: Replacing Sass

新規技術を使う際はそれなりに覚えることもあると思うのできちんと合意して進めたいですが、選定部分は任せてもらえるのであればきちんと選定します。

[ShopOne]

なるほどです、僕の場合はBootstrapしか使ったことがなかったのでReact-Bootstrapもそのまま使っていただけで、新技術へ移行することに抵抗とかは特に無いです。
あとCSSいやいやマンなので、UI framework への移行は賛成です。
懸念としては、余計に新しい人が入りにくくならないかなという程度ですが、React-Bootstrapも対して新規に優しくないことに気がついたので、猛烈な反対とかが無ければ選定をお願いしたいです。

[no-yan]

放置していて申し訳ないです。このissueが開いたままだとUIに触りにくそうなので、維持するにせよ何かしら決定したいと思います。
@stmtk1
好みのライブラリやアプローチ(e.g. SASS)とかあったりしますか？
UIライブラリ検討はアクティブな人のCSS力が足りない課題感からきているので、CSSで大丈夫であればそれでも構わないです。

[stmtk1]

UIフレームワークに関しては特にこれといったおすすめはありません。
react用のCSSフレームワークで今注目してるのはlinariaというライブラリです。JS内にCSSが書けて軽量のフレームワークだという話を聞きました。使ったことがないので導入がどの程度難しいかわかりませんが、学習コストもそこまで高くはなさそうです

https://github.com/callstack/linaria

[no-yan]

おお、linariaですね。CSS in JSの利便性を受け継ぎながら静的生成によるパフォーマンス向上を目指したライブラリという認識です。
明日一日これらのライブラリを使っていくらか開発して、触った感想を書いてみます。

静的生成系にはvanilla extractもあり、こちらはTSサポートが厚いらしいです。時間があればこれも比較してみたいと思います。

[no-yan]

Chakra UI

トップ画面をchakraに移行して、コンポーネントのカスタマイズ性を試しました。

コード

• かなり記述が簡単になる
• コンポーネントにデフォルトでスタイルがついていて、variantというプロパティを変えると複数のスタイルから選択できる。
• propsにCSSプロパティを書くことで、スタイルが当たる
• サジェストが出るので、「このCSSプロパティはどう書くんだっけ、MDN見て...」がない
• Chakra UI独自のプロパティはsm | md | lg | xl | 2xl から選択できる
  • 選択肢が少ないのは一見デメリットだが、思考を減らせるので好ましい。16pxと17pxのちがいで悩みたくない
  • 選択肢が少ない分、誰がやっても意思決定が自然と同じになりやすい。他実装者との協働によい印象。
  • これはutility css系全般にあてはまる
• ダークモード対応の機能がバグっていた（回避策あり）
• 不正な値を入力しても型エラーが出ない
  • あくまでサジェストのための機能と割り切っている印象

記述は以下のようにできる。asやsizeはChakra UI独自のprops。他はCSSプロパティそのままで、感覚としてはインラインスタイルと似ている。divとかにスタイルを当てるかわりにコンポーネントにインラインスタイルが当てられるような感じ。
これは他のUIライブラリではあまり多くない。

        <Heading
          as="h2"
          fontWeight="thin"
          size="lg"
          paddingleft="6"
          color="orange.500"
          width="130px"
          border="4px"
          borderRadius={'2xl'}
        >

[no-yan]

Linariaは導入がうまく行っていない。
react scriptsは裏にwebpackとかを隠蔽しているが、linariaなどタグ付きテンプレート構文を使うライブラリはこの裏側をどうにかして触る必要がある。
これを実現するにはreact scriptsの隠蔽をなくすejectコマンドか、cracoライブラリのどちらかの選択肢があるが、どちらもうまく行かなかった。
react scriptsのejectで出てくるものはwebpackの知識が足りずわからなかった。識者求む。
babelプラグインに、preset-reactのかわりにpreset-react--scriptsが入っていて、このあたりを触れば良いと思うのだけれど。
参考：https://blog.ojisan.io/next-linaria-setup/

cracoでプラグインを当てるのはライブラリがメンテされておらず、動かなかった。
jednano/craco-linaria#22

[no-yan]

webpackでbabelをいじる部分はお手上げなので、Linariaを自力で導入するのは諦めました。playgroundで触った印象では、LinariaはいまのShitforcesの課題（開発のスピード感）に刺さる感じはなかったです。

自分だけだったら何を選ぶか

Chakra UIを選びます。今日数時間触って、Chakra UIを使うと自分はコンポーネントが高速に開発できると感じました。Chakra側のシステムに未整備なところはありますが、CSSプロパティの部分は安定している印象です。
自分はChakra UIが高機能なコンポーネント集で、他UIライブラリより拡張性が高い点を高く評価しています。
書き方さえつかめば、他の人も高速にスタイリングできると思います。

皆さんはどうでしょうか？

[stmtk1]

ひとまずchakura UIはインストールして、vanilla extractやlinaria のインストールは難しければ別イシューを立てます。

[no-yan]

ありがとうございます。chakra使う場合はCSSをすべてpropsに書く形になるので、vanilla extractやlinariaをインストールしなくてよいですよ。（とりあえず全部いれて使った心地で確かめるとかなら？後始末がちょっと大変そうか）

一応、今回つくったブランチでセットアップしたのでPRを投げておきます。
@ShopOne 徐々に話進めちゃいますが、pingしときますね。

[ShopOne]

きがつかなかった 確認しま～す