iCARE と Vue.js と コンポーネント設計 と デザインシステムの話

2021/08/24 【Vue.js】急成長スタートアップを支えるフロントエンド戦略 @finatext

1. iCARE と Vue.js と コンポーネント設計 と デザインシステム の話 2021/08/24 Tsuyoshi Hirosawa @watsuyo_2 1
2. @watsuyo_2 株式会社iCARE フロントエンドエンジニア 産業技術大学院大学 情報アーキテクチャコース在学中 2
3. Carelyの説明 #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中 「iCARE Dev 採用」 3
4. Carelyの説明 #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中 「iCARE Dev 採用」 4
5. iCARE の技術スタック #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中 「iCARE Dev 採用」 5
6. iCARE の フロントエン ド技術 変遷 #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中 「iCARE Dev 採用」 6
7. iCAREのフロントエンドチームの説明 #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中 「iCARE Dev 採用」 7
8. iCAREのフロントエンドチーム フルタイムメンバー 2020年10月 入社時 2人 → 2021年8月現在 5人 パートナーメンバー 2021年8月現在 3人 アドバイザー、技術顧問 2021年8月現在 2人 #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中 「iCARE Dev 採用」 8
9. フロントエンドメンバーが増えた エンジニア採用担当がJoinしたり VPoEが採用活動に軸足を置く など、今後も毎月メンバーが増えていく #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中 「iCARE Dev 採用」 9
10. 背景の異なるフロントエンドエンジニア 長年Flashを開発をされていたエンジニア Web業界が初めてのエンジニア 全くの実務未経験 学生インターンからの新卒エンジニア 今思うと、最近のモダンJavaScriptフレームワーク(Vue.jsとかReactとか)をガッツリ触って きたメンバーが少なかった #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中 「iCARE Dev 採用」 10
11. iCAREには技術的に成長する土壌があった 毎週 フロントエンド勉強会 フロントエンド定例 それに追加して デザイナー×フロントエンド定例 ペアプロ会 フロントエンドの悩み事、実装方法の共有が頻繁に行われている #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中 「iCARE Dev 採用」 11
12. フロントエンド専属のアドバイザーと技術顧問が在籍 @ozu_syo @kahirokunn #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中 「iCARE Dev 採用」 12
13. Vue.js におけるコンポーネント設計とデザインシステム #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中 「iCARE Dev 採用」 13
14. Vue.js におけるコンポーネント設計とデザインシステム 実際にCarely-tableを実装した例 既存のテーブルコンポーネントの洗い出し 共通項のグルーピング デザイナーによるテーブルデザイン再設計 Typographyを細かく指定 #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中 「iCARE Dev 採用」 14
15. デザインシステムは、ユーザー体験と開発者体験を向上 未来のための実装スピード向上のため 共通コンポーネントをドキュメントに沿って実装すれば最速でデザインを 再現できる世界 自分たちが開発するプロダクトの目に見える部分 「Carelyって洗練されていてかっこいい！」「見た目が変わって使いやすくなった ね！」 #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中 「iCARE Dev 採用」 15
16. デザインシステムは、過去のデザイン負債を回収し、 未来のデザインを構築 デザイナーさん: 名人 @zouzei8to10 スピードを重視する反動で産まれたデザイン負債に敬意を払いつつ デザインが共通化され、ユーザー体験も向上し、開発者にとって 再利用可能なコンポーネントを実装 #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中 「iCARE Dev 採用」 16
17. デザインが共通化され、ユーザー体験も向上し、開発者に とって再利用可能なコンポーネントを実装 デザイナーさんや他のフロントエンドエンジニアとの協力が必要 ユーザーにとってのペイン(情報の見にくさ、操作のしづらさ等)を解決 今後、様々な箇所で再利用されることを前提に高いデザイン再現度を求められる #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中 「iCARE Dev 採用」 17
18. デザインシステムの効果を評価するための定量計測 定量的な数値を計測できていない Google Analytics 対面(オンライン)でのリサーチ などで計測？ アイデアが欲しい #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中 「iCARE Dev 採用」 18
19. 既に共通コンポーネントが作られていた Buefy自体がコンポーネントを提供している Atom、Moleculesが中心 主にMolecules、Organismsよりも粒度大きい共通コンポーネントを実装している #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中 「iCARE Dev 採用」 19
20. 数年前からStorybookが 整備されていた UIコンポーネントのカタログを充 実化 Docs Addon Design Tokenとして Typography等の整備 Storyのドキュメント整備 @ozu_syo #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中 「iCARE Dev 採用」 20
21. Storybook にドキュメン トを書く JSDocsの形式で記述できる Template、Types以外にもPropsや SlotsもDoc化できる @ozu_syo #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中 「iCARE Dev 採用」 21
22. ICAREのデザインシステムプロジェ クト、実はまだ始まったばかりなん です デザイナーさん、フロントエンド エンジニア募集してます #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中 「iCARE Dev 採用」 22
23. Vue.jsでテーブルコンポーネント設計 #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中 「iCARE Dev 採用」 23
24. #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中 「iCARE Dev 採用」 24
25. Vue.jsでテーブルコンポーネント設計 これには典型的な 情報の見にくさ(探しづらさ) 操作のしづらさ が存在していて、それらを解決するコンポーネントを設計実装しました #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中 「iCARE Dev 採用」 25
26. Vue.jsでテーブルコンポ ーネント設計 Typographyやpadding、marginを 細かく指定 @zouzei8to10 #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中 「iCARE Dev 採用」 26
27. UIフレームワークにBuefyを採用している。しかし、 Vue3サポートにジレンマがある Buefy: Bulmaを使った、Vueコンポーネントを提供するUIフレームワーク 主だった開発者が別のフレームワークに専念している Vue3サポートプロジェクトが進んでいない #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中 「iCARE Dev 採用」 27
28. 共通コンポーネントではUIフレームワーク依存を極力抑え た設計が好ましい #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中 「iCARE Dev 採用」 28
29. Buefyのb-tableを使います b-tableとb-table-columnのセットで成立しています <b-table :data="isEmpty ? [] : data" :bordered="isBordered" :striped="isStriped" . . > <b-table-column field="id" label="ID" width="40" :td-attrs="columnTdAttrs" numeric v-slot="props"> {{ props.row.id }} </b-table-column> <b-table-column field="first_name" label="First Name" :td-attrs="columnTdAttrs" v-slot="props"> {{ props.row.first_name }} </b-table-column> <b-table-column field="last_name" label="Last Name" :td-attrs="columnTdAttrs" v-slot="props"> {{ props.row.last_name }} </b-table-column> . . #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中 「iCARE Dev 採用」 29
30. 実装方法とコンポーネント化のメリット Buefyのb-tableをラップするコンポーネントを作成 Vueのslotを活用 b-tableに渡すオプションやデータをまとめて渡す テーブルのcolumn部分は独立した共通コンポーネントとして実装 #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中 「iCARE Dev 採用」 30
31. 本当はこうやって実装したかった Error: You should wrap bTableColumn on a bTable 残念ながら、b-tableは、b-table-columnとの親子関係を強制します <carely-table> <template #default="{ row }"> <common-clumn-set :common="row.common1" /> <common-clumn-set :common="row.common2" /> <common-clumn-set :common="row.common3" /> </template> </carely-table> #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中 「iCARE Dev 採用」 31
32. carely-table.vue template optionと、table dataを渡すことが 役割 CSS 共通のstyleを定義 このコンポーネントを経由するだけで デザインの統一化と一定以上の ユーザー体験を簡単に実装できる #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中 「iCARE Dev 採用」 32
33. 利用側.vue props b-tableに求められている option tableData slots content-area という名前で、 carely-tableに渡す #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中 「iCARE Dev 採用」 33
34. iCAREにおけるデザインシステムの未来 デザイナーさんと協働で構築 なぜ、共通コンポーネント化やデザインシステム構築が必要なのか？をDevチームや他 部署の方にも伝える 自分たちがやっていることの価値を最大化して、より強いプロダクトにするため、 会社のブランディングとしてのデザインシステムになるようにする Storybookを公開して、外部発信 & ブランディングに繋げる #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中 「iCARE Dev 採用」 34
35. iCAREにおけるフロントエンドの今後 2021~2022 デザインシステムを含めたデザインリニューアル デザイナーさんとフロントエンドエンジニアとの合意形成 デザイナーさんとフロントエンドエンジニアと デザイン実装について話す時間を増やす 期待される動作、POやデザイナーからの高いデザイン再現度を 求められる中での最速リリース開発 #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中 「iCARE Dev 採用」 35
36. iCARE では毎月ミート アップを開催しています https://icare.connpass.com/event/221 922/ #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中 「iCARE Dev 採用」 36
37. これらの高い水準でパフォーマンスを発揮できる自信のあ るフロントエンドエンジニアは是非iCAREでお待ちしてお ります #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中 「iCARE Dev 採用」 37