Tweet
Tweet

Slide 1

Slide 1 text

アクセシビリティを考慮した UI/CSS フレームワーク・ライブラリ選定 @BAR フロントえんどう #2 「CSS Library / Framework 」 やじはむ 2024/04/17

Slide 2

Slide 2 text

↑ロリスさん 自己紹介 やじはむ / yajihum ・株式会社COMPASS のフロントエンドエンジニア 　・公教育で使われるプロダクトを開発 ・エンジニア3 年目 ・最近はパフォーマンスやアクセシビリティに興味がある ・好きなCSS フレームワークはTailwind CSS

Slide 3

Slide 3 text

UI/CSS フレームワーク・ライブラリを どういう基準で選定するか

Slide 4

Slide 4 text

・人気度、将来性 ・エコシステムの充実度 ・パフォーマンス ・カスタマイズのしやすさ ・実装の手軽さ ・言語やフレームワークとの相性 ・メンテナンスのしやすさ などなど...

Slide 5

Slide 5 text

・人気度、将来性 ・エコシステムの充実度 ・パフォーマンス ・カスタマイズのしやすさ ・実装の手軽さ ・言語やフレームワークとの相性 ・メンテナンスのしやすさ ・アクセシビリティへの対応のしやすさ ←これ入れたい

Slide 6

Slide 6 text

なぜ？👺

Slide 7

Slide 7 text

1. 長期的な計画が必要 アクセシビリティは非機能要件の1 つ 企画〜調達〜設計・実装・テスト〜リリースの全ての 過程で考慮する必要がある 後からやればいいやは結構大変

Slide 8

Slide 8 text

2. 実装が大変 aria 属性の付与 キーボード操作 デバイスに応じた制御 見やすくわかりやすいデザイン わかりやすい仕様・UX

Slide 9

Slide 9 text

3. 必要とされる知識の多さ 期待される結果がどんなコンポーネントかによって 異なる かつ、コンポーネント単位だけでなくそれらを合わ せた時の挙動も考える必要がある

Slide 10

Slide 10 text

実装をいかに楽に行えるかが重要 とにかく手間やコストがかかる

Slide 11

Slide 11 text

技術選定の時から どんなUI/CSS フレームワーク・ライブラリなら 実装しやすいかを考えておく アクセシビリティ対応を楽に行うためには

Slide 12

Slide 12 text

UI ライブラリ

Slide 13

Slide 13 text

Radix UI (Radix Primitives) ・⭐️14.1k ・ヘッドレス ・shadcn/ui( ⭐️56.2k) の内部で使用 ・28 コンポーネント ・パッケージサイズ：使用するコンポーネントによる 　（例：一番大きいSelect で 30.04 kB ）

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

状態に合わせてdata 属性が付与される

Slide 16

Slide 16 text

NextUI ・⭐️19.1k ・Tailwind CSS ベース ・最初からスタイルが当たっている ・内部でReact Aria を使用 ・パッケージサイズ： 　504.5kB(@nextui-org/react) ＋43.7kB(framer-motion)

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

React Aria Components ・⭐️11.6k （react-spectrum ） ・Adobe が提供 ・ヘッドレス ・react-aria でフックも提供 ・粒度が低くカスタマイズのしやすさは大きい ・アクセシビリティへの対応度は一番高そう ・パッケージサイズ： 167.6kB(react-aria-components) ＋126.8kB(react-aria)

Slide 19

Slide 19 text

CSS ライブラリ・フレームワーク

Slide 20

Slide 20 text

・data 属性に対してスタイルを当てられる ・擬似クラスを使用できる

Slide 21

Slide 21 text

CSS Modules Tailwind CSS Panda CSS vanilla-extract stylex data 属性 擬似クラス ⭐️ - 78.5k 4.6k 9.2k 8k 前提：React Server Components で使用可能

Slide 22

Slide 22 text

・全部使えるので基本的にどのCSS フレームワーク・ライブラリ でも問題なし ・状態に応じたスタイルが煩雑にならないような書き方ができる ものが良さそう ・後はサポートしている擬似クラスの量や、Utility First, CSS in JS 、コンポーネントは別でスタイルのみの提供があるかどうか、 Type Safe かどうかなどの違い

Slide 23

Slide 23 text

plugin: tailwindcss-react-aria-components data-[selected]:bg-blue-400 ↓ selected:bg-blue-400 で書ける

Slide 24

Slide 24 text

終わりに

Slide 25

Slide 25 text

・デザインシステムを作りたいならReact Aria ・効率的に実装したいならRadix UI やNextUI など ・CSS フレームワーク・ライブラリは何でも良さそう