こんにちは。アソビュー！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以上が必要です。

github.com

そこで、まずNode.jsのバージョンを、社内の他のアプリケーションで利用しているNode.js 20.6.0へ更新しました。その際、Webpack 4だと動かなくなったので、併せて Webpack 5へ移行しました。

minerva.mamansoft.net

ファイル名の変更

Storybookのファイル名を *.stories.tsx にしないとStorybook 7でエラーが発生したため、Storybookのファイル名を変更しました。

github.com

TypeScriptの更新

Storybook 7が依存しているreact-docgen-typescript 2は、TypeScript 4.3以上を指定しています。そのため、TypeScriptのバージョンを更新しました。

github.com

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へ更新しました。

github.com

これらの作業により、Storybookを最新バージョンに更新できました。