株式会社ミダスキャピタルのテクノロジーチームが、最先端のテクノロジーやテクノロジー経営、ビジネスに関するリサーチなどをnoteで発信する「MIDAS Technology Review」。今回は、「フロントエンド開発効率化」と題して、株式会社ZOZOテクノロジーズの武井勇也氏とQuipper Limitedの森久太郎氏、そして株式会社SmartHRの根岸勇弥氏をお招きして、2021年9月に開催した勉強会の様子をお届けします。

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

勉強会では、フロントエンド領域における開発効率化をテーマにしたLTを行っていただき、モデレーターはミダスキャピタル投資先の株式会社イングリウッドの取締役CTOである大森崇弘氏が務めました。

最初に登壇したのは、株式会社ZOZOテクノロジーズのZOZOTOWN本部でZOZOWEB部企画チームエンジニアを務める武井勇也氏です。武井氏のトーク概要を下記にまとめます。

武井氏：ZOZOTOWNにおいて、新商品のキャンペーンや期間限定セールなどをプロモーションするためのLP開発に対するニーズが増えてきており、開発効率を上げることで対応していく必要があった。

当初、LP開発はプレゼンテーション層の開発が中心のため、アプリケーション開発で使用されるReactなどの技術とは別の技術が使われるのが一般的だと考えていた。しかしながら、閲覧者の性別によって表示する商品を切り替えたり、セール価格を適切に表示したりといった動的で複雑な要件が存在し、堅牢な開発が求められる事が分かった。これを毎回ゼロから作っていくのは非効率であるとともに、堅牢性を維持する上でも再利用性を高めていく必要性があると判断。そこで、商品リストのReactコンポーネント化を実現することでこれに対応した。

コンポーネント化するにあたっては、ReactコミッターのDan Abramov氏が自身のブログで提唱していたPresentational and Container Componentsの記事を参考にし、実際にどのように対応したのか、またそこから得られた利点などを紹介いただいた。

後半パートでは、発展的な取り組みとして、HeadlessCMSと上記UIコンポーネントを組み合わせたプレビュー機能を実現し、非エンジニアであるキャンペーン企画担当者自身でLP開発を進められるように対応した事例を紹介いただいた。

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

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

続いて、Quipper LtdにてWeb Engineerを務める森久太郎氏が登壇しました。

森氏：まず今回のテーマである「開発効率化」について、「リソース効率」と「フロー効率」という観点を紹介いただいた。

プロダクト開発の文脈において、「リソース効率が悪い」は、エンジニアにタスクが割り当てられておらず、暇になってしまっている状態を指す。また、「フロー効率が悪い」は、開発した機能の顧客へのデリバリーが遅れている状態を指す。

今回は、前提としてフロントエンドチームとバックエンドチームで分かれているようなチームを想定。素直に開発を実施すると、バックエンドの開発が終わってからフロントエンドの開発を始めるというプロセスとなる。しかし、それではフロントエンドチームはバックエンド開発を待っている分、リソース効率が悪くなるとともに、バックエンドチームはフロントエンド開発が終わるまでデリバリーされないことからフロー効率が悪くなってしまう。

そこで、GraphQLやOpenAPIなどを用いたスキーマ駆動開発を採用し、最初にスキーマを定義することにより、リソース効率とフロー効率が改善される仕組みを解説いただいた。

後半パートでは、実際にスタディサプリの新規プロジェクトにおいてGraphQLを全面的に採用した事例を紹介。この事例を通して、GraphQLを利用するメリットやスキーマ駆動開発が開発効率化にどう貢献したのか、具体的に解説。

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

そして最後に、株式会社SmartHRでプロダクトエンジニアを務める根岸勇弥氏が、登壇しました。

根岸氏：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の方がスキーマと実装の乖離が起きにくいのはなぜなのか、もう少し詳しく伺いたいです。

詳細を知りたい方は、ぜひ動画をご視聴ください。