エンジニアの課外活動 vol.01「ビジュアルCSSテスティングを導入したフロントエンドエンジニアのここがすごーい！」

こんにちは。野中です。
grooves エンジニアメンバーのユニークな活動を紹介するコンテンツ、はじまるよ！

#エンジニアの課外活動vol.01「ビジュアルCSSテスティングを導入したフロントエンドエンジニアのここがすごーい！」

巷で「すごーい！」なアニメが流行っているようですが、grooves も同様。
その顕著な例がこれです。

▼弊社のチャットツール「Slack」の様子

当初はslack のemoji 機能にフレンズたちの画像を登録したんですが、
いかんせん、文字が小さすぎて読めないぞと。

そこでフレンズ大好きフロントエンドエンジニアのミヤギさん（@_ringogirl）が
emoji を拡大表示して投稿するという機能を実装したわけですね。
チャンネルを覗くとそこはジャパリパークよろしく「たーのしー！」な状態です。

野中も便乗しようとしたのですが

という残念な結果に。突っ込みが可愛いのに辛辣ですね。
emoji自体は投稿時に拡大されるけど、最初の選択がうまくできないのです…

そんな残念なわたくしのためかどうかは謎ですが

slack 上で「 friends! 」と叫ぶと大きな画像リストが出てきます。
愛ですね！！

※技術的な話はgrooves 開発ブログへどうぞ！

#まじめな話、「ビジュアルCSSテスティング」って？

先日のことです。
自社のエンジニア・デザイナーの募集求人を作成するにあたって、
dev team に「grooves ならではの取組みって何でしょうか」と尋ねたところ、

ビジュアルCSSテスティング
という単語が出てきました。

昨年大盛況を見せたイベント、「Front Line of Frontend − Forkwell Meetup #2」で
これまたミヤギさん（ @_ringogirl ）が登壇したスライドにも記載があるのですが
簡単に要約すると、

------------------------------------------
自社サービス「Forkwell Jobs」はローンチからはや五年。
レジェンドコードすぎてCSSの設計方針もわからず、肥大化しつづけとにかくつらい。
　▼
まずは継続的にCSSをメンテナンスできる環境を作るために
ES2015やReactなどをつかいつつスタイルガイドを作成。
　▼
CSS（見た目）もテストしたい。けど目視は時間がかかるしコードで再現できない、
E2Eだと画面くずれが検知できない。どうしよう。
　▼
いろいろ試してみたけど、grooves ではUI検証のためのCIサービス「Eyecatch」を導入！
GitHub のリポジトリに「eyecatch.rb」を追加し、
スタイルガイドのコンポーネント毎にテストすることに。

　▼
見た目のテスト自動化できて楽！
------------------------------------------

おかげさまで、
エンジニアがデザインに関することで悩むことが減り、
チームで見られてレビューもはかどり、開発速度が上がったそうです。

現場発信で、様々なカイゼンに取り組める環境・チーム、素晴らしいですね！