みなさん初めまして！WASD Inc. Development Divisionのおっくんと申します。
私は9月に弊社へ転職した開発者エンジニアです。 転職に至った経緯などはこちらにまとめていますので、ぜひご覧ください。
はじめに
弊プロジェクトでは直近storybookを導入し、chromaticにデプロイを行うことでcomponentの変更を検知できる環境を整備し始めています。
導入の過程でいくつか感じたことがあったので、それについてお話しします。
storybookとは？
アプリケーションの実行なしでcomponentの動作確認が行えるツールです。
mockを使ってlocalhostでテストが行えるので、DB等に再現用のデータを作成してアプリケーションを実行する必要がなく便利です。
例えば下のようにTable componentを作成したとして、中にデータが入った時の表示やソートの操作などが見れます。
chromaticとは？
storybookのスナップショットを保持することでVisual Regression Test（VRT、画像回帰テスト）が行えるようになるサイトです。
これにより、変更を開発メンバーでレビューしたり、予測できていなかった変更を検知することができます。
例えば下のようにTableから「編集」「削除」を撤廃した場合、過去の様子が黄緑で表示され差分がわかるようになります。
GitHubと相性がよく、連携することで
- Push時に自動でスナップショットを作成
- UI変更時はchromaticのレビューをApproveしないとマージできないようにする
というようなことができます。
導入して感じたこと
storybook
自然とテストを意識した実装ができるようになる
例えば自作のcomponentにDBへのSELECT処理を組み込み、その結果を表示させているとします。
このcomponentのテストをしようとするとDBアクセスが必要になり、テストが円滑に行えません。
あくまでcomponentの役割は画面表示なので、役割外の処理を外に切り出すようなリファクタをする意識がつきます。
導入に少しコツが必要だった
導入作業中、エラーで起動に失敗するstoriesファイルがありました。
テスト対象のソースでimportに絶対パスを使用していると、storybookがimport先を参照できずエラーになるようでした。
設定ファイルに情報を追加することで解決しましたが、調査に少し手間取りました。
chromatic
思ったより導入が簡単だった
GitHub上のPRやメンバー情報なども連携されるので、メンバーへの招待リンク送信が不要でした。
自動でRootにOrganizationが設定されるので、複数プロジェクトを運用する場合でも管理が楽になりそうです。
FREE期間中に運用に対する費用対効果を把握する必要あり
chromaticには複数の料金プランがあります。
最初はFREEプラン（無料）になっており、初月に限り30,000スナップショットがおまけでついた35,000スナップショットを使用できます。
1スナップショット1デプロイではなく1storiesファイルであるため、storiesファイルが多い場合は注意です。 100個のstoriesファイルを10回デプロイすれば1,000スナップショットを使用する、ということです。
利用枠を使い切ると利用停止となりスナップショットが作成されず、上位プランへの課金が必要になります。 そのため、停止される前にメンバー間レビューなどのフローを確認して運用イメージを掴む必要があります。
ちなみに課金プランは一定のスナップショット数まで定額、それ以降は従量課金、という仕組みです。
おわりに
直近でMUIのメジャーバージョンアップ対応を行いましたが、その際にも思わぬ部分で見た目の差分ができるなど苦労していました。
その時点でうまく導入できていたら品質向上に貢献できただろうなと感じています。
ちなみに、その時の導入記事がこちらになります。
今後さらにUIの変更が入る見込みなので、快適に開発が行える環境づくりにも努めていきたいなと思います。