デザインシステムのレガシーコンポーネントを刷新した話/Design System Legacy Renewal

2025年3月12日開催「kaonavi Tech Talk#20」で登壇した際の発表資料です。
https://kaonavi.connpass.com/event/344412/

◼︎イベント概要
カオナビでは、プロセスや、エンジニアリングについて日々改善をおこないながらアジャイルな開発を行なっています。
スクラムをスケールする際の工夫、品質向上へのチーム全体でのアプローチ、データ活用による顧客視点の醸成など、実りの多い内容が盛りだくさんです。
本イベントのアーカイブは下記からご覧いただけます！是非ご覧ください。
https://www.youtube.com/live/zQAlHonf-KA

◼︎kaonavi Tech Talkとは？
「"はたらく"にテクノロジーを実装し、個の力から社会の仕様を変える」というパーパスを掲げるカオナビによるオンラインイベントです！
HRTechのリーディングカンパニーであるカオナビの開発組織は、学習する組織として絶え間なく変化を続けてきました。
組織・チーム・プロセス・エンジニアリングなど多くの領域に対してTry&Errorを繰り返すことで学びを重ね、開発組織もサービスもカイゼンを行ってきました。
そうした学びは社内の勉強会や交流会で共有されてきましたが
カオナビの開発組織の文化・人を多くの方に知っていただきたい
社内外で学びを循環させ、コラボレーションを実現する場を創出したい
といった想いから、kaonavi Tech Talkは生まれました。
カオナビの開発最前線で活躍するメンバーがスピーカーを務め、日々の開発で得た学びを発信して参ります！
ぜひカジュアルにご参加いただければと思います。

Transcript

