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ライブラリを構築した話
   株式会社リンクアンドモチベーション
   フロントエンドエンジニア
   鵜木 義秀
   

   View Slide

2. © Link and Motivation Group
   こちらは2023年5月18日の「Vue.js v-tokyo Meetup #17」
   に登壇した際に使用したスライドです。
   「登壇時に口頭説明した内容をスライドにも含めて欲しい」との声を頂きましたので
   右上にあるような形で口頭説明した内容の要約を追加しております。
   （口頭説明した内容をこういった形で追加しております。）
   

   View Slide

3. © Link and Motivation Group
   うのきよしひで
   株式会社リンクアンドモチベーション
   フロントエンドエンジニア
   @nokki_y
   #Vue.js #TypeScript #Design_System
   

   View Slide

4. © Link and Motivation Group
   ことの始まり
   

   View Slide

5. © Link and Motivation Group
   MCS
   New!
   弊社にはVue.jsを採用したMCS（モチベーションクラウドシリー
   ズ）というプロダクト群がある。
   ここにReactプロダクトが新しく入ってきたことが、
   今回ライブラリを開発するきっかけに。
   

   View Slide

6. © Link and Motivation Group
   Web Components
   フレームワーク共通で作る場合、最近だとWeb Componentsが
   よく候補に上がるが、今回は採用していない。
   

   View Slide

7. © Link and Motivation Group
   Web Components
   

   View Slide

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に対応し
   かつコンポーネント数の多いものが見つからなかったため不採用とした。
   

   View Slide

9. © Link and Motivation Group
   実際に作ってみてどうだったか
   

   View Slide

10. © Link and Motivation Group
    👍 コンポーネント実装が割と低コスト
    1 1
    2
    1 + 1 =
    

    View Slide

11. © Link and Motivation Group
    👍 コンポーネント実装が割と低コスト
    0.2 0.2
    1.2
    0.2 + 0.8 + 0.2 =
    0.8
    ※こちらはあくまで参考値です。ご了承ください 🙇
    

    View Slide

12. © Link and Motivation Group
    👍 コンポーネント実装が割と低コスト
    VueとReactを別々で実装する場合、単純計算で2倍のコストが必要だが、UI Componentsは
    データや状態の複雑な取り扱いが少ないため、Vue.jsやReactに依存するコードが少なく、
    JSやCSS（厳密にはTSとSCSS）に切り出して共通化できる割合が多くできた。
    これがアプリケーションコードだとこの共通化の割合が小さくなると思われる。
    結果、実装工数が1.x倍程度、2倍を下回るような工数となっている。
    この工数はコンポーネントによって前後するものの、体感的にも楽と感じている。
    

    View Slide

13. © Link and Motivation Group
    👍 UIロジックのUnit Testは一つでいける
    共通化されている部分の割合が大きいため、テストの大半を共通化できている。
    

    View Slide

14. © Link and Motivation Group
    👍 UIロジックのUnit Testは一つでいける
    Next Try
    ビジュアルリグレッションテストの導入と共通化
    VRTはまだ導入できていないが、今後の導入ではここも共通化したいと考えている。
    そもそもUIなので、ユーザーにどう見えるか、どう振る舞うかが一番大事。
    今回のUIライブラリはVue.jsとReactでここの差異をなくすことが目的の一つなので、極論になるが同じテス
    トケースに対して同じ結果が得られることが理想的だと考えている。
    

    View Slide

15. © Link and Motivation Group
    👎 基盤の構築が大変 基盤の構築はすごく大変。
    Vue.jsとReactの基盤をそれぞれ作ったわけではなく、一部共通
    化している。
    

    View Slide

16. © Link and Motivation Group
    👎 基盤の構築が大変 結果、各設定ごとのルールに沿って共通化をする必要が発生しづらかった。
    また、スタンダードから外れた構成を取らなければいけない場面も何度か発生し、
    エディタによってはConfigファイルを認識してくれず、コードジャンプができない等
    の問題にもぶつかった。
    先述の通りUIコンポーネントのようにシンプルなものではなく、複雑なものを共通化
    するのは骨が折れる。
    ここは工数が2倍以上かかったが、頻繁に改修を入れる部分ではないので
    許容している。
    

    View Slide

17. © Link and Motivation Group
    さいごに
    今回Vue.jsとReactでの共通ライブラリを実装して思ったことは、
    

    View Slide

18. © Link and Motivation Group
    Vue.js React
    or
    これまで暗黙的に「Vue.js or React」という認識、場面によっては「Vue.js vs
    React」
    と考えたりしていましたが、
    

    View Slide

19. © Link and Motivation Group
    Vue.js React
    and
    今回のように条件があえば業務でも「Vue.js and React」が実現できると気がついた。
    

    View Slide

20. © Link and Motivation Group
    お知らせ
    ● エンジニアリングマネージャー
    ● プロダクトマネージャー
    ● テックリード
    ● サーバーサイドエンジニア
    ● フロントエンドエンジニア
    ● SRE
    ● データエンジニア
    ● CRM
    ● UXデザイナー
    週１でテックブログ更新しています！
    まずはカジュアルにお話しましょう！
    ご連絡お待ちしております！
    全職種、積極採用中です！
    

    View Slide