HeadlessなUIライブラリを利用する価値

Speaker : Yuito Kawashima ( https://github.com/yuitokawashima )
at 「Vue.js v-tokyo Meetup #20」

https://vuejs-meetup.connpass.com/event/318066/

Transcript

1. 1 ɹɹʛɹɹ© 2024 PLAID Inc. Headlessな UIライブラリを利⽤する価値 yuitokawashima
2. ⾃⼰紹介 2 ɹɹʛɹɹ© 2024 PLAID Inc. ⾃⼰紹介 Yuito Kawashima プロダクトマネージャー & ソフトウェアエンジニア ‧ PdM、 フロン トエンド領域にて 
 スタートアップを中⼼に多くの企業をサポート ‧ Webを中⼼に受託開発事業を運営 
 企画、 デザイン、 開発すべての⼯程を⾏う ‧ プレイドでKARTE Webのプロダク トマネジメン ト yuitokawashima
3. 3 ɹɹʛɹɹ© 2020 PLAID Inc. ① What is Headless ?
4. 4 ɹɹʛɹɹ© 2020 PLAID Inc. What is Headless ? HeadlessなUIライブラリって 使ったこと、 聞いたことありますか？
5. What is Headless ? 5 ɹɹʛɹɹ© 2024 PLAID Inc. Headless UIライブラリ
6. 6 ɹɹʛɹɹ© 2020 PLAID Inc. What is Headless ? ひとことで⾔うと… スタイル以外の 
 "振る舞い" を提供するライブラリ
7. 7 ɹɹʛɹɹ© 2020 PLAID Inc. What is Headless ? 今回はradix-vueを使って 
 例を⾒ていきます
8. 8 ɹɹʛɹɹ© 2020 PLAID Inc. What is Headless ? 例えば Dropdown MyDropdown.vue スタイルはないけど、 Dropdownの動作をします ※ speakerdeck版ではサンプルの動画を静⽌画に変更しています
9. 9 ɹɹʛɹɹ© 2020 PLAID Inc. What is Headless ? カスタマイズする MyDropdown.vue （radix-vue + tailwind） スタイルを付与するだけでよ くみるDropdownが完成 ※ speakerdeck版ではサンプルの動画を静⽌画に変更しています
10. What is Headless ? 10 ɹɹʛɹɹ© 2024 PLAID Inc. この例からわかる 
 "振る舞い" とは？ ‧ クリ ックでメニューの表⽰を切り替え ‧ タブやキーボード操作で移動 ‧ 選択 ‧ 状態や適合するARIAの制御 動作 アクセシビリティ ‧ Outer Clickでメニュー要素を⾮表⽰
11. 11 ɹɹʛɹɹ© 2020 PLAID Inc. ② これまでのUI開発における選択肢
12. これまでのUI開発における選択肢 12 ɹɹʛɹɹ© 2024 PLAID Inc. UIライブラリを使う スクラッチで書く or
13. ‧ 既存スタイルの打ち消し ‧ 上書きって 
 実現可能性の判断含めめっちゃ⼤変 ‧ 既存スタイルはないから打ち消し不要 ‧ DOM構造が変更できず 
 オリジナルUIの適⽤が難しい… これまでのUI開発における選択肢 13 ɹɹʛɹɹ© 2024 PLAID Inc. ‧ ↑の結果 『脱{{ライブラリ名}}』 みたいのは じまる 「UIライブラリを使う」 との⽐較 ‧ 振る舞い （品質） を担保したまま 
 デザインリニューアルができる ‧ 構造もカスタムできるから 
 オリジナルUIの適⽤OK
14. これまでのUI開発における選択肢 14 ɹɹʛɹɹ© 2024 PLAID Inc. ‧ 時間かかるしスクラッチで書ける⼈いない ‧ ⾒た⽬や動作レベルでは書けても、 
 アクセシビリティ考慮は茨の道 ‧ 新UIを試したいけどコスト的に 
 既存コンポーネン トを使おうとなりがち ‧ スタイル書くだけで超早い 「スクラッチで書く」 との⽐較 ‧ アクセシビリティも考慮される ‧ 最⼩コストで開発できるから試しやすい
15. 15 ɹɹʛɹɹ© 2020 PLAID Inc. ③ Headlessである価値
16. 16 ɹɹʛɹɹ© 2020 PLAID Inc. Headlessである価値 ひとことで⾔うと… オリジナルUI の アクセシブル な UIコンポーネントが 爆速で作れる
17. Headlessである価値 17 ɹɹʛɹɹ© 2024 PLAID Inc. 組織に与える価値 ‧ 低い開発コストで品質担保できるから 
 意思決定がしやすい ‧ ⺠間事業者もアクセシビリティが努⼒義務に。 
 より採択/信頼を得やすいプロダクトに ‧ マークアップスキルのみでも複雑なUIが 
 つくれるので分業しやすい
18. 18 ɹɹʛɹɹ© 2020 PLAID Inc. ④ プレイドでの導⼊事例
19. 19 ɹɹʛɹɹ© 2020 PLAID Inc. プレイドは新デザインシステム 
 「Sour」 の構築を進めています
20. プレイドでの導⼊事例 20 ɹɹʛɹɹ© 2020 PLAID Inc. KARTE Webチーム KARTEのベース機能を開発しているチーム 5-6年前く らいからある機能が多く 
 ほぼすべてが Vue 2 x 旧デザイン ‧ 新機能は新UIにしたい ! ‧ 機能のリニューアルでも 
 既存のロジックを使いたい !! ‧ ついでにVue 3 にもしたい !!!
21. プレイドでの導⼊事例 21 ɹɹʛɹɹ© 2024 PLAID Inc. Sour for Vue 3 radix-vue を使ってSourに対応した 
 UIコンポーネン トライブラリを開発
22. プレイドでの導⼊事例 22 ɹɹʛɹɹ© 2024 PLAID Inc. 実際のコンポーネントを 
 ⼀部公開 ！ ‧ オリジナルデザインに合わせて構造を組んでいく ‧ asChildを付与するとDOMの実体は⼦要素に ‧ ↑によりTriggerをクリ ックしたらmenuが開く 
 のような挙動も引き継がれる
23. ‧ 中⾝のDOM構造含めて 
 カスタマイズ可能なことがわかります プレイドでの導⼊事例 23 ɹɹʛɹɹ© 2024 PLAID Inc. ⼦コンポーネントは 
 こんな感じ ‧ Slotを使って柔軟なコンポーネン トに 
 なんてことも簡単です
24. ‧ 複雑なハンドリングやカスタマイズなしで 
 ほぼスタイリングするだけで完結 24 ɹɹʛɹɹ© 2020 PLAID Inc. プレイドでの導⼊事例 実際に作成された Dropdownコンポーネント ‧ スクラッチで書くのに近いレベルの柔軟性が 
 実現可能
25. 25 ɹɹʛɹɹ© 2020 PLAID Inc. Headlessである価値 Headless UIライブラリ 検討してみてはいかがでし ょ うか？
26. 26 ɹɹʛɹɹ© 2020 PLAID Inc. 最後にお知らせ
27. 27 ɹɹʛɹɹ© 2020 PLAID Inc. What is Headless ? 以下のイベントでプレイドはブースを出展します 来場予定の⽅はぜひブースへ遊びに来てください
28. 28 ɹɹʛɹɹ© 2020 PLAID Inc. ありがとうございました ！ 以上で終了となります