<p>こんにちは、monica です。<br>
今回は弊社で開発している社内 UI ライブラリについて紹介します。</p>
<p>また、このプロジェクトは商用利用不可ですがオープンソースで公開していますので、ぜひご覧ください。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__8d1ba54a1244a" src="https://embed.zenn.studio/card#zenn-embedded__8d1ba54a1244a" data-content="https%3A%2F%2Fgithub.com%2Fwizleap-inc%2Fwiz-ui" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/wizleap-inc/wiz-ui" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/wizleap-inc/wiz-ui</a></p>
<h2 id="%E7%B5%8C%E7%B7%AF">
<a class="header-anchor-link" href="#%E7%B5%8C%E7%B7%AF" aria-hidden="true"></a> 経緯</h2>
<p>弊社ではこれまでフロントエンドを Vue2+ElementUI で開発してきました。<br>
しかし Vue3 がリリースされ Vue2 のサポートが 2023 年末に終了することが決まったので、マイグレーションを行う必要がありました。</p>
<p>普通に Element UI を使っていれば、公式が提供している Migrator を使ってそこまで不便なくマイグレーションできます。<br>
ですが勝手な外部からのスタイリングが当たっていたり、依存関係をどんどん増やしてしまった結果、Migrator を使うとアプリ全体が壊れるという状況になっていました。</p>
<p>ただたまに Element UI が直接スタイルを当てるように設計している場合もあり、単に自分たちのコードが悪かったわけではなかった部分もあります。</p>
<h2 id="%E3%82%B3%E3%83%B3%E3%82%BB%E3%83%97%E3%83%88">
<a class="header-anchor-link" href="#%E3%82%B3%E3%83%B3%E3%82%BB%E3%83%97%E3%83%88" aria-hidden="true"></a> コンセプト</h2>
<ul>
<li>Vue や React、もしくは今後新たなフレームワークが出てきたときにも対応できるようにする。</li>
<li>UI 開発に必要な知識(HTML/CSS)がないメンバーでもフロントエンドの開発へ参加できるようにする。</li>
<li>Vue2 -&gt; Vue3 のマイグレーションを限りなく 0 コストにする。</li>
<li>複数プロジェクト間でのコピペをなくす。</li>
</ul>
<p>を元にアプリケーションから UI のロジックを切り離し、社内製品 UI の一元化を目指しました。</p>
<h2 id="%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2%83">
<a class="header-anchor-link" href="#%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2%83" aria-hidden="true"></a> 開発環境</h2>
<h3 id="component-catalog">
<a class="header-anchor-link" href="#component-catalog" aria-hidden="true"></a> Component Catalog</h3>
<p>Storybook では 1 つのファイルに複数の Story コンポーネントを書くのが一般的です。<br>
しかし、Vue はデフォルトで SFC(Single File Component)という 1 つのファイルに 1 つのコンポーネントを書く形式を採用しています。<br>
そのため、Storybook で Vue を使う場合は SFC ではなく <code>new Vue()</code> を使って JS のみで書く必要があります。</p>
<p>そこで私が Histoire という最近出た Vite 製で Vue 向けの Story があることを知っていたので、それを使おうという話が出ました。<br>
当時開発されたてだったこともあり周辺プラグインでバグが多く私も Visual Regression Test 用の Capture Plugin にコミットしたりしました。<br>
しかし結局 React 化対応の話が出た時に対応できないことがわかり、Storybook を選びました。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__afec48955d209" src="https://embed.zenn.studio/card#zenn-embedded__afec48955d209" data-content="https%3A%2F%2Fgithub.com%2Fhistoire-dev%2Fhistoire%2Fpull%2F299" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/histoire-dev/histoire/pull/299" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/histoire-dev/histoire/pull/299</a></p>
<p>つい最近 Storybook V7 がリリースされましたが、開発初めの段階では V7 は alpha 版でした。<br>
V7 では vite-builder が公式から提供されたり、Storybook が複数のフレームワークを持つ monorepo で管理しやすいようになったりと、開発体験が大幅に向上したそうです。</p>
<p>詳細はこちらの記事を参照して下さい。<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__0898a454deb1b" src="https://embed.zenn.studio/card#zenn-embedded__0898a454deb1b" data-content="https%3A%2F%2Fzenn.dev%2Fsterashima78%2Farticles%2F3ae177ebc06bc5" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://zenn.dev/sterashima78/articles/3ae177ebc06bc5" style="display:none" target="_blank">https://zenn.dev/sterashima78/articles/3ae177ebc06bc5</a></p>
<p>この恩恵にあやかって、我々は alpha 版の頃から Storybook V7 での開発を進めてきました。</p>
<h3 id="monorepo">
<a class="header-anchor-link" href="#monorepo" aria-hidden="true"></a> Monorepo</h3>
<p>Monorepo で管理することで、共通のコードを private な package として共有できるようになります。<br>
今ある package は以下の通りです。</p>
<ul>
<li>packages/
<ul>
<li>wiz-ui-styles (Vanilla Extract)</li>
<li>wiz-ui-icons (SVG + generator)</li>
<li>wiz-ui-utils (Functions)</li>
<li>wiz-ui-constants (Color Tokens, Size Tokens, etc.)</li>
<li>vuepress-plugin-wiz-ui <a href="ARCHIVED">Vue2</a>
</li>
<li>wiz-ui (Vue2)</li>
<li>wiz-ui-next (Vue3)</li>
<li>wiz-ui-react (React)</li>
</ul>
</li>
<li>examples/
<ul>
<li>vue2 (Vue2)</li>
<li>vue3 (Vue3)</li>
</ul>
</li>
<li>docs
<ul>
<li>vuepress <a href="ARCHIVED">Vue2</a>
</li>
</ul>
</li>
</ul>
<p>UI フレームワークである <code>wiz-ui</code> と <code>wiz-ui-next</code>、<code>wiz-ui-react</code> を公開。<br>
さらにそれぞれの内部で <code>wiz-ui-styles</code> や <code>wiz-ui-icons</code> を呼び出しています。</p>
<p>また、管理にはこれらのツールを使っています。</p>
<ul>
<li>pnpm (パッケージマネージャー)</li>
<li>turborepo（scripts 管理、ビルド最適化）</li>
<li>changeset（セマンティックバージョニングと Changelog 生成、破壊的変更の管理）</li>
</ul>
<p>以前 yarn を使っていたのですが、pnpm に移行することでこれらの恩恵を受けられました。</p>
<ul>
<li>ノンブロッキングなインストール方法による高速化</li>
<li>ローカルキャッシュによる高速化</li>
<li>厳格な node_modules 配下のモジュール管理（シンボリックリンク）</li>
</ul>
<p>Changeset についてもなかなか苦戦したのでそのうち記事にします。</p>
<h3 id="styling">
<a class="header-anchor-link" href="#styling" aria-hidden="true"></a> Styling</h3>
<p>CSS をそのまま書くと型がなく、開発体験が悪いのでどうにかして <code>@types/css</code> の恩恵を受けたいと思い今回は<a href="https://vanilla-extract.style/" target="_blank" rel="nofollow noopener noreferrer">Vanilla Extract</a>を使いました。</p>
<p>「いやスタイリングでライブラリ使うんかい」と思われるかもしれませんが、Vanilla Extract 自体はビルド時に CSS へと変換されるので実行時には CSS を読み込むだけで済みます。<br>
(Vanilla Extract はこれを Zero-Runtime CSS-in-JS ライブラリと謳っています)</p>
<p>したがってパフォーマンスで心配する必要はありません。<br>
ただ保守性を高めるように拡張された型付きの CSS のイメージです。<br>
構文サポート+プラグインで提供されているので、プラグイン次第でどのフレームワークでも使えます。</p>
<h3 id="ci">
<a class="header-anchor-link" href="#ci" aria-hidden="true"></a> CI</h3>
<p>CI を強固にして、ライブラリの品質を担保します。<br>
導入したものは以下の通りです。</p>
<ul>
<li>Lint (ESLint)</li>
<li>Test
<ul>
<li>Unit Test (Vitest)</li>
<li>Visual Regression Test (Storybook, Reg-Suit)</li>
</ul>
</li>
<li>Build (Bundle Analyzer)</li>
<li>Publish (Changeset)</li>
<li>Storybook Deployer (AWS)</li>
<li>Coverage Deployer <a href="ARCHIVED">AWS</a>
</li>
</ul>
<p>特に Visual Regression Test は、Storybook で作成したコンポーネントのスナップショットを取り、変更があった場合には PR 上で確認できるようにしています。<br>
これによって意図しないデザイン崩れを防ぎながら開発できます。</p>
<p>社内インフラが AWS で統一されてますので、自動デプロイシステムは Cloudfront + WAF + S3 で自作しました。<br>
Vercel などの CI 連携サービスを使えば PR 単位の Storybook デプロイがとても楽にできるので、今後そちらに移行しようという話も出ています。</p>
<h3 id="icons">
<a class="header-anchor-link" href="#icons" aria-hidden="true"></a> Icons</h3>
<p>Icon は google の material design icons から持ってきています。<br>
これらの Icon は <code>Apache License Version 2.0</code> で公開されているので、この SVG を改変して使っています。<br>
具体的には private package の icon-generator でそれぞれのフレームワークのフォーマットに変換して出力しています。<br>
基本は SVG をそのまま HTML に埋め込む形ですが、外部からサイズ等を変更できるように拡張しています。</p>
<h2 id="%E9%96%8B%E7%99%BA%E4%BD%93%E5%88%B6">
<a class="header-anchor-link" href="#%E9%96%8B%E7%99%BA%E4%BD%93%E5%88%B6" aria-hidden="true"></a> 開発体制</h2>
<h3 id="%E3%83%81%E3%83%BC%E3%83%A0%E6%A7%8B%E6%88%90">
<a class="header-anchor-link" href="#%E3%83%81%E3%83%BC%E3%83%A0%E6%A7%8B%E6%88%90" aria-hidden="true"></a> チーム構成</h3>
<ul>
<li>社員 1 名</li>
<li>インターン 1 名(私) + 途中参加の方 1 名</li>
<li>業務委託の方 2 名</li>
</ul>
<h3 id="%E9%80%B2%E6%8D%97%E7%AE%A1%E7%90%86">
<a class="header-anchor-link" href="#%E9%80%B2%E6%8D%97%E7%AE%A1%E7%90%86" aria-hidden="true"></a> 進捗管理</h3>
<p>1 週間単位でのスプリントを設け、スプリント末ごとにデザイナーとエンジニアによる MTG をしています。</p>
<ul>
<li>本番環境で出た不具合や、デザインの修正などを Issue にして Feedback してもらう</li>
<li>Issue を Github Project の Kanban に追加</li>
<li>1 週間ごとに issue のラベリングをしてリソースの割り当てをする</li>
</ul>
<p>という流れで進めています。</p>
<p><img src="https://res.cloudinary.com/zenn/image/fetch/s--2o8DROje--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/09ad1367d28483d5dff0c2ef.png%3Fsha%3D0873a130e5f5e5fa8f60f4a2bedf034260379d72" alt="Github Project" loading="lazy" class="md-img"></p>
<h2 id="%E3%81%BE%E3%81%A8%E3%82%81%E3%83%BB%E6%84%9F%E6%83%B3">
<a class="header-anchor-link" href="#%E3%81%BE%E3%81%A8%E3%82%81%E3%83%BB%E6%84%9F%E6%83%B3" aria-hidden="true"></a> まとめ・感想</h2>
<h3 id="%E6%94%B9%E5%96%84%E3%81%A7%E3%81%8D%E3%81%9F%E3%81%93%E3%81%A8">
<a class="header-anchor-link" href="#%E6%94%B9%E5%96%84%E3%81%A7%E3%81%8D%E3%81%9F%E3%81%93%E3%81%A8" aria-hidden="true"></a> 改善できたこと</h3>
<h4 id="%E8%A3%BD%E5%93%81%E3%81%AE%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E9%96%8B%E7%99%BA">
<a class="header-anchor-link" href="#%E8%A3%BD%E5%93%81%E3%81%AE%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E9%96%8B%E7%99%BA" aria-hidden="true"></a> 製品のフロント開発</h4>
<p>製品の方のフロントエンドを開発していただいているエンジニアを対象に、<code>Wiz UI</code> の開発体験についてアンケートを取りました。<br>
以下がいただいた Feedback の抜粋になります。</p>
<p><img src="https://res.cloudinary.com/zenn/image/fetch/s--oEJkgzWc--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/cd1aff898becd667626a4ca3.png%3Fsha%3Dc7485ea0381a8edde0aee11e0cd35b559e3817b0" alt="feedback" loading="lazy" class="md-img"></p>
<p>生の CSS や UI ロジックを意識せずにフロント開発ができるようになったという意見が 6 割以上を占めていました。<br>
これは UI やスタイリング、デザインロジックのカプセル化によって、デザインが抽象化された恩恵だと考えています。</p>
<p>また、開発速度が向上したという意見や、UI が分離されたことでフロントのアーキテクチャがより簡潔になったという意見もいただきました。</p>
<h4 id="%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E3%81%AE%E7%AE%A1%E7%90%86">
<a class="header-anchor-link" href="#%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E3%81%AE%E7%AE%A1%E7%90%86" aria-hidden="true"></a> ライブラリの管理</h4>
<p>このプロジェクトが始動した 1 つの要因として、先ほども述べたような依存関係の多さからくるマイグレーションの煩雑さがありました。<br>
そのため私が Join して以降、依存関係を増やすハードルや管理の大切さについて頒布するよう心がけています。</p>
<ul>
<li>ライブラリを増やす場合は必ず複数人で議論する</li>
<li>独自実装で補えないか検討する</li>
<li>メンテナンス頻度やサポートについて調査する</li>
</ul>
<p>などを考慮するようになりました。</p>
<h3 id="%E4%BB%8A%E5%BE%8C%E3%81%AE%E8%AA%B2%E9%A1%8C">
<a class="header-anchor-link" href="#%E4%BB%8A%E5%BE%8C%E3%81%AE%E8%AA%B2%E9%A1%8C" aria-hidden="true"></a> 今後の課題</h3>
<h4 id="a11y%E3%81%AE%E6%9C%80%E9%81%A9%E5%8C%96">
<a class="header-anchor-link" href="#a11y%E3%81%AE%E6%9C%80%E9%81%A9%E5%8C%96" aria-hidden="true"></a> A11yの最適化</h4>
<p><strong>本来Radioで実装されるべきTabがdiv + onClickで実装されている</strong>など、まだまだ改善の余地があります。<br>
色々な環境下のユーザーに対して、より使いやすい UI を提供できるようにしていきたいです。</p>
<h4 id="%E3%83%86%E3%82%B9%E3%83%88%E3%81%AE%E5%85%85%E5%AE%9F">
<a class="header-anchor-link" href="#%E3%83%86%E3%82%B9%E3%83%88%E3%81%AE%E5%85%85%E5%AE%9F" aria-hidden="true"></a> テストの充実</h4>
<p>現状 Visual Regression Test のみ稼働しています。<br>
意図しないようなデザイン崩れは抑制可能ですが、コンポーネントの挙動についてはテストが不十分です。<br>
現状 Storybook の Play フィールドに test を書いているのですが、SB に依存する形となっています。<br>
今後は test を外部(Vitest)に切り離し、ユーザーの操作に対して<strong>Interaction Test</strong>を実装していきたいです。<br>
<code>Popup</code> など複雑な Window 依存のコンポーネントでは特に重要になってくるでしょう。</p>
<h4 id="%E9%96%8B%E7%99%BA%E4%BD%93%E5%88%B6-1">
<a class="header-anchor-link" href="#%E9%96%8B%E7%99%BA%E4%BD%93%E5%88%B6-1" aria-hidden="true"></a> 開発体制</h4>
<p>エンジニアリソースが足りず今までレビューや開発をほとんど一人で担当することが多くいわゆるワンオペ状態になってしまっていました。<br>
（現在私は主力のコミットから離れ、開発のサポートやレビューを中心に行っています。）<br>
今後はより多くの人に開発を割り振ったり、レビューワーをローテーションさせたりしていきたいです。<br>
また、インフラや環境の知識は完全に自分しかない状況なので、これもドキュメントや導入理由などをドキュメントに残していきたいです。</p>
<p><img src="https://res.cloudinary.com/zenn/image/fetch/s--5eMf90ak--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/abe0a91b85dadd6e0d85e804.png%3Fsha%3D1f2294fc38a930cb3e7c98f4f8432cada2c0bb5c" alt="ワンオペ" loading="lazy" class="md-img"></p>


社内UIライブラリを作る

Discussion