フロントエンドテストの勉強会を企画から開催まで担当した話

こんにちは。システム統括本部で社内プラットフォームを開発・運用している本田です。普段は大阪オフィスで働いています。（新型コロナウイルスの影響でここ1年はずっと在宅ワークが続いておりますが）

私は2020年度後期の6カ月間、ヤフー大阪オフィスが運営しているオープンコラボイベント「Mix Leap」にスタッフとして初めて参加しました。そこで「フロントエンドのテストに関する勉強会」を企画から入って開催し、結果200人を超える参加応募がありました！
今回はヤフーでのアソシエイトという働き方と、イベント企画から開催までを通した中での出来事や学んだことをお話しします。

ヤフーの技術コミュニティーとアソシエイト

ヤフーでは東京、名古屋、大阪、福岡の各拠点で開催する「クリエイター向け勉強会コミュニティー」を企画・運営しています。そのうちの1つ、大阪で開催している「Mix Leap Study」とは、さまざまなヤフーの独自技術や業界の最先端テクノロジーに触れていただき、関西圏のクリエイター（エンジニア・デザイナー）の成長を目的にした、ヤフー大阪オフィスで開催される勉強会です。ITに興味のある学生やIT企業で働く社会人が集まってお互いに発信しあうことで、人と情報の交差点となることを目指しています。

これらのコミュニティーの運営を牽引するスタッフ・社内クリエイターを「アソシエイト」と呼んでいます。テーマの検討や登壇者の選定と登壇交渉、コンテンツの考案、イベント開催までの準備（申請、参加者募集）などを自分たちで行っており、半期に一度、有志募集がかけられます。

なぜアソシエイトに参加し、この勉強会を企画したのか

私は学生の時からMix Leapに何度か参加したことがあり、ヤフーに入社してからも頻繁に参加しておりました。最初は社内外の人たちと交流できて楽しい！　と単純に思っていたのですが、

• Mix Leapの裏側ってどんな感じなのだろう？
• 業務以外の人ともつながり、もっとコミュニティーを広げたい

と思うようになり、ちょうどアソシエイトを応募していたこれタイミングとも重なっていたのでこれはチャンスだ！　と思い応募を決めました。

私が今回企画した勉強会は Mix Leap Live Study #64 - フロントエンドのテスト効率化 です。これを企画しようと思った主な理由はズバリ

自分自身がこのテーマに関する勉強会に参加してみたかったから

です。個人的にフロントエンドのテストというのはバックエンドのテストに比べて重要視されていないと感じていて、さらにその 自動化 となると参加者にとってもかなり貴重な話になるのではないか、と思い企画に至りました。

企画から開催までの話

勉強会開催までの間には企画を立てたり、登壇者を探したりといったさまざまな作業があります。

• 開催約80日前~50日前：社内から登壇者を探す
• 開催約20日前：イベント告知

その中で、今回は情報収集をかねて他社の方とオンラインでランチ会を行いました。

交流のある他社の方とランチ会をして情報交換した話

今回のイベントは前半・後半に分かれており、前半はヤフー社員による発表、後半はフロントエンドのテストをテーマにした登壇者同士のパネルトークを行いました。そのパネルトークのテーマ集めを目的に、これまでMix Leapの勉強会イベントで何度もお世話になった株式会社Gemcookさんとオンラインでランチ会をして、さまざまな情報交換をしました。

いくつか挙がった話をここで紹介します。

• ヤフー社員のテストに対するマインドに興味をもっている。
• 世間では、テストを書かなくても動作確認して動けばOKという認識の人がいる。テストをなぜやるのかという重要性を伝えるのが難しい。
• エンジニアの評価の指標としてテストカバレッジ（テストにおいて全体のどれくらいの確認が終わったか）という話も出たことはあるが、カバレッジをあげることが目的化してしまう。
• 企業の中には、テストは当たり前という文化はあるところはある。ただ、フロントエンドに関してもそうか？　と言われると部署によっても違いがありそう。
• テストは投資に似ている。書けば書くほど安全になるが、将来見返り（事故が防げるなど）があるかは分からない。
• エンジニアとしてソースコードの質をあげる訓練の一つの手段としてテストがあると考えている。

