こんにちは、フロントエンドエンドエンジニアの菊池です。
弊社ではフロントエンド横断組織であるフロント会*1にて、様々な改善活動を行っています。
今回はその取り組みの一環として行っている共通モジュール、通称MCS Dev Kitの開発について紹介したいと思います。
MCS Dev Kitとは
MCS Dev Kit(以下MDK)*2は、プロダクト共通で利用するアイコンやコンポーネント、カラーといった再利用可能なパーツを内包したライブラリ群です。
単一リポジトリ(monorepo)で開発しており、GitHub Packagesで社内向けに公開しています。
Vue.jsで構成されたアプリケーション向けに提供するので、MDKの開発も基本はVue.jsを対象としていますが、 最終JSになっていれば良いのでTypeScript + Viteで作ったり、色々試してみたい技術を入れたりと自由に開発しています。
現在は最初のライブラリとして、プロダクト共通のアイコンライブラリを開発しています。
アイコンは、ボタンやドロップダウンといった汎用コンポーネントに比べると
- APIが変わりにくい(破壊的変更のリスクが低い)
- アプリケーションでの利用率が高い
ため、始めやすく効果が高いです。
1つのプロダクトへの導入が完了し、他プロダクトに展開していくフェーズに入りましたが、大きな手戻りもなくスムーズに導入できたので、まず共通化するのであればアイコンは良い選択肢だと思います。
(導入したアイコンライブラリの例)
<script> import { McsIconPen } from '@lmi-mcs/mcs-icon-vue'; </script>
<template> <McsIconPen /> <McsIconPen class="xs" /> </template>
開発のモチベーション
MDK開発の背景についても簡単に触れておきたいと思います。
弊社では複数プロダクトを開発していますが、現状は似たようなコンポーネントであっても毎回作り直すか、コピーして流用されていました。
そのため単純にコストがかかるだけでなく、プロダクト毎に操作感や色味が異なっていたり、デザインの変更があった場合にそれぞれで改修し直す必要があります。
こうした「重複コストの削減」と「UX・ブランドの統一」は共通ライブラリ作成の大きな理由だと思います。
加えてライブラリに切り出せばアプリケーションから独立した開発環境・開発フローを導入しやすいです。
アプリケーションレベルでの技術導入やリアーキテクトはどうしてもパワーがいる作業です。*3
小さいライブラリに切り出して、そのライブラリ開発から技術を取り入れて、アプリケーションに組み込む。
ライブラリ開発は、開発者にとっても「技術力の向上」として、新しい技術を試せる良い実験場になると考えています。
共通ライブラリとしての指針
一方で、共通ライブラリというふわっとしたコンセプトだと、
- 開発をどう進めていくか?
など、このライブラリに対する開発者の意思が揃わない可能性があります。
そこでMDKでは開発の指針を以下のように明確に定めています。
「Small & Fast - 使う側も作る側も小さく早く」
このような指針があることで、悩んだときでも「まずは小さく取り入れてみよう!」と意思決定がしやすくなり、立ち止まることがぐっと減ったように思います。
リポジトリ構成について
前述したように、MDKはモノレポで開発しています。
packages/ mcs-icon/ mcs-icon-vue/ mcs-components/ ... package.json tsconfig.json
モノレポだと、各ライブラリを分担して開発しながら、かつテストやリリースのフローを統一できます。
特に初期フェーズでは開発環境やフローの変更も多いので、一元的に変更を反映し、コントロールできるのもメリットだと思います。
(うまく調整すれば一部だけにいれて、後から展開するってことも可能です)
一方でモノレポは通常のリポジトリとは異なるリリース手順を必要とし、少し煩雑になりやすいです。
ツールもモノレポに対応していないことが多い、、
現状は Turborepo + Changesets でリリースを行っていますが、ここのアップデートも取り組んでいるので、後々事例も紹介していきたいと思います。
今後の展望
プロダクト共通モジュール MCS Dev Kitについて紹介しました。
まだライブラリも少なく始まったばかりですが、フットワーク軽く開発を進められています。
今後はライブラリを拡充していきながら、
- アプリケーション開発者の体験向上
- ライブラリ開発者の体験向上
- 品質向上(テスト)
なども整備していく予定です。
フロント会では今後もMDK含め、フロントエンドの取り組みについてどしどし投稿していくので、ご興味あれば読者登録をよろしくお願いします。
*2:弊社で開発しているモチベーションクラウドを初めとしたプロダクト群を「モチベーションクラウドシリーズ」= MCSと呼称しています
*3:といいつつ、リアーキテクトにも取り組んでおります