前回のブログからの続きで、最終回になります。

はじめに

　9月に行った「生活110番」を刷新するにあたって、さまざまな新しい技術や考え方を導入しました。技術以外にも数え切れないほどの改修を行いましたが、このブログでは新たに取り入れた技術や考え方について大きく簡単に触れていきます。

　Vue.js、Reactなどを使って開発していると、どうしてもコンポーネント単位でUIのプレビューをしたくなりますが、これらはStorybookを使うと実現できます。規模や人員が大きくなればなるほど必要性が増してきますので、導入しましたが、Storybookを使っていなかった頃の手間や苦労を思い出すと、大変便利になりました。

Storybookの導入

https://storybook.js.org/

　Storybookはコンポーネント単体で画面に表示し、カタログ化することができます。プロパティを変更した際のレイアウトや、ボタンクリック時の動作などをわざわざアプリケーションに組み込まなくても確認が行え、簡単な仕様書替わりになるため開発の見通しが良くなります。

メリット

・車輪の再発明の防止
・デザイナーとの認識の共有のしやすさ
・バグの原因特定切り分け

Storybookの導入は簡単です。やったことない方は挑戦してみてください。

$ npm i -D @storybook/vue
$ npm i -D babel-loader vue-loader vue-template-compiler
$ npm i -D @babel/core babel-preset-vue @babel/preset-env

Storybook用の設定ファイルを用意します。

#ディレクトリを用意します。
$ mkdir .storybook
$ mkdir stories

#設定ファイルを準備する

$ vim .storybook/config.js

import { configure } from '@storybook/vue'

// stories/*.stories.jsを読み込む
const req = require.context("../stories", true, /.stories\.js$/)
const loadStories = req.keys().forEach(req)

configure(loadStories, module)

Storybookを起動します。

npm run storybook

　storiesフォルダにstoryを追加すればコンポーネントのUIをプレビューすることが簡単にできます。

$ vim stories/TestLogo.stories.js

import { storiesOf } from '@storybook/vue'
import AppLogo from './../components/TestLogo.vue'

storiesOf('AppLogo', module)
  .add('story as a component', () => ({
    components: { AppLogo },
    template: `
      <div>
        <h2>TestLogo</h2>
        <app-logo/>
      </div>
    `
}))

(名称).stories.jsとして保存します。

　storyをどんどん追加してカタログ化すると良いでしょう。コンポーネント一覧をカタログ化して部内報告で見せるときにも役立ちますね。

　上記以外にも大規模な開発を進めていくと色々な課題や問題に直面します。最もよく起こるのは、予期しないUIのデザイン崩れです。作っている本人も気が付かないケースです。改修が入るとさらに深刻に崩れが起こってしまうことが度々ありました。

画像回帰テスト(VRT)の導入

　画像回帰テスト( Visual Regression Testing)とは、UIコンポーネントの変更前と変更後のスクリーンショットを比較することにより、視覚的なインターフェースのズレを自動的に検知するテストです。

　上図は、実際にVRTで差分を出してみました。左の「Button」が右の「Bottoooooon」に変わった場合の結果が中央のアイコンで表現されています。出来上がった画像はごちゃごちゃしていて少しわかりにくいですが、変化があることが視覚的にわかります。隙間が出来てしまったり、アイコンのサイズが微妙に変わってしまったときは、この赤色の指摘でわかりやすく変化を読み取れます。

　先に述べましたStorybookと、just,just-puppeteerといった自動化テストツールを使い、各コンポーネントやページに対しスクリーンショットを自動的に収集することでレイアウトのズレをいち早く検知することができ、確認工数を減らすことができます。人間の目では見落としてしまうような僅かな変化をキャッチすることができます。

課題

　開発が過渡期になると、storyの更新の中止や画像回帰テストの中断など、工数が足りない、面倒と言った理由で辞めてしまいがちになるため、そうならない運用が必要になりそうですね。

　今回で「ハーフ・スタックエンジニアの道」のブログは最終回になります。このブログはフロントエンド・エンジニア達が実際に職場で行っているお仕事の一例になります。最後まで読んでいただきましてありがとうございました。
　シェアリングテクノロジーでは一緒に働くメンバーを募集しています。気軽に遊びに来てくださいね！！