Tailwind CSSチーム、GitHubスター数2.4万超のUIコンポーネント集「Headless UI」をメジャーアップデート
5月8日、Tailwind LabsはReact用の「Headless UI v2.0」をリリースした。 Headless UIとは、Tailwind CSSベースのUIコンポーネント集である。 Tailwind CSSチーム自身が開発を行っており、GitHubスター数も2.4万を超えるなど、高い人気を博している。 このアップデートは、開発者がより少ないコードでより良い開発体験を実現できるようにするための多数の改善を含んでいる。 主な更新点は以下の通りだ。 組み込みアンカーポジショニングのサポート 新しいチェックボックスコンポーネントの追加 HTMLフォームコンポーネントの拡充 状態検出の向上 コンボボックスリストの仮想化 新しいウェブサイトと改善されたドキュメント 組み込みアンカーポジショニングのサポート Floating UIがHeadless UIに直接統合され、Menu、Popov
Next.jsのApp Routerを学ぶ際に、UIライブラリを探していたところ、shadcn/uiが参考になったので紹介します。 shadcn/uiは、フレームワークやライブラリではなく、コピペで利用できるReactコンポーネントのサンプル集という立ち位置になっています。Tailwind CSSでデザインされており、React Server Components(RSC)にも対応しています。 サンプルの実装方法が参考になる点も魅力の一つです。 簡単ですがつらつらと紹介していきたいと思います。 shadcn/uiとは デモを見てるとフレームワークやライブラリなのかなと思いきやそうではなく、コピペで利用できるサンプル集という立ち位置になっています。基本的にはTailwind CSSでデザインされてるようです。 サンプルとはいえ、実装方法で参考になった箇所が結構あったのでそこも気に入ってるポイ
こんにちは、ファインディ株式会社でフロントエンドのリードをしております 新福(@puku0x)です。 この記事では、転職サービス Findy の開発チームにおける開発生産性の向上に対する取り組みをご紹介します。 以前の状況 モノリスの解体 開発基盤の刷新 コンポーネント設計の刷新 テストの拡充 CI の高速化 改善の効果 まとめ 以前の状況 2020年頃の Findy は Ruby on Rails と React のモノリス構成で作られていました。 機能の増加に従いコードが複雑化し、しだいに開発スピードが伸び悩むようになりました。 ここで Findy Team+ で算出した当時のリードタイムを見てみましょう。 2020年のFindyのリードタイム 上記のグラフから次のことがわかります。 改修が本番に適用されるまで 約1週間 かかる プルリクエストがレビューされるまで 約5日 放置される
楽観的更新を行うための React の useOptimistic フック 2024.05.12 React v19 では楽観的更新を行うための `useOptimistic` フックが導入される予定です。楽観的更新とは、ユーザーの操作に対して非同期処理の完了を待たずに UI を更新する手法のことです。楽観的更新によりユーザーの操作に対して即座にフィードバックを提供できるため、UX の向上につながります。 React v19 では楽観的更新を行うための useOptimistic フックが導入される予定です。楽観的更新とは、ユーザーの操作に対して非同期処理の完了を待たずに UI を更新する手法のことです。楽観的更新によりユーザーの操作に対して即座にフィードバックを提供できるため、UX の向上につながります。 楽観的更新を使用している例として、X（旧 Twitter）のいいねボタンがあります
TSKaigiにて使用した資料です。 https://tskaigi.org/talks/ytaisei_ Reactを用いたSPA開発においてフレームワークの採用は時にtoo muchになります。 しかし、Next.jsやRemixのFiled-Basedなルーティングは開発体験が良いです。 私たちはSPA開発においても型安全でFile-Basedなルーティングを求めています。 今回はそのような状況においてTanStack Routerが有力な候補になることを、その特徴とメリットに触れながら解説します。 次の特徴を紹介します。 - 型安全でシンプルなルーティング - File-Basedなルート生成 - バンドルサイズを軽減するCode Splitting - Search Paramsによる状態管理
JSer.info #692 - Headless UI v2.0 for Reactがリリースされました。 Headless UI v2.0 for React - Tailwind CSS Floating UIのanchor指定をサポート、Checkboxコンポーネント、Fieldsetコンポーネント、Comboboxがvirtual propsをサポートなどの変更が含まれています。 Astro 4.8がリリースされました。 Astro 4.8 | Astro 実験的な機能としてAstro Actions、Request Rewritingの追加が行われています。 また、パフォーマンスの改善やinjectRouteのバグ修正などの変更が含まれています。 Node.js の進化に伴い不要となったかもしれないパッケージたちという記事では、外部パッケージで提供されていた機能の一部がNode
のように実装することが多いと思います。 このような実装の罠として、変数がbool型ならよいのですが、たとえばnumber型かつ0が格納されている際、式の評価としては左辺の0が返されてしまい、ブラウザ上に「0」とだけ表示されたり、React Nativeでは最悪の場合クラッシュを引き起こします。 対策としてはシンプルで、かならず!!を先頭に付与すると良いです。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Next.jsのApp Routerを学ぶ際、shadcn/uiが参考になったという話 - Qiita
Findy転職フロントエンドの開発生産性を向上させるためにやったこと - Findy Tech Blog
楽観的更新を行うための React の useOptimistic フック
TanStack Routerで型安全かつ効率的なルーティングを実現
2024-05-12のJS: Headless UI v2.0 for React、Astro v4.8、外部パッケージに依存せずにNode.jsで使えるようになった機能
【ESLint】Reactで”&&”で分岐した際、うっかり「0」を表示しないためのルール3選