フロントエンド開発効率化 イベントレポート【MIDAS TECH STUDY #2】

はじめに

2021年9月8日に、ミダスキャピタル協賛のフロントエンジニア向け勉強会を開催しました。
ミダスキャピタルは、「世界に冠たる企業群を創りあげる」というビジョンをもって設立された新しい形のプライベートエクイティファンドです。ミダスキャピタルの投資先企業群はオウンドメディア MIDAS TALENT で紹介しているので、是非ご覧ください。

MIDAS TECH STUDYの第2回となる今回は、株式会社ZOZOテクノロジーズ、Quipper Ltd、株式会社SmartHRの3社からスペシャリストの方々をお招きし、フロントエンド領域における開発効率化をテーマにしたLTを行っていただきました。
司会は、ミダスキャピタル投資先の株式会社イングリウッド 取締役 CTO 大森さんが務めました。

なお、MIDAS TECH STUDY 第1回のレポート も公開しているので、併せてご覧ください。

コンポーネント化とHeadlessCMSを用いたECプロモーションの効率化

株式会社ZOZOテクノロジーズ ZOZOTOWN本部 ZOZOWEB部 企画チーム エンジニア 武井勇也 様 (@takewell_)

トーク概要：
ZOZOTOWNにおいて、新商品のキャンペーンや期間限定セールなどをプロモーションするためのLP開発に対するニーズが増えてきており、開発効率を上げることで対応していく必要があった。
当初、LP開発はプレゼンテーション層の開発が中心のため、アプリケーション開発で使用されるReactなどの技術とは別の技術が使われるのが一般的だと考えていた。しかしながら、閲覧者の性別によって表示する商品を切り替えたり、セール価格を適切に表示したりといった動的で複雑な要件が存在し、堅牢な開発が求められる事が分かった。これを毎回ゼロから作っていくのは非効率であるとともに、堅牢性を維持する上でも再利用性を高めていく必要性があると判断。そこで、商品リストのReactコンポーネント化を実現することでこれに対応した。
コンポーネント化するにあたっては、ReactコミッターのDan Abramov氏が自身のブログで提唱していたPresentational and Container Componentsの記事を参考にし、実際にどのように対応したのか、またそこから得られた利点などを紹介いただいた。
後半パートでは、発展的な取り組みとして、HeadlessCMSと上記UIコンポーネントを組み合わせたプレビュー機能を実現し、非エンジニアであるキャンペーン企画担当者自身でLP開発を進められるように対応した事例を紹介いただいた。

その他参考資料：
React + microCMSで実現するZOZOTOWNキャンペーンページのノーコード化

GraphQLを活用したスキーマ駆動開発の実践

Quipper Ltd Web Engineer 森久太郎 様 (@qsona)

トーク概要：
まず今回のテーマである「開発効率化」について、「リソース効率」と「フロー効率」という観点を紹介いただいた。
プロダクト開発の文脈において、「リソース効率が悪い」は、エンジニアにタスクが割り当てられておらず、暇になってしまっている状態を指す。また、「フロー効率が悪い」は、開発した機能の顧客へのデリバリーが遅れている状態を指す。
今回は、前提としてフロントエンドチームとバックエンドチームで分かれているようなチームを想定。素直に開発を実施すると、バックエンドの開発が終わってからフロントエンドの開発を始めるというプロセスとなる。しかし、それではフロントエンドチームはバックエンド開発を待っている分、リソース効率が悪くなるとともに、バックエンドチームはフロントエンド開発が終わるまでデリバリーされないことからフロー効率が悪くなってしまう。
そこで、GraphQLやOpenAPIなどを用いたスキーマ駆動開発を採用し、最初にスキーマを定義することにより、リソース効率とフロー効率が改善される仕組みを解説いただいた。
後半パートでは、実際にスタディサプリの新規プロジェクトにおいてGraphQLを全面的に採用した事例を紹介。この事例を通して、GraphQLを利用するメリットやスキーマ駆動開発が開発効率化にどう貢献したのか、具体的に解説いただいた。

チームで取り組むテスト改善のあゆみ

株式会社SmartHR プロダクトエンジニア 根岸勇弥 様 (@negiandleek)

トーク概要：
SmartHR本体の開発において、LeSSに取り組む中でイテレーション後半のQAフェーズの負担が大きいことが課題になっていた。
QA担当者のリソースが少ないことに加え、取り組んでいるマニュアルテストが自動テストの内容と重複していたり、フロントエンドのUIテストにおいては何をやるのかが明確でなかったりといった、テスト戦略の欠如が浮き彫りに。
そこで、QA担当者とエンジニアでテスト観点の洗い出しを行い、マニュアルテストで行うべきものをはっきりさせる取り組みを実施。この取り組みにより、テスト実施工数の削減、信頼性の向上につながった。
しかし、フロントエンドのUIテストはマニュアルテストとE2Eテストが中心なため、この取り組みによりE2Eテストの比重が増え、自動テストのコストが上がることになってしまった。
後半のパートでは、この課題に対応するために、React Testing LibraryのコミッターであるKent C. Dodds氏が提案しているテスティングトロフィーの中のIntegration Testに取り組んだ事例とその効果を紹介いただいた。

その他参考資料：
【SmartHRのQA連載：第2弾】アジャイル開発初心者QAの入社してからの歩み

質疑応答

LTの後には、視聴者からいただいた質問を登壇者の方々に答えていただきました。質問は以下となります。回答内容が気になる方はアーカイブ映像をご確認ください。

Q. フロントエンド・バックエンド両方の開発が終わった後の疎通確認・検証の流れを具体的に伺ってみたいです
Q. バックエンドエンジニアはだいたいどのくらいの人数でAPIを開発していたのかを伺いたいです
Q. E2Eテストは実行コスト高いのでJestでページのテストを書いた方が実行コストが減らせるということですか？
Q. OpenAPIよりGraphQLの方がスキーマと実装の乖離が起きにくいのはなぜなのか、もう少し詳しく伺いたいです

詳細は、録画をご確認ください！