Chakra UIを使ってた僕がReact Bootstrapを使ってみた感想

今までBootstrapを使ったことがなかったが、新しいサイトを作るにあたりReact Bootstrapに触れてみた。

感想としては、Chakra UIやMaterial UIなど他のUIライブラリと比較すると使いづらさを感じた。

React Bootstrapのスタイル

React Bootstrapでは基本的にclassNameでスタイルを指定する。

たとえば、Cardコンポーネントに次のようなスタイルをつけてみる。

• 背景色を青
• max-widthを300px
• 画面サイズがsmall未満であればpaddingを1、small以上であれば2

あるいはCSSファイルに独自のclassを作ってclassNameで指定することもできる。

パフォーマンス面ではCSS-in-JSよりもこっちのほうが良いはず。


ただ、classNameでスタイルを指定すると、エディターの入力補完機能が使えなくなる。

そのためどんなclassがあるのか調べなければならない。

Chakra UIのスタイル

同じものをChakra UIで作成してみる。

こっちのほうが直感的に理解できると思う。

プロパティでスタイルを指定するのでエディターの入力補完も機能する。

「m」と入力すればmaxWidthやmarginTopなど使用できるプロパティ候補が表示される。


これの欠点としてパフォーマンスが悪いことが挙げられるが、Chakra-UIではゼロランタイムCSS-in-JSのpandaを開発しているらしいので改善されるかもしれない。

React Bootstrapが向いている人

• React BootstrapはBootstrapに慣れていてReactでも導入したい人
• CSS-in-JSのパフォーマンス悪化が気になる人　など

僕の場合、簡素なサイトだけなのでCSS-in-JSによるパフォーマンス悪化が気になったことなはい。

新しいサイトもChakra-UIで作っていこうと思う。