こんにちは。アソビュー！Advent Calendar 2023の14日目（B面）の記事です。
技術本部プロダクト部マーケットプレイスユニットのkaorun343です。フロントエンドエンジニアのチームでは継続的に開発環境の改善活動をおこなっています。今回はこの活動において実施した、共通コンポーネントの開発環境改善について紹介します。
背景
アソビュー！では複数のアプリケーションを開発・運用しており、それらのフロントエンド実装を別個で行う必要があります。 これらのアプリケーションで共通のUIコンポーネントを利用できるように、共通コンポーネントパッケージを用意しています。
共通コンポーネントはReactコンポーネントとして実装してあり、Styled Componentsを用いてCSSを記述しています。また、TypeScriptを採用し、共通コンポーネントを利用するアプリケーションのために型定義ファイルを提供しています。
共通コンポーネントの開発にはStorybookを用いて表示の確認とplay関数による動作確認をおこなっています。しかしながら、Storybook 6.4でWebpack 4 を採用していたため、Storybookの実行時間が長いことに課題を感じていました。
そこで、Storybook をアップデートし、共通コンポーネントの開発環境を改善することにしました。
方針
移行開始時のStorybookのバージョンが6.4であり、一度 6系の最新版である6.5へ更新することにしました。 それから7系への更新を実施することにしました。
移行作業
Node.jsのバージョン更新とStorybook 6.5へのアップデート
Storybook v7を動かすためにはNode.js 16以上が必要です。
そこで、まずNode.jsのバージョンを、社内の他のアプリケーションで利用しているNode.js 20.6.0へ更新しました。 その際、Webpack 4だと動かなくなったので、併せて Webpack 5へ移行しました。
ファイル名の変更
Storybookのファイル名を *.stories.tsx にしないとStorybook 7でエラーが発生したため、Storybookのファイル名を変更しました。
TypeScriptの更新
Storybook 7が依存しているreact-docgen-typescript 2は、TypeScript 4.3以上を指定しています。そのため、TypeScriptのバージョンを更新しました。
Storybook 7とViteへの更新
Storybook 7への移行の準備が整ったので、 yarn dlx storybook@latest upgrade を実行してStorybookを更新しました。 そして、元々Webpack用の設定になったので、手作業で @storybook/vite-react を導入してViteを導入しました。
ただしNode.js 20.6.0ではStorybook上でViteが動かなかったため、当時最新のNode.js 20.10.0へ更新しました。
これらの作業により、Storybookを最新バージョンに更新できました。
パフォーマンス測定
更新前の状態と更新後の状態で、Storybookの実行時間に変化が生じているか確認しました。
| コマンド | Storybook 6.4 with Webpack 4 | Storybook 7.6 with Vite 4 |
|---|---|---|
yarn run storybook *1 |
29秒 | 18秒 |
yarn run build-storybook |
31秒 | 16秒 |
このように、今回のアップデート作業により、Storybookの実行時間が遅いという課題を解決できました。
さいごに
今回はアソビューで開発している共通コンポーネントパッケージの開発環境を改善した事例を紹介しました。アソビュー株式会社では新しいメンバーを随時募集していますので、ご興味ある方はぜひご連絡ください。
*1:最初の画面が表示されるまでの時間
