Vue.jsとReactに対応した 社内UI Componentsライブラリを構築した話/Vue.js v-tokyo Meetup #17-link-and-motivation

【Vue.js v-tokyo Meetup #17】
リンクアンドモチベーション登壇資料（2023/05/18）

『Vue.jsとReactに対応した 社内UI Componentsライブラリを構築した話』

#v_tokyo17 #リンクアンドモチベーション #リンモチ
=============================================
【イベント情報】
■イベントページ
　https://vuejs-meetup.connpass.com/event/279254/

【株式会社リンクアンドモチベーション】
■お問い合わせ
　engineer_pr@lmi.ne.jp
■Entrancebook
　https://note.com/lmi/n/n179505e048f4
■テックブログ
　https://link-and-motivation.hatenablog.com/
=============================================

Transcript

1. © Link and Motivation Group Vue.jsとReactに対応した 社内UI Componentsライブラリを構築した話 株式会社リンクアンドモチベーション フロントエンドエンジニア 鵜木 義秀
2. © Link and Motivation Group こちらは2023年5月18日の「Vue.js v-tokyo Meetup #17」 に登壇した際に使用したスライドです。 「登壇時に口頭説明した内容をスライドにも含めて欲しい」との声を頂きましたので 右上にあるような形で口頭説明した内容の要約を追加しております。 （口頭説明した内容をこういった形で追加しております。）
3. © Link and Motivation Group うのきよしひで 株式会社リンクアンドモチベーション フロントエンドエンジニア @nokki_y #Vue.js #TypeScript #Design_System
4. © Link and Motivation Group ことの始まり
5. © Link and Motivation Group MCS New! 弊社にはVue.jsを採用したMCS（モチベーションクラウドシリー ズ）というプロダクト群がある。 ここにReactプロダクトが新しく入ってきたことが、 今回ライブラリを開発するきっかけに。
6. © Link and Motivation Group Web Components フレームワーク共通で作る場合、最近だとWeb Componentsが よく候補に上がるが、今回は採用していない。
7. © Link and Motivation Group Web Components
8. © Link and Motivation Group 3 Party UI Library Headless UI Component 3 Party UI Libraryも現状採用していない。Vue.jsとReactで親和性の高いライブラ リを選んでも、見た目や振る舞いに差異がでることが理由。 Headless UI Componentも候補に上がったが、Vue.jsとReactに対応し かつコンポーネント数の多いものが見つからなかったため不採用とした。
9. © Link and Motivation Group 実際に作ってみてどうだったか
10. © Link and Motivation Group 👍 コンポーネント実装が割と低コスト 1 1 2 1 + 1 =
11. © Link and Motivation Group 👍 コンポーネント実装が割と低コスト 0.2 0.2 1.2 0.2 + 0.8 + 0.2 = 0.8 ※こちらはあくまで参考値です。ご了承ください 🙇
12. © Link and Motivation Group 👍 コンポーネント実装が割と低コスト VueとReactを別々で実装する場合、単純計算で2倍のコストが必要だが、UI Componentsは データや状態の複雑な取り扱いが少ないため、Vue.jsやReactに依存するコードが少なく、 JSやCSS（厳密にはTSとSCSS）に切り出して共通化できる割合が多くできた。 これがアプリケーションコードだとこの共通化の割合が小さくなると思われる。 結果、実装工数が1.x倍程度、2倍を下回るような工数となっている。 この工数はコンポーネントによって前後するものの、体感的にも楽と感じている。
13. © Link and Motivation Group 👍 UIロジックのUnit Testは一つでいける 共通化されている部分の割合が大きいため、テストの大半を共通化できている。
14. © Link and Motivation Group 👍 UIロジックのUnit Testは一つでいける Next Try ビジュアルリグレッションテストの導入と共通化 VRTはまだ導入できていないが、今後の導入ではここも共通化したいと考えている。 そもそもUIなので、ユーザーにどう見えるか、どう振る舞うかが一番大事。 今回のUIライブラリはVue.jsとReactでここの差異をなくすことが目的の一つなので、極論になるが同じテス トケースに対して同じ結果が得られることが理想的だと考えている。
15. © Link and Motivation Group 👎 基盤の構築が大変 基盤の構築はすごく大変。 Vue.jsとReactの基盤をそれぞれ作ったわけではなく、一部共通 化している。
16. © Link and Motivation Group 👎 基盤の構築が大変 結果、各設定ごとのルールに沿って共通化をする必要が発生しづらかった。 また、スタンダードから外れた構成を取らなければいけない場面も何度か発生し、 エディタによってはConfigファイルを認識してくれず、コードジャンプができない等 の問題にもぶつかった。 先述の通りUIコンポーネントのようにシンプルなものではなく、複雑なものを共通化 するのは骨が折れる。 ここは工数が2倍以上かかったが、頻繁に改修を入れる部分ではないので 許容している。
17. © Link and Motivation Group さいごに 今回Vue.jsとReactでの共通ライブラリを実装して思ったことは、
18. © Link and Motivation Group Vue.js React or これまで暗黙的に「Vue.js or React」という認識、場面によっては「Vue.js vs React」 と考えたりしていましたが、
19. © Link and Motivation Group Vue.js React and 今回のように条件があえば業務でも「Vue.js and React」が実現できると気がついた。
20. © Link and Motivation Group お知らせ • エンジニアリングマネージャー • プロダクトマネージャー • テックリード • サーバーサイドエンジニア • フロントエンドエンジニア • SRE • データエンジニア • CRM • UXデザイナー 週１でテックブログ更新しています！ まずはカジュアルにお話しましょう！ ご連絡お待ちしております！ 全職種、積極採用中です！