Reactのモダンスタイリングソリューションをご紹介します！🎨

みなさん、お疲れさまです。
nakamoto（@zksytmkn）です！

フロンエンド開発にReactを用いるとき様々なスタイリングソリューションがありますよね。今回は素のCSSとTailwind CSSとCSS-in-JSのどれを使用するかという観点から、それぞれおすすめのスタイリングソリューションをご紹介させていただきます。

素のCSS

素のCSSならMantineというコンポーネントライブラリがおすすめです。
Mantineはもともと他のコンポーネントライブラリと比較しコンポーネントがかなり充実してましたが、v7.4.0よりチャート系のコンポーネントも追加されました。それによりMantineの隙はなくなりましたし、チャート系までサポートしてるコンポーネントライブラリはMantineと後述のTremorくらいです。しかし、Tremorはチャート系などの管理画面のコンポーネントは充実しててもその他のコンポーネントが不足してる為、Mantineはユーザー画面と管理画面の開発どちらにも対応できるという点で優れてます。内部的にはどちらのチャート系のコンポーネントもRechartsが使われてます。

さらにMantineにはv7.6.0よりHeadlessMantineProviderというMantineをヘッドレスUIライブラリ（スタイルを持たず機能のみのUIコンポーネント）として使用できる機能が提供されてます。これによって、今までMantineを使ってみたかったけれどもスタイルが好きじゃなかった開発者の皆さんにも自らスタイルを適用しご使用いただけます（スタイルを適用するというのは大変ではありますが。。）

Tailwind CSS

Tailwindならshadcn/uiというコンポーネントライブラリがおすすめです。
shadcn/uiはRadix UIとTailwind CSSによって作られており、npmによって管理せず、自らのコードベースで管理するという特徴があります（この特徴をRe-usableといいます）。つまりカスタマイズできるのでコンポーネントを頻繁に微調整する場合には使いやすいです。しかし、ユーザーの皆さんが欲してるのは特に独自のUIではないですし、ビジネスのことを考えるのならいち早く機能を実装できるMantineがいいとも思われます。ただMantineはTailwind CSSとは相性が悪いのです。。併用できない認識なので、Tailwind CSSを使いたいという場合にはshadcn/uiの選択は適切と思われます。

管理画面ならTremorというコンポーネントライブラリがおすすめです。TremorはTailwind CSSで管理画面を作るためのコンポーネントライブラリです。datepickerもvisualization（chartなど）もあります。

CSS-in-JS

CSS-in-JSならStyleXがおすすめです。StyleXはMeta公式のCSS-in-JS（JS内にスタイルを定義し、コンポーネントに直接適用します。）で今後このStyleX製のコンポーネントライブラリが増えそうです。RSCの登場によってStyled Components、EmotionのようなCSS-in-JSは推奨されませんが、StyleXはゼロランタイムなCSS-in-JSとしてRSC対応しております。

ゼロランタイムなCSS-in-JSライブラリであるStyleXがRSC（React Server Components）と互換性を持つ理由は、StyleXによって生成されるスタイルがビルド時に静的ファイルとして処理され、ランタイムで追加のJavaScript実行を必要としないためです。RSCの主な目的は、サーバーサイドだけでも完結できるものを事前に処理し、クライアントサイドのレンダリング負荷を減らすことにあります。一方で、Styled ComponentsやEmotionなどの従来のCSS-in-JSライブラリは、クライアントサイドでスタイルを動的に生成し適用する為にJavaScriptの実行を必要とします。これはRSCが目指す方向性とは逆行します。しかし、StyleXはビルド時にスタイルを完全に処理して、ランタイムでのJavaScript実行を不要にすることで、RSCとの互換性を実現しています。

まとめ

今回はReactのスタイリングソリューションについてモダンなものを幾つかご紹介させていただきました。いずれもRSC（React Server Components）に対応しておりますので、ご安心ください！🙏
今回もこちらの記事を読んでいただき、誠にありがとうございました！