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

by watsuyo_2

Slide 1

Slide 1 text

iCARE と Vue.js とコンポーネント設計とデザインシステムの話 2021/08/24 Tsuyoshi Hirosawa @watsuyo_2 1

Slide 2

Slide 2 text

@watsuyo_2 株式会社iCARE フロントエンドエンジニア産業技術大学院大学情報アーキテクチャコース在学中 2

Slide 3

Slide 3 text

Carelyの説明 #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中「iCARE Dev 採用」 3

Slide 4

Slide 4 text

Carelyの説明 #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中「iCARE Dev 採用」 4

Slide 5

Slide 5 text

iCARE の技術スタック #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中「iCARE Dev 採用」 5

Slide 6

Slide 6 text

iCARE のフロントエンド技術変遷 #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中「iCARE Dev 採用」 6

Slide 7

Slide 7 text

iCAREのフロントエンドチームの説明 #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中「iCARE Dev 採用」 7

Slide 8

Slide 8 text

iCAREのフロントエンドチームフルタイムメンバー 2020年10月入社時 2人 → 2021年8月現在 5人パートナーメンバー 2021年8月現在 3人アドバイザー、技術顧問 2021年8月現在 2人 #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中「iCARE Dev 採用」 8

Slide 9

Slide 9 text

フロントエンドメンバーが増えたエンジニア採用担当がJoinしたり VPoEが採用活動に軸足を置くなど、今後も毎月メンバーが増えていく #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中「iCARE Dev 採用」 9

Slide 10

Slide 10 text

背景の異なるフロントエンドエンジニア長年Flashを開発をされていたエンジニア Web業界が初めてのエンジニア全くの実務未経験学生インターンからの新卒エンジニア今思うと、最近のモダンJavaScriptフレームワーク(Vue.jsとかReactとか)をガッツリ触ってきたメンバーが少なかった #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中「iCARE Dev 採用」 10

Slide 11

Slide 11 text

iCAREには技術的に成長する土壌があった毎週フロントエンド勉強会フロントエンド定例それに追加してデザイナー×フロントエンド定例ペアプロ会フロントエンドの悩み事、実装方法の共有が頻繁に行われている #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中「iCARE Dev 採用」 11

Slide 12

Slide 12 text

フロントエンド専属のアドバイザーと技術顧問が在籍 @ozu_syo @kahirokunn #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中「iCARE Dev 採用」 12

Slide 13

Slide 13 text

Vue.js におけるコンポーネント設計とデザインシステム #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中「iCARE Dev 採用」 13

Slide 14

Slide 14 text

Vue.js におけるコンポーネント設計とデザインシステム実際にCarely-tableを実装した例既存のテーブルコンポーネントの洗い出し共通項のグルーピングデザイナーによるテーブルデザイン再設計 Typographyを細かく指定 #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中「iCARE Dev 採用」 14

Slide 15

Slide 15 text

デザインシステムは、ユーザー体験と開発者体験を向上未来のための実装スピード向上のため共通コンポーネントをドキュメントに沿って実装すれば最速でデザインを再現できる世界自分たちが開発するプロダクトの目に見える部分「Carelyって洗練されていてかっこいい！」「見た目が変わって使いやすくなったね！」 #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中「iCARE Dev 採用」 15

Slide 16

Slide 16 text

デザインシステムは、過去のデザイン負債を回収し、未来のデザインを構築デザイナーさん: 名人 @zouzei8to10 スピードを重視する反動で産まれたデザイン負債に敬意を払いつつデザインが共通化され、ユーザー体験も向上し、開発者にとって再利用可能なコンポーネントを実装 #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中「iCARE Dev 採用」 16

Slide 17

Slide 17 text

デザインが共通化され、ユーザー体験も向上し、開発者にとって再利用可能なコンポーネントを実装デザイナーさんや他のフロントエンドエンジニアとの協力が必要ユーザーにとってのペイン(情報の見にくさ、操作のしづらさ等)を解決今後、様々な箇所で再利用されることを前提に高いデザイン再現度を求められる #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中「iCARE Dev 採用」 17

Slide 18

Slide 18 text

デザインシステムの効果を評価するための定量計測定量的な数値を計測できていない Google Analytics 対面(オンライン)でのリサーチなどで計測？アイデアが欲しい #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中「iCARE Dev 採用」 18

Slide 19

Slide 19 text

既に共通コンポーネントが作られていた Buefy自体がコンポーネントを提供している Atom、Moleculesが中心主にMolecules、Organismsよりも粒度大きい共通コンポーネントを実装している #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中「iCARE Dev 採用」 19

