2024.12.10
“放置系”なのにサイバー攻撃を監視・検知、「統合ログ管理ツール」とは 最先端のログ管理体制を実現する方法
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.11.29
「明日までにお願いできますか?」ちょっとカチンとくる一言 頭がいい人に見える上品な言い方に変えるコツ
2024.12.03
職場の同僚にイライラ…ストレスを最小限に抑える方法 臨床心理士が語る、「いい人でいなきゃ」と自分を追い込むタイプへの処方箋
2024.12.04
いつも遅刻や自慢話…自分勝手な人にイラっとした時の切り返し 不平等な関係を打開する「相手の期待」を裏切る技
2024.12.02
給料や人間関係が良いだけでは部下は満足しない メンバーの「働きがい」を育む5つのステップ
2023.03.21
民間宇宙開発で高まる「飛行機とロケットの衝突」の危機...どうやって回避する?
2024.12.06
嫌いな相手の行動が気になって仕方ない… 臨床心理士が教える、人間関係のストレスを軽くする知恵
2024.12.09
10点満点中7点の部下に言うべきこと 部下を育成できない上司の特徴トップ5
2024.11.29
やたらと多い自慢話、批判や噂好き…「自己重要感」が低い社員の特徴 管理職が知っておきたい「一生働きたい職場」の作り方
2024.11.27
何もせず月収1,000万円超…オンラインゲームにハマって起こした事業 大学中退し4社立ち上げ・2社売却した起業家人生
2024.12.05
「今日こそやろう」と決めたのに…自己嫌悪でイライラする日々を変えるには