nakamoto

Webエンジニアです！ https://bento.me/zksytmkn

nakamoto

Webエンジニアです！ https://bento.me/zksytmkn

  • React

    Reactの記事を纏めます。

  • AI

    AIの記事を纏めます。

  • 固定された記事

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

みなさん、お疲れさまです。 nakamoto（@zksytmkn）です！ フロンエンド開発にReactを用いるとき様々なスタイリングソリューションがありますよね。今回は素のCSSとTailwind CSSとCSS-in-JSのどれを使用するかという観点から、それぞれおすすめのスタイリングソリューションをご紹介させていただきます。 素のCSS素のCSSならMantineというコンポーネントライブラリがおすすめです。 Mantineはもともと他のコンポーネントライブラリと比較

nakamoto

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

      nakamoto

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

        nakamoto

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

          nakamoto
        • 固定された記事

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

        nakamoto

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

          nakamoto

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

          nakamoto

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

          nakamoto

        マガジン

        • React
          7本
        • AI
          1本

        記事

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

          nakamoto

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

          nakamoto

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

          nakamoto

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

          nakamoto

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

          nakamoto

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

          nakamoto

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

          nakamoto

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

          nakamoto

          ドラッグアンドドロップライブラリの候補です。 React 専用はこちら https://github.com/hello-pangea/dnd/ React 以外でもならこちら https://github.com/atlassian/pragmatic-drag-and-drop/

          nakamoto

          ドラッグアンドドロップライブラリの候補です。 React 専用はこちら https://github.com/hello-pangea/dnd/ React 以外でもならこちら https://github.com/atlassian/pragmatic-drag-and-drop/

          nakamoto

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

          nakamoto

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

          nakamoto

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

          nakamoto

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

          nakamoto

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

          nakamoto

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

          nakamoto

          コンテナの外側にはmarginなどの余白を付けるべからず gapを使ってコンテナ間の幅を調整します。 https://kyleshevlin.com/no-outer-margin/

          nakamoto

          コンテナの外側にはmarginなどの余白を付けるべからず gapを使ってコンテナ間の幅を調整します。 https://kyleshevlin.com/no-outer-margin/

          nakamoto

          Biome（ESLintとPrettierを置き換える技術）にclassのsort機能が追加され、Tailwind CSSと一緒に使いやすくなってるようです。 https://github.com/biomejs/biome/releases/tag/cli%2Fv1.5.3-nightly.24fcf19

          nakamoto

          Biome（ESLintとPrettierを置き換える技術）にclassのsort機能が追加され、Tailwind CSSと一緒に使いやすくなってるようです。 https://github.com/biomejs/biome/releases/tag/cli%2Fv1.5.3-nightly.24fcf19

          nakamoto

          認証はSupabaseを使ってDBも認証も担わせる or DBはPlanetScaleを使って認証はClerk, Lucia辺りに担わせる。 Auth.js（旧NextAuth.js）は料金的に高くなってしまいました。

          nakamoto

          認証はSupabaseを使ってDBも認証も担わせる or DBはPlanetScaleを使って認証はClerk, Lucia辺りに担わせる。 Auth.js（旧NextAuth.js）は料金的に高くなってしまいました。

          nakamoto

          Vercel AI SDK 3.0 プロンプトに対しコンポーネントを返したりタスク管理もしてくれるようになるっぽいです。Function CallingによってRSCを返し実現してるご様子。 https://vercel.com/blog/ai-sdk-3-generative-ui

          nakamoto

          Vercel AI SDK 3.0 プロンプトに対しコンポーネントを返したりタスク管理もしてくれるようになるっぽいです。Function CallingによってRSCを返し実現してるご様子。 https://vercel.com/blog/ai-sdk-3-generative-ui

          nakamoto