1. © kaonavi, inc. デザインシステムの レガシーコンポーネントを 刷新した話 kaonavi Tech Talk #20 ~フロントエンドスペシャル vol.3~ 2025.03.12 Wed
2. 前田 雄佐 まえだ　ゆうすけ 株式会社カオナビ プロダクトデベロップメント本部 ソフトウェアエンジニア（フロントエンド） 業務では新機能開発とデザインシステムの開発を担当 好きなReactのフックはuseEffect 発表者紹介 © kaonavi, inc. 2
3. 背景 © kaonavi, inc. 3
4. 現在、プロダクトデベロップメント本部では、 デザインシステムのコンポーネントで古いものを少し ずつ刷新して行くべく鋭意活動中です。 kaonavi sugaoは、「カオナビ」のプロダクトデザインシステムで す。 ブランドの個性を鮮明にしつつ、ユーザーのみなさまにとって使 いやすい体験を提供します。同時に、開発者・デザイナーにとっ ては、再利用しやすいコンポーネントの構築を目標としていま す。 カオナビを利用する全ての人を支える柱として、そして、ユー ザーと開発者を繋ぐつなぎ目として、重要な役割を果たしていき ます。 背景 © kaonavi, inc. 4
5. 古いコンポーネントが 抱えがちな課題
6. レガシーコンポーネントあるある © kaonavi, inc. 6 • Webアクセシビリティ への対応が不十分 • パッケージやライブラリをアップデートすると動かな くなる • 最初に作成した人がいない etc…
7. Webアクセシビリティ（ a11y）とは
8. Webアクセシビリティ（ a11y）とは © kaonavi, inc. 8 Accessibility １１文字 • Web Accessibility Initiative (WAI)、1997年設立 • WCAGが1999年に標準化がスタート ◦ Web Content Accessibility Guidelines • 現在は、WCAG2.2（2023年勧告）
9. なぜ対応が必要になったか？ © kaonavi, inc. 9 • 海外の規制強化 ◦ アメリカではWebサイトのアクセシビリティ不足で訴訟も ◦ EUにて、European Accessibility Act（EAA）が発効になり、企 業のアクセシブルなデジタルサービス提供が義務化 • GoogleのSEOにもa11yが影響 ◦ Core Web Vital
10. 企業の価値としての Webアクセシビリティ © kaonavi, inc. 10 • ユーザー層の拡大 ◦ 高齢化により、視覚・聴覚・認知機能の低下に対応したサービス が以前よりも求められるように • 企業ブランドと社会的責任 ◦ 企業のアクセシビリティ対応が「社会的責任（CSR/ESG）」の一 環に。 ◦ 投資家や消費者からの評価に繋がる
11. 日本における取り組み © kaonavi, inc. 11 • ウェブアクセシビリティ基盤委員会 ◦ ウェブアクセシビリティ 導入ガイドブック • JIS規格もあります ◦ JIS X 8341-3 出典: wikipedia/デジタル庁
12. カオナビが取り組んでいること © kaonavi, inc. 12 • カオナビデザインシステムsugaoを通してサービス 全体のアクセシビリティを向上すること
13. デザインシステムとしての課題 と 技術課題
14. 実際に改修したコンポーネント © kaonavi, inc. 14 • タブコンポーネント
15. 実際に改修したコンポーネント © kaonavi, inc. 15 • タブコンポーネント tab
16. 実際に改修したコンポーネント © kaonavi, inc. 16 • タブコンポーネント tablist
17. 実際に改修したコンポーネント © kaonavi, inc. 17 • タブコンポーネント tabpanel
18. a11y Treeをチェック © kaonavi, inc. 18 • Google Chrome の開発者ツールで見ることができ るアクセシビリティツリー ここをクリック
19. デザインシステムとしての課題 © kaonavi, inc. 19 • tablistとtabpanelのペアリングが実装側対応になって いた • 色などのスタイルも実装側で自由に設定可能だった パッケージアップデートや修正対応がとてもツライ
20. デザインシステム課題への対応 © kaonavi, inc. 20 • tablistとtabpanelのペアリングが実装側対応になっていた ◦ tablist、tabpanelコンポーネントを実装 • 色などのスタイルも実装側で自由に設定可能だった ◦ デザイントークンを実装
21. 技術課題 © kaonavi, inc. 21 • ファイル１つに全部書かれていて可読性が低い • 古い別のコンポーネントに依存していて、ライブラリ アップデートの阻害要因に • Webアクセシビリティ対応で不十分なところがある
22. 技術課題への対応 © kaonavi, inc. 22 • ライブラリ or 自前の実装 ◦ react-aria
23. 自前で実装するという選択 © kaonavi, inc. 23 • タブコンポーネントについては、react-ariaを利用し ない • 変化の早いフロントエンドの仕様に追従しやすい仕 組みが必要だが、react-ariaはオーバースペック だった • 求められていたものはシンプルな実装
24. 具体的な実装アプローチ © kaonavi, inc. 24
25. ファイル１つに全部書かれていて可読性が低い © kaonavi, inc. 25 ファイルを分割して関心事が分か りやすくした
26. プロパティ設定を関数化して仕様変更へ対応しやすく © kaonavi, inc. 26
27. 不十分だった Webアクセシビリティへ対応 © kaonavi, inc. 27 • キーボード操作の最適化 • 読み上げ機能の最適化
28. その他、実装における工夫 © kaonavi, inc. 28 • ロジックとスタイルの分離 • 制御型/非制御型の両対応 ◦ 制御型: 実装側でロジックを渡す（タブに URLを割り当てる、タブが切り替わるタイミングで特定 の処理をする、など） ◦ 非制御型: データを渡すだけで、タブとして利用可能 • デザイントークンの型定義 • テストの追加 ◦ storybookのaddonを活用
29. まとめ © kaonavi, inc. 29
30. まとめ © kaonavi, inc. 30 • カオナビはWebアクセシビリティ改善に積極的に取 り組んでいる • Webアクセシビリティ対応では、変化の早いフロント エンドの仕様に追従しやすい仕組みが重要
31. ご清聴ありがとうございました！