search

ShopOne / Shitforces

くそなぞなぞコンテストサイト
shitforces.vercel.app
MIT License
27 stars 13 forks source link

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

Closed no-yan closed 2 years ago

no-yan commented 3 years ago

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

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

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

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

CSSフレームワークは

UI フレームワーク

バリバリ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 commented 3 years ago

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

no-yan commented 2 years ago

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

stmtk1 commented 2 years ago

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

https://github.com/callstack/linaria

no-yan commented 2 years ago

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

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

no-yan commented 2 years ago

Chakra UI

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

image コード

記述は以下のようにできる。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 commented 2 years ago

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でプラグインを当てるのはライブラリがメンテされておらず、動かなかった。 https://github.com/jedmao/craco-linaria/pull/22

no-yan commented 2 years ago

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

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

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

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

stmtk1 commented 2 years ago

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

no-yan commented 2 years ago

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

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

ShopOne commented 2 years ago

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