テストと自動化、どうしてる？　〜 Bonfire Frontend #5 開催レポート

こんにちは！　Bonfire運営の春野です。
2020年2月5日（水）にヤフーのセミナールームにて「Bonfire Frontend #5」を開催しました！　そのイベントの様子をレポートします。Bonfire Frontendは、様々な最新技術の活用方法やデザイナー、バックエンドとの連携など、フロントエンドが抱える課題を共有し、フロントエンドについてを熱く語る会です。

第5回となる今回のテーマは「テストと自動化」。

ヤフーからはトップページを担当している西村 宗親が登壇し、ゲストスピーカーとして株式会社ICSより森田 勝駿さん、株式会社ゆめみよりunotovive・おとべさんにお話しいただきました。どのようにテストを活用しているのか、そしてどのように自動化して管理しているのか、さまざまな知見を共有していただきました。

中期プロジェクトでe2eテストを導入してみて感じたこと

森田 勝駿さん - 株式会社ICS

1人目の登壇者は、株式会社ICSでフロントエンドエンジニアをされている森田さん（@texdeath）です。現場で導入しているE2Eテスト自動化について、具体的にどのようなことに気をつけているのかお話いただきました。

E2Eテスト自動化を本格的に導入した目的として、工数の削減や品質の向上があったとし、「人力でやることをマシンに任せるのが導入の動機でした。テストケースが多ければ多いほど自動化の効果が大きくなります」と、テスト自動化のメリットを話されていました。しかし、E2Eテストを導入するにあたり、いくつか注意しなければならないことがあると話された森田さん。「テストピラミッドを意識した設計を行う必要があります。ユニットテストは開発のためのものですが、E2Eテストは検証のためのもので、E2Eテストの自動化に比重を置きすぎないよう、クリティカルな部分だけ自動化することで、品質を担保することができます」と、E2Eテスト自動化に固執しすぎず、プロダクトに最も合った形で導入すると良いと話されていました。

Vueのテスト手法とVRTのすすめ

unotovive・おとべさん - 株式会社ゆめみ

2人目の登壇者は、大学生でありながら株式会社ゆめみでエンジニア兼デザイナーとして活躍されているunotovive・おとべさん（＠unotovive）です。フロントエンドのテストについての初歩的な話から、VRT（ビジュアルレグレッションテスト）について重点的にお話しいただきました。

「みなさんはフロントエンドでテスト書いていますか？」というおとべさんの一声から始まりました。会場では多くの手が挙がり、多くの人がテストを書いているようでした。フロントエンドのテストについては、どんなテストがその案件に必要なのか考えて取捨選択するのが良いと話されたおとべさん。「案件の大きさによってテストもバランスよく取り組むことが大切です。でもバランスだけでは駄目で、どのようなテスト手法があって、それがどういう特徴で何に適しているのかを理解して、その案件に本当に必要なテストを取捨選択していくのが良い」と話されていました。発表後半は、おとべさんが推しているというVRTを紹介されていました。VRTとは、画像回帰テストと呼ばれており、画面のスクリーンショットを開発前後で比較することで、予期せぬスタイル崩れなどを確認することができるテストです。「プルリクエスト時にCIで動作し、GitHubやSlackにレポートとして送信してくれて、導入もとても容易です。中規模以上のアプリケーションや大量にコンポーネント分けしている場合に大きな効果を発揮します」と話されていました。

Yahoo! JAPAN トップページ リニューアルとテストについて

西村 宗親 - ヤフー株式会社

3人目の登壇者は、ヤフーでフロントエンドやバックエンドのエンジニアをしている西村です。昨年10月にリニューアルされたYahoo! JAPANのトップページでどのようなテスト設計を行っているかについてお話しました。

トップページのリニューアルにおいて、テスト方針から決めていったと西村は話しました。「E2Eテストよりもユニットテストをしっかりやること、UIコンポーネントテストもそろえていきながら、それでもテストをやり過ぎない程度にカバレッジ100％を目指さず、高めの水準を維持するような方針を定めてから取り組みました」と、ユニットテストフレームワークやUIコンポーネントテスト、スナップショットテストなど具体的な方法をひとつずつ紹介していました。後半はどのようにそれらのテストを自動化しているかの仕組みについて、さらに深堀りして説明していました。「Yahoo! Inc. で開発されたCDパイプライン用のOSSであるScrewdriver.cdによって、ユニットテストやスナップショットテストなどのタスクを自動で実行することができ、開発を効率よくすることができています」と話していました。

おわりに

「テストと自動化」というテーマで3名の登壇者にお話いただきました。フロントエンドにおけるテストは、どうしても優先度が落ちてしまいがちで、面倒くさいものだと思っている方も多いと思いますが、テストを怠ることなく取り組むことによって、長期的な品質の担保や開発効率の向上など、さまざまなメリットを実感しました。

今回はこのイベントの様子をヤフー名古屋拠点、ヤフー福岡拠点に中継して開催しました。拠点を越えて多くの方々に参加いただきました。今後もフロントエンドに関するさまざまな課題を共有し、熱く議論できる場としてBonfire Frontendを開催していきたいと思います。ご興味がありましたら、connpassにて告知いたしますので、ぜひイベントへのエントリーをよろしくお願いいたします！

写真： 小見 拓也