React / TypeScriptでのカラーピッカーの実装戦略

TSKaigi Hokuriku 2025でのLT資料です。
https://hokuriku.tskaigi.org/talks/40

Transcript

1. © PLAID, Inc. React / TypeScriptでの カラーピッカーの実装戦略 t-jimbo © PLAID, Inc. 2025.11.23　｜　TSKaigi Hokuriku 2025
2. © PLAID, Inc. ⾃⼰紹介 2 写真 t-jimbo Takuma Jimbo / 神保 拓眞 Software Engineer Nubrick / Lab Dept. PLAID, Inc.
3. © PLAID, Inc. 3 カラーピッカーの話 Figma
4. © PLAID, Inc. <input type="color"> 4 MDN Web Docs
5. © PLAID, Inc. <input type="color"> 5 Pros ‧実装コスト ‧アクセシビリティ ‧各Platform最適化 Cons ‧デザインの統⼀‧カスタマイズ
6. © PLAID, Inc. ライブラリ 6 uiwjs/react-color React⽤で唯⼀使えそうだったやつ 軽量でカスタマイズしやすい まだ名が売れていない
7. © PLAID, Inc. ライブラリ 7 いろいろある
8. © PLAID, Inc. ライブラリ 8 が、どれも決定的とは⾔えない現状 • カスタマイズ性 • Star数 / DL数 • メンテナンスの継続性 • バンドルサイズ • 実装コスト とりあえず今回はuiw/react-colorを選んだ
9. © PLAID, Inc. 9 カラーコードいろいろ
10. © PLAID, Inc. カラーコード 10 いろいろある • HEX （e.g. #FF4769） • RGB • HSV / HSB • HSL • XYZ / CIE 1931 • OKLAB • OKLCH • etc.
11. © PLAID, Inc. HSV 11 よく⾒るSlider + 2DピッカーのUI • Hue（⾊相） • Saturation（彩度） • Value / Brightness（明度） ※CSSには hsv() といったメソッドは無い 明度 暗 明 彩度 ⾊相 低 ⾼ Figma
12. © PLAID, Inc. HSL 12 HSVと似てるけどちょっと違う • Hue（⾊相） • Saturation（彩度） • Lightness（輝度） これはCSS対応 hsl(0, 0, 88) 輝度 暗 明 彩度 ⾊相 低 ⾼ Figma
13. © PLAID, Inc. モダンなやつ 13 OKLCH • Lightness（明度） ◦ RGBの平均値ではなく、 ⼈間の知覚する明るさ • Chroma（明るさを加味した彩度） • Hue（⾊相） ここ数年でCSS対応 oklch(0.7, 0.1, 272) oklch.com
14. © PLAID, Inc. 14 どう実装する？
15. © PLAID, Inc. どう実装する？ 15 決め⼿に⽋けるライブラリ事情 いろんなカラーコード形式 • 汎⽤的で強いHEX, RGB • 視覚的に扱いやすいHSV, OKLCH, ... 機能‧UIも変わりうる • テーマカラーパレット • スポイトツール • グラデーション
16. © PLAID, Inc. どう実装する？ 16 決め⼿に⽋けるライブラリ事情 いろんなカラーコード形式 • 汎⽤的で強いHEX, RGB • 視覚的に扱いやすいHSV, OKLCH, ... 機能‧UIも変わりうる • テーマカラーパレット • スポイトツール • グラデーション
17. © PLAID, Inc. どう実装する？ 17 UI、機能は⽐較的変更しやすい ライブラリも乗り換えられる アプリケーションのインターフェースを変えるのは難しい
18. © PLAID, Inc. どう実装する？ 18 UI、機能は⽐較的変更しやすい ライブラリも乗り換えられる アプリケーションのインターフェースを変えるのは難しい 境界をちゃんとつくる
19. © PLAID, Inc. どう実装する？ 19 DB App ColorPicker UI、機能は⽐較的変更しやすい ライブラリも乗り換えられる アプリケーションのインターフェースを変えるのは難しい 境界をちゃんとつくる
20. © PLAID, Inc. UI、機能は⽐較的変更しやすい ライブラリも乗り換えられる アプリケーションのインターフェースを変えるのは難しい 境界をちゃんとつくる どう実装する？ 20 DB App ColorPicker SV picker Hue slider Alpha slider
21. © PLAID, Inc. アプリケーションで扱うカラーコードは？ どう実装する？ 21 DB App ColorPicker SV picker Hue slider Alpha slider
22. © PLAID, Inc. どう実装する？ 22 type Any Color = `#${string}` | RgbaColor | HsvaColor | HslaColor | ...
23. © PLAID, Inc. どう実装する？ 23 type Any Color = `#${string}` | RgbaColor | HsvaColor | HslaColor | … つらい
24. © PLAID, Inc. どう実装する？ 24 アプリケーションではRGBAが使いやすい • 光の三原⾊ • Webを含む多くの環境でサポート • 計算処理がしやすい • sRGB以外の⾊空間への対応も⽐較的できる • HEXはstringのparseがちょっと⾯倒
25. © PLAID, Inc. どう実装する？ 25 DB App ColorPicker RGBA SV picker Hue slider Alpha slider アプリケーションではRGBA（またはHEX）が使いやすい
26. © PLAID, Inc. どう実装する？ 26 DB App ColorPicker RGBA SV picker Hue slider Alpha slider ColorPickerコンポーネントでは？
27. © PLAID, Inc. どう実装する？ 27 RGB → HSVは⼀意に決まらない SV 2D Pickerを実装するには、内部状態を HSVA で保持するのがよい react-colorful / ColorPicker.tsx
28. © PLAID, Inc. どう実装する？ 28 DB App ColorPicker RGBA HSVA SV picker Hue slider Alpha slider ColorPickerコンポーネント内部では、状態をHSVAで保持する
29. © PLAID, Inc. どう実装する？ 29 ColorPicker HSVA
30. © PLAID, Inc. ColorPicker内部のUIや機能‧依存するライブラリが変わっても対応できる どう実装する？ 30 DB App ColorPicker RGBA HSVA HSL picker LCH picker LLM palette
31. © PLAID, Inc. まとめ 31 • カラーピッカーの実装⽅法は多様で最適解がない • 現状は2Dピッカーが主流だが、将来の拡張が考えられる • 型を決めて腐敗防⽌層を設けるのがよさそう