Session

Vue を取り巻くエコシステム（ツール）とその運用の話です。

■ 概要
社内のコンポーネントライブラリに対してStorybookとChromaticでビジュアルリグレッションテストを導入して、見た目のデグレを防止している話をします。

■ 詳細
Chromaticとは、Storybookのメンテナーが作成しているStorybook用のツールです。
ストーリーごとのスクリーンショットを撮影し、差分を画像で比較してくれる機能を備えています。

以下の課題を解決することを目的にして Chromatic を導入しました。

• 既存のコンポーネントを改修した際に発生する DOM、CSS に起因する表示崩れを自動で検知できないこと
• 依存モジュールのバージョンアップに時間がかかること

その結果、両方の課題を解決できた上に作業が楽になったという話をします。
また、なぜ他のテストではなくてビジュアルリグレッションテストを導入したのか、その意思決定の過程についても紹介します。

なお、本発表は以下の3記事の内容を合わせて再構成したものになる予定です。

• 「Storybook と Chromatic でビジュアルリグレッションテストを実施する」
• 「ビジュアルリグレッションテストのツールを導入するまでの意思決定プロセス」
• 「TypeScript Compiler API で40の Storybook コンポーネントを storiesOf から CSF（Component Story Format）に置換した」