2024.10.01
自社の社内情報を未来の“ゴミ”にしないための備え 「情報量が多すぎる」時代がもたらす課題とは?
Reg suitで始めるお手軽画像差分テスト(全1記事)
リンクをコピー
記事をブックマーク
おとべ氏:おとべです。このタイトルでLTしようと思うんですけど、ちょっとお気づきの方いらっしゃるかと思いますけど、スライド68枚あって大変で、5分じゃ収まりそうになりないので、マジでライトニングにすっ飛ばしつつ進めたいと思います。
自己紹介です。おとべです。僕も読み方がわからないIDでTwitterやGitHubとか全部やっているので、よかったら見てください。
また、ゆめみですね。出ました、ゆめみ。「全員CEO」とか「有給取り放題」とかいろいろ言ってるんですけど、僕はまだアルバイトなのでCEOではないみたいですね。
フロントエンドエンジニアとしてゆめみに採用されたはずなんですけれども、最近、業務の6〜7割がデザインですね。Figmaでデザインを書かされています。
あと、ポケGOのフレンドを募集しているので、よければあとで声かけてください。「Maker Faire Tokyo」に来る人もいたら、あとで声かけてください。
はい。本題に入りましょう。Storybook、知っている方いますか?
(会場挙手)
けっこういますね。半分ぐらいですかね。
残りの半分のために軽く説明すると、デザインカタログとかよく言われるんですけど、コンポーネント一覧が見られるツールで、いろいろ便利になるよと。じゃあ、Reg suitを使っている人っていらっしゃいますか?
(会場挙手)
1人、2人ぐらいですね。
今日はこれについて紹介するんですけど、画像差分テストというものですね。本名が「Visual Regression Test」で「画像回帰テスト」というものなんですけど。
何かというと、フロントエンドは要はユーザーが見る部分なので、その過去のスクショと現在のスクショを比較して行うテストです。CSSをちょっくら変えたらぜんぜん違うところが微妙にスタイル崩れを起こしちゃったとか、けっこうあると思うんですけれども、そういうのを防止できます。
このReg suitというのが、それをよしなにやってくれるツールですね。今日はそれを紹介します。入門と書いてあったのでこういう記事になってるんですけど、正直やっている時間がないのでパパッといきます。
GCPのSDKをインストールをして、Storybook、Vueのプロジェクト、Vue/cli3で作っているプロジェクトに、この「vue add」というコマンドでStoryookを入れると、全部いろいろ設定を書いてくれるので、ほぼどこかのReactみたいにいろいろ面倒くさいことをしなくてもStorybookが使えるようになります。
Storybookが起動したら、この2つですね。今回の主役なんですけれども、まずzisuiというのがStorybookをスクショしてくれるやつですね。
あとは、これがよしなにやってくれるReg suitをインストールしましょう。
package.jsonにscreenshotとregressionという2つのコマンドを書き足して、これを実行することで画像の差分テストを行います。
「Reg suit init」というコマンドを使いたいので、グローバルにもインストールして。あと、これを忘れるとエラーが出るので、Google Cloudのログインもしておいてください。これで準備が終わって、これがinitですね。
今回はAWSじゃなくてGCPのほうに画像を保存したいので、下の「GCP」を選んで、あとSlackも使ってみましょうということですね。
保存されているのがこのscreenshotにさっきのzisuiがスクリーンショットを保存してくれるので、そこに保存してあるよという指定をしたり。
GitHubはたぶん言われたとおりにやればいいと思うんですけど、GitHubのトークンを取ってきたり、SlackのWebhookのURLを書き込んだりすると、今触れなかったところはたぶんEnterで大丈夫だと思うんですけど、勝手に終わりますね。
Slackにテストのメッセージが流れて設定が終わります。
使ってみましょう。ちょっと端折っているんですけど、StorybookなのでStoryを書かないとそのコンポーネントのスクショは撮れません。「yarn screenshot」というコマンドでStorybookが立ち上がってスクショが保存されます。
「yarn regression」ってやると……来ましたね。Slackに通知が来ました。
このURLがGCPにデプロイされているもので、今これ、「えっ、画像差分テストなのに差分ないじゃん?」と思ったと思うんですけど、今、上から3つコンポーネントが並んでいます。なぜかというと、どこと比べるのかを指定しないので、いまだなにもない。
ここでCircleCIが出てきます。CircleCIと連携すると、マージリクエストを出したときにマスターとそのマージなど、今の状態を比較してくれます。
CircleCIの連携がいろいろあって、いろいろ書いています。さきほど(パネルディスカッションの)セッションに出ていたkahiroさんがQiitaにまとめてくれていたので、ほぼコピペなんですけど、その記事がちょっと1つだけ違っていて困ったのがイメージです。kahiroさんは独自のやつを使ってたんですけど、ノードのバージョンがちょっと古かったので、Reg suitが公式で出しているやつに換えました。
というところでGitHubにPushして、CircleCIの設定ですね。CircleCIの設定をしていろいろやって、こういうふうにCircleCIのビルドが通るようになれば成功です。
さっきのkahiroさんのやつを使ってたって言ったじゃないですか。それを使わなかったことによって出てきた問題が、わかると思うんですけど、日本語フォントが文字化けしているんですね。kahiroさんのやつはちゃんと文字化け対策でいろいろ入れていたみたいなんですけど、それがないので文字化けしてしまうと。要対策って感じですね。
これで一応環境が完成したので、実際にブランチを切って変更してマジリクを出すと。そうすると差分のレポートが振ってきます。
さっきと色が違いますね。要はテストをパスしていない差分があります。
GitHubにも通知が来て、これですね。これでやっと差分なんですけれども、ビフォーとアフターと違う部分が赤く表示されるようになっています。
こんなふうにさまざまな方法でどこがどう違うのかを比べることができます。
まとめです。Reg suitはこのVisual Regression Testをいい感じにやってくれるツールで、実はそんなに導入は難しくないですね。CIをSlackへ連携して実際業務へ適用するのもすごくやりやすいんじゃないかなと思います。
コンポーネントに分割された、それこそVue・React・Angularなどの開発だとそういう意図しない差異がCSSで出やすいので、恩恵があるんじゃないかなと思います。
以上になります。ありがとうございました。
(会場拍手)
関連タグ:
2024.10.29
5〜10万円の低単価案件の受注をやめたら労働生産性が劇的に向上 相見積もり案件には提案書を出さないことで見えた“意外な効果”
2024.10.24
パワポ資料の「手戻り」が多すぎる問題の解消法 資料作成のプロが語る、修正の無限ループから抜け出す4つのコツ
2024.10.28
スキル重視の採用を続けた結果、早期離職が増え社員が1人に… 下半期の退職者ゼロを達成した「関係の質」向上の取り組み
2024.10.22
気づかぬうちに評価を下げる「ダメな口癖」3選 デキる人はやっている、上司の指摘に対する上手な返し方
2024.10.24
リスクを取らない人が多い日本は、むしろ稼ぐチャンス? 日本のGDP4位転落の今、個人に必要なマインドとは
2024.10.23
「初任給40万円時代」が、比較的早いうちにやってくる? これから淘汰される会社・生き残る会社の分かれ目
2024.10.23
「どうしてもあなたから買いたい」と言われる営業になるには 『無敗営業』著者が教える、納得感を高める商談の進め方
2024.10.28
“力を抜くこと”がリーダーにとって重要な理由 「人間の達人」タモリさんから学んだ自然体の大切さ
2024.10.29
「テスラの何がすごいのか」がわからない学生たち 起業率2年連続日本一の大学で「Appleのフレームワーク」を教えるわけ
2024.10.30
職場にいる「困った部下」への対処法 上司・部下間で生まれる“常識のズレ”を解消するには