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

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

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

素のCSS素のCSSならMantineというコンポーネントライブ

Next.js Image

Next.js の Image コンポーネントはデフォルトで Lazy loading（画像が見える位置にスクロールされたら表示されるよう）になってますが、priority を true にするとそれを無効として優先的に表示できます。

なので、ファーストビューの画像は priority を true として優先的に表示し、その他の画像は placeholder を blur として画像を読み込ん

チェックボックスの背景色をチェックしたときのみ変更するには accent-color というプロパティがとても便利です。

input[type="checkbox"] {
accent-color: red;
}

https://coliss.com/articles/blogroll/css-accent-color.html

SVG を上下反転させる

transform="scale(1,-1) translate(0, -16)" という属性を適用する。scale(1,-1) によって上下逆さにし translate(0, -16) によって位置調整する。16 は縦横幅によって要調整です。

Docker Desktop って重すぎますよね。orbstack と podman-desktop がその代替サービスとなりそうです。前者は商用のみ有料、後者は無料です。

https://github.com/orbstack/orbstack
https://github.com/containers/podman-desktop

sharepreviews を使ったら OGP 画像（SNS にホームページの URL をシェアすると表示される画像）を簡単に作成できそうです。

https://sharepreviews.com/home

Web サイトのプライバシーポリシーや利用規約等の法的文書を作成するとき Wonder.Legal が便利そうです。有料ではありますが、自ら作成するコストを考えるとコスパいいかもしれません。

https://www.wonder.legal/jp/

ESLint を使ってて Biome に移行したいとき @biomejs/biome migrate eslint コマンドを実行すると biome.json をアップデート（ESLint の設定を読みとって反映）できるようです。

https://github.com/biomejs/biome/pull/2103

Neon というポスグレの DBaaS があって現状もっとも近いリージョンはシンガポールですが、こちらの Neon ロードマップによると新しいリージョンを検討中のようです。もしかすると日本が来るかも知れないですね。

https://neon.tech/docs/introduction/roadmap#more-regions

フリーイラストを使うときは Pixels Market がよさそうです。検索窓にほしいイメージ（calendar など）を入力すると色んなイメージを出してくれます。無料です！🤩

https://pixels.market/

カレンダーコンポーネントのおすすめです。カレンダーってそれのみ探しても中々ないですし、こちらは React 以外でも使用できます。npm install でも CDN 経由でも Web Components でも使用できます。

https://github.com/WickyNilliams/cally

ドラッグアンドドロップライブラリの候補です。

React 専用はこちら
https://github.com/hello-pangea/dnd/

React 以外でもならこちら
https://github.com/atlassian/pragmatic-drag-and-drop/

Server Actions でフォームを作成する際に、フォームをリセットする方法は現状こちらです。ただフォームのリセットは今後 React がデフォルトで行ってくれるようになるそうです。

https://twitter.com/asidorenko_/status/1775495832877338838

onbordaは、Next.js向けのオンボーディングウィザードフロー（初めてサイトを訪れるユーザーを対象とするガイド）ライブラリで、framer motion、shadcn/uiを使用し、App Routerにも対応しています。

https://github.com/uixmat/onborda

PlanetScaleの無料プランがなくなりました。。
Neonはもっとも近くてシンガポールリージョンですし
SQLiteでもいいならTursoがもっと使われるようになりそうですね

https://planetscale.com/blog/planetscale-forever

コンテナの外側にはmarginなどの余白を付けるべからず
gapを使ってコンテナ間の幅を調整します。

https://kyleshevlin.com/no-outer-margin/