Slide 1

Slide 1 text

© kaonavi, inc. デザインシステムの レガシーコンポーネントを 刷新した話 kaonavi Tech Talk #20 ~フロントエンドスペシャル vol.3~ 2025.03.12 Wed

Slide 2

Slide 2 text

前田 雄佐 まえだ ゆうすけ 株式会社カオナビ プロダクトデベロップメント本部 ソフトウェアエンジニア(フロントエンド) 業務では新機能開発とデザインシステムの開発を担当 好きなReactのフックはuseEffect 発表者紹介 © kaonavi, inc. 2

Slide 3

Slide 3 text

背景 © kaonavi, inc. 3

Slide 4

Slide 4 text

現在、プロダクトデベロップメント本部では、 デザインシステムのコンポーネントで古いものを少し ずつ刷新して行くべく鋭意活動中です。 kaonavi sugaoは、「カオナビ」のプロダクトデザインシステムで す。 ブランドの個性を鮮明にしつつ、ユーザーのみなさまにとって使 いやすい体験を提供します。同時に、開発者・デザイナーにとっ ては、再利用しやすいコンポーネントの構築を目標としていま す。 カオナビを利用する全ての人を支える柱として、そして、ユー ザーと開発者を繋ぐつなぎ目として、重要な役割を果たしていき ます。 背景 © kaonavi, inc. 4

Slide 5

Slide 5 text

古いコンポーネントが 抱えがちな課題

Slide 6

Slide 6 text

レガシーコンポーネントあるある © kaonavi, inc. 6 ● Webアクセシビリティ への対応が不十分 ● パッケージやライブラリをアップデートすると動かな くなる ● 最初に作成した人がいない etc…

Slide 7

Slide 7 text

Webアクセシビリティ( a11y)とは

Slide 8

Slide 8 text

Webアクセシビリティ( a11y)とは © kaonavi, inc. 8 Accessibility 11文字 ● Web Accessibility Initiative (WAI)、1997年設立 ● WCAGが1999年に標準化がスタート ○ Web Content Accessibility Guidelines ● 現在は、WCAG2.2(2023年勧告)

Slide 9

Slide 9 text

なぜ対応が必要になったか? © kaonavi, inc. 9 ● 海外の規制強化 ○ アメリカではWebサイトのアクセシビリティ不足で訴訟も ○ EUにて、European Accessibility Act(EAA)が発効になり、企 業のアクセシブルなデジタルサービス提供が義務化 ● GoogleのSEOにもa11yが影響 ○ Core Web Vital

Slide 10

Slide 10 text

企業の価値としての Webアクセシビリティ © kaonavi, inc. 10 ● ユーザー層の拡大 ○ 高齢化により、視覚・聴覚・認知機能の低下に対応したサービス が以前よりも求められるように ● 企業ブランドと社会的責任 ○ 企業のアクセシビリティ対応が「社会的責任(CSR/ESG)」の一 環に。 ○ 投資家や消費者からの評価に繋がる

Slide 11

Slide 11 text

日本における取り組み © kaonavi, inc. 11 ● ウェブアクセシビリティ基盤委員会 ○ ウェブアクセシビリティ 導入ガイドブック ● JIS規格もあります ○ JIS X 8341-3 出典: wikipedia/デジタル庁

Slide 12

Slide 12 text

カオナビが取り組んでいること © kaonavi, inc. 12 ● カオナビデザインシステムsugaoを通してサービス 全体のアクセシビリティを向上すること

Slide 13

Slide 13 text

デザインシステムとしての課題 と 技術課題

Slide 14

Slide 14 text

実際に改修したコンポーネント © kaonavi, inc. 14 ● タブコンポーネント

Slide 15

Slide 15 text

実際に改修したコンポーネント © kaonavi, inc. 15 ● タブコンポーネント tab

Slide 16

Slide 16 text

実際に改修したコンポーネント © kaonavi, inc. 16 ● タブコンポーネント tablist

Slide 17

Slide 17 text

実際に改修したコンポーネント © kaonavi, inc. 17 ● タブコンポーネント tabpanel

Slide 18

Slide 18 text

a11y Treeをチェック © kaonavi, inc. 18 ● Google Chrome の開発者ツールで見ることができ るアクセシビリティツリー ここをクリック

Slide 19

Slide 19 text

デザインシステムとしての課題 © kaonavi, inc. 19 ● tablistとtabpanelのペアリングが実装側対応になって いた ● 色などのスタイルも実装側で自由に設定可能だった パッケージアップデートや修正対応がとてもツライ

Slide 20

Slide 20 text

デザインシステム課題への対応 © kaonavi, inc. 20 ● tablistとtabpanelのペアリングが実装側対応になっていた ○ tablist、tabpanelコンポーネントを実装 ● 色などのスタイルも実装側で自由に設定可能だった ○ デザイントークンを実装

Slide 21

Slide 21 text

技術課題 © kaonavi, inc. 21 ● ファイル1つに全部書かれていて可読性が低い ● 古い別のコンポーネントに依存していて、ライブラリ アップデートの阻害要因に ● Webアクセシビリティ対応で不十分なところがある

Slide 22

Slide 22 text

技術課題への対応 © kaonavi, inc. 22 ● ライブラリ or 自前の実装 ○ react-aria

Slide 23

Slide 23 text

自前で実装するという選択 © kaonavi, inc. 23 ● タブコンポーネントについては、react-ariaを利用し ない ● 変化の早いフロントエンドの仕様に追従しやすい仕 組みが必要だが、react-ariaはオーバースペック だった ● 求められていたものはシンプルな実装

Slide 24

Slide 24 text

具体的な実装アプローチ © kaonavi, inc. 24

Slide 25

Slide 25 text

ファイル1つに全部書かれていて可読性が低い © kaonavi, inc. 25 ファイルを分割して関心事が分か りやすくした

Slide 26

Slide 26 text

プロパティ設定を関数化して仕様変更へ対応しやすく © kaonavi, inc. 26

Slide 27

Slide 27 text

不十分だった Webアクセシビリティへ対応 © kaonavi, inc. 27 ● キーボード操作の最適化 ● 読み上げ機能の最適化

Slide 28

Slide 28 text

その他、実装における工夫 © kaonavi, inc. 28 ● ロジックとスタイルの分離 ● 制御型/非制御型の両対応 ○ 制御型: 実装側でロジックを渡す(タブに URLを割り当てる、タブが切り替わるタイミングで特定 の処理をする、など) ○ 非制御型: データを渡すだけで、タブとして利用可能 ● デザイントークンの型定義 ● テストの追加 ○ storybookのaddonを活用

Slide 29

Slide 29 text

まとめ © kaonavi, inc. 29

Slide 30

Slide 30 text

まとめ © kaonavi, inc. 30 ● カオナビはWebアクセシビリティ改善に積極的に取 り組んでいる ● Webアクセシビリティ対応では、変化の早いフロント エンドの仕様に追従しやすい仕組みが重要

Slide 31

Slide 31 text

ご清聴ありがとうございました!