Slide 20

Slide 20 text

数年前からStorybookが整備されていた UIコンポーネントのカタログを充実化 Docs Addon Design Tokenとして Typography等の整備 Storyのドキュメント整備 @ozu_syo #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中「iCARE Dev 採用」 20

Slide 21

Slide 21 text

Storybook にドキュメントを書く JSDocsの形式で記述できる Template、Types以外にもPropsや SlotsもDoc化できる @ozu_syo #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中「iCARE Dev 採用」 21

Slide 22

Slide 22 text

ICAREのデザインシステムプロジェクト、実はまだ始まったばかりなんですデザイナーさん、フロントエンドエンジニア募集してます #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中「iCARE Dev 採用」 22

Slide 23

Slide 23 text

Vue.jsでテーブルコンポーネント設計 #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中「iCARE Dev 採用」 23

Slide 24

Slide 24 text

#vuejs_study | iCAREではエンジニアとデザイナーさんを募集中「iCARE Dev 採用」 24

Slide 25

Slide 25 text

Vue.jsでテーブルコンポーネント設計これには典型的な情報の見にくさ(探しづらさ) 操作のしづらさが存在していて、それらを解決するコンポーネントを設計実装しました #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中「iCARE Dev 採用」 25

Slide 26

Slide 26 text

Vue.jsでテーブルコンポーネント設計 Typographyやpadding、marginを細かく指定 @zouzei8to10 #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中「iCARE Dev 採用」 26

Slide 27

Slide 27 text

UIフレームワークにBuefyを採用している。しかし、 Vue3サポートにジレンマがある Buefy: Bulmaを使った、Vueコンポーネントを提供するUIフレームワーク主だった開発者が別のフレームワークに専念している Vue3サポートプロジェクトが進んでいない #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中「iCARE Dev 採用」 27

Slide 28

Slide 28 text

共通コンポーネントではUIフレームワーク依存を極力抑えた設計が好ましい #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中「iCARE Dev 採用」 28

Slide 29

Slide 29 text

Buefyのb-tableを使います b-tableとb-table-columnのセットで成立しています {{ props.row.id }} {{ props.row.first_name }} {{ props.row.last_name }} . . #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中「iCARE Dev 採用」 29

Slide 30

Slide 30 text

実装方法とコンポーネント化のメリット Buefyのb-tableをラップするコンポーネントを作成 Vueのslotを活用 b-tableに渡すオプションやデータをまとめて渡すテーブルのcolumn部分は独立した共通コンポーネントとして実装 #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中「iCARE Dev 採用」 30

Slide 31

Slide 31 text

本当はこうやって実装したかった Error: You should wrap bTableColumn on a bTable 残念ながら、b-tableは、b-table-columnとの親子関係を強制します #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中「iCARE Dev 採用」 31

Slide 32

Slide 32 text

carely-table.vue template optionと、table dataを渡すことが役割 CSS 共通のstyleを定義このコンポーネントを経由するだけでデザインの統一化と一定以上のユーザー体験を簡単に実装できる #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中「iCARE Dev 採用」 32

Slide 33

Slide 33 text

利用側.vue props b-tableに求められている option tableData slots content-area という名前で、 carely-tableに渡す #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中「iCARE Dev 採用」 33

Slide 34

Slide 34 text

iCAREにおけるデザインシステムの未来デザイナーさんと協働で構築なぜ、共通コンポーネント化やデザインシステム構築が必要なのか？をDevチームや他部署の方にも伝える自分たちがやっていることの価値を最大化して、より強いプロダクトにするため、会社のブランディングとしてのデザインシステムになるようにする Storybookを公開して、外部発信 & ブランディングに繋げる #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中「iCARE Dev 採用」 34

Slide 35

Slide 35 text

iCAREにおけるフロントエンドの今後 2021~2022 デザインシステムを含めたデザインリニューアルデザイナーさんとフロントエンドエンジニアとの合意形成デザイナーさんとフロントエンドエンジニアとデザイン実装について話す時間を増やす期待される動作、POやデザイナーからの高いデザイン再現度を求められる中での最速リリース開発 #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中「iCARE Dev 採用」 35

Slide 36

Slide 36 text

iCARE では毎月ミートアップを開催しています https://icare.connpass.com/event/221 922/ #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中「iCARE Dev 採用」 36

Slide 37

Slide 37 text

これらの高い水準でパフォーマンスを発揮できる自信のあるフロントエンドエンジニアは是非iCAREでお待ちしております #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中「iCARE Dev 採用」 37