エンジニアの課外活動 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」を追加し、
スタイルガイドのコンポーネント毎にテストすることに。

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

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

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

#まとめ

おちゃめな遊び心も、より良い開発のための新しいチャレンジも、
好き・やってみたいの気持ちがあれば、まずはやってみる、そんなgrooves の裏側でした。

------------------------------------------
grooves では現在フレンズ大募集中です！

デザイナー

＜HR×IT＞コーディングにも興味のある欲張りなデザイナーを募集！

- HR×テクノロジーでより良い未来へのきっかけを提供しています。- 国内9兆円、世界100兆円とも言われるHR領域において、 最先端のテクノロジー・概念を活用した「HRTech企業」として、 ヒトと会社により良い未来へのきっかけを提供しています。 ■サービス ・国内初の求人企業向け採用特化型クラウドソーシングサービス「クラウドエージェント」の運営 ・ITエンジニア向けポートフォリオサービス「Forkwell」の運営 ・ITエンジニア向け求人サイト「Forkwell Jobs」の運営 ・国内初の「HR×人工知能・ビッグデータ」に特化した研究機関「Grooves HRTech 研究所」の運営

株式会社grooves

フロントエンドエンジニア

ツールやライブラリ選定・導入にもかかわれる！＜フロントエンドエンジニア＞

- HR×テクノロジーでより良い未来へのきっかけを提供しています。- 国内9兆円、世界100兆円とも言われるHR領域において、 最先端のテクノロジー・概念を活用した「HRTech企業」として、 ヒトと会社により良い未来へのきっかけを提供しています。 ■サービス ・国内初の求人企業向け採用特化型クラウドソーシングサービス「クラウドエージェント」の運営 ・ITエンジニア向けポートフォリオサービス「Forkwell」の運営 ・ITエンジニア向け求人サイト「Forkwell Jobs」の運営 ・国内初の「HR×人工知能・ビッグデータ」に特化した研究機関「Grooves HRTech 研究所」の運営

株式会社grooves

もっと知りたい！と思った方は、ぜひぜひ遊びにきてください:D
------------------------------------------