Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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/

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

More Decks by リンクアンドモチベーション

Other Decks in Technology

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デザイナー
    週1でテックブログ更新しています!
    まずはカジュアルにお話しましょう!
    ご連絡お待ちしております!
    全職種、積極採用中です!

    View Slide