勉強会の企画だけでなく、このように他社のクリエイターとアツい話ができるとはアソシエイト参加を決めた当初は想像もしておらず、私にとっては思いがけない良い経験でした。この中の「エンジニアのフロントエンドテストに対する捉え方」と「フロントエンドのテストの価値について」というテーマは他の方の意見も聞きたいと思い、パネルトークでも取り上げています。

今回の内容「フロントエンドのテスト効率化」

今回開催した勉強会「フロントエンドのテスト効率化」の内容を軽く紹介いたします。それぞれヤフー社員が登壇しました。

Yahoo! JAPANトップページの E2E テスト導入の話／史 宇華

トップページの開発を担当している史にはフロントエンドのE2Eを陳腐化させないために工夫したこと を話してもらいました。

テストの安定性を高めるためPlaywrightを導入したり、開発チームへの導入をサポートする仕組みを整えるといったノウハウが紹介されました。

私は「E2Eは陳腐化しやすい」という課題すら想像できていなかったので、自分の知らないことがあると知れただけでも収穫でした。

アクセシビリティ検証の自動化と、カラーコントラスト問題について／三宮 肇

全社のフロントエンド技術の推進をしている三宮には ヤフーのサービス横断システム「Riff」でアクセシビリティテストを導入している話 をしてもらいました。

• @storybook/addon-storyshots-puppeteer（外部サイト）
• acot（外部サイト）

といったアクセシビリティテストを実施できるOSSを導入していると、かなり具体的に使用しているツールを紹介していました。

その一方で、カラーコンテキストについての課題があり、W3Cが定めるアクセシビリティのガイドラインに準拠していくように鋭意改善中という現状を報告していました。これに対し参加者から「見栄を張らないリアルな開発事情とその苦悩が垣間見られてよかった」という感想をいただきました。

フロントエンド開発初学者が自動テストで試行錯誤した話／宇城 毅犠

知恵袋のフロントエンドを開発している宇城には新卒で配属され1からフロントエンド技術を学んだ末のユニットテストの捉え方について 話してもらいました。

入社当初はテストをする意味がわからないなりに書いていたが、経験を重ねるにつれて

• ロジックミスを発見できる
• 修正箇所があっても動作を担保できる

というテストを実装する利点に気づき、テストは

• コードの質を向上させる一つの手段
• アプリの動作を完璧に担保するものではない
• 質の高いコードを書くために経験しておきたい

と捉えていることを紹介していました。

私個人的にも宇城の発表に共感することが多く、今まで自身で言語化できていなかったことを整理するきっかけとなりました。

アーカイブ動画

勉強会の内容を詳しく知りたいかたは、こちらのアーカイブ動画をチェックいただければと思います！

フロントエンドのテストに関心を持ってくれる人が多かったことは今回の一番の収穫でした。当イベントは200人を超える参加応募がありました。これはMix Leapで今まで開催してきたオンライン勉強会と引けを取らない記録でした。「自分が参加してみたいから」で始まった企画でしたが、最終的にはこうして多くの方に興味を持って参加していただけたことは単純に嬉しかったです。イベント中には参加者からたくさんの共感の声や質問があり、実際に多くの現場でフロントエンドのテストが導入できていなかったり、知見がまだまだ浸透していないことを改めて知ることができました。

アソシエイト業務を振り返る

今回、Mix Leapの企画運営にアソシエイトとして参加してみて、当初の参加目的は十二分に達成することができたと思っています。Mix Leapの勉強会は数カ月前から企画されていることを知れましたし、参加者・登壇者を募る大変さなどMix Leapの裏側を体験できました。さらに、運営している人と仲良くなってコミュニティーを広げられただけでなく、ランチ会を通じて他社の方と交流することもできました。主務の仕事をしているだけでは絶対に経験できないことばかりでした。普通に働きながらこのような少し違った経験ができるのは多くのクリエイターがいるヤフーならではなのかなと感じています。

今回の勉強会を通じて、多くの人に「フロントエンドのテスト自動化」に興味・関心を持っていただけたことも大変よかったです。参加者さんからのアンケートで「参考になった」、「ヤフーのリアルを知れた」、「これからも期待しています」というお声をいただけたのは大変励みになりました。参加いただいた皆さんに感謝申し上げます、ありがとうございました。