社内向けに、フロントエンド関連のニュースや業務で発生したQ&A、利用しているライブラリなどの情報を定期的に書いています。
社内の開発部メンバーに向けて直近でリリースされたライブラリなどの情報をMatsuri-tech Frontend Weeklyとしてまとめています。内容は実務や趣味で使えそうなものを中心に扱っており、網羅的ではなく偏りがあります。
# React Aria Components v1
2023年12月20日にReact Aria ComponentsがGAリリースされました。
併せてReact Ariaを紹介するLanding Pageも公開されています。
React Aria componentsは、アクセシブルなコンポーネントを構築するためのhooksとutilityを提供するReact Aria hooksを元に構築されており、アクセシブルなコンポーネントを構築する、より簡単な方法を提供します。
アクセシブルなコンポーネントのためのhooksとutilityを提供するReact Aria hooksを元に構築されており、
# Tailwind CSS v3.4
2023年12月20日にTailwind CSS v3.4がリリースされました。
弊社では、Tailwind CSSを利用していませんが話題性があると思ったので取り上げます。
Tailwind CSS v3.4では、Dynamic viewport units（dvh、lvh、svh）のサポート、:has()のサポート、子要素にスタイルを適用する* variantのサポート、size-* utilityの追加、Subgridのサポートなどが行われました。
// Dynamic viewport units
<div class="h-dvh"></div>
// :has()
<label class="has-[:checked]:ring-indigo-500 has-[:checked]:text-indigo-900 has-[:checked]:bg-indigo-50 ..">
<svg fill="currentColor"></svg>
Google Pay
<input type="radio" class="accent-indigo-500 ..." />
</label>
// * variant
<ul class="*:rounded-full *:border *:border-sky-100 *:bg-sky-50 *:px-2 *:py-0.5 dark:text-sky-300 dark:*:border-sky-500/15 dark:*:bg-sky-500/10 ...">
<li>Sales</li>
<li>Marketing</li>
<li>SEO</li>
</ul>
// size-* utility
// <img class="h-10 w-10" ...>
<img class="size-10" .../>
// Subgrid
<div class="grid grid-cols-4 gap-4">
<div class="grid grid-cols-subgrid gap-4 col-span-3">
<div class="col-start-2">06</div>
</div>
</div>
またTailwind Labsからshadcn/uiと同様の仕組みのUI KitであるCatalystがリリースされました。CatalystはReact Ariaを利用しています。