@1000ch です。Merpay Advent Calendar 2020 の 22 日目を担当します。私は 2018 年 3 月に創業期のメルペイにジョインしまして、もう 2 年 10 ヶ月が経ったことになります。2020 年は新型コロナウイルスで何かと大変な状況が続いていますが、今年の頭からメルカリ側のプロジェクトにも関わっていまして、メルカリとメルペイ両方の Web に関わっています。メルカリ側の話はまた別の機会に書かせてもらうとして、今回はメルペイの Frontend の話をします。

チーム組成のこれまで

入社したのは 2018 年 3 月ですが、メルペイに Frontend チームが組成されたのは 2018 年 7 月で、PM/EM/TL体制が導入されたタイミングでした。そこから本格的に Merpay Frontend の組成に関わってきました。…と言いたいところですが、本当は入社一週間くらいで、気付いたら採用プロセスに組み込まれていたのを思い出しました（cc: @highnumber2）。私が入社した直後の当時、Merpay Frontend のソフトウェアエンジニアは私を含めて3人でしたが、この記事の執筆時点で Merpay Frontend は 12 人と、大幅に増強されています（メルカリを含めるともっと沢山います）。

採用と広報と Origami のジョイン

一口に採用活動と言っても、Merpay Frontend で何をするのかを市場に伝えないことには候補者は集まらないので、Merpay Frontend のことをわかってもらうために様々な発信をしてきました。たとえば、

• いわゆる採用イベントを開催したり（Mercari x Merpay Frontend Meetup・merpay Tech Meetup for Client-side・merpay Tech Meetup など）
• 技術広報を目的とした勉強会を開催したり（Mercari x Merpay Frontend Tech Talk vol2・ Mercari x Merpay Frontend Tech Talk vol3・Mercari x Merpay Frontend Tech Talk vol4 など）
• 国内外のイベントやカンファレンスへ登壇したりブースを出展したり（次世代 Web カンファレンス・Frontend Conference Fukuoka 2019・Vue Fes Japan 2018・JSDC.tw 2019 など）
• メルカリエンジニアリングブログに記事を書いたり（Mercari x Merpay Frontend Meetup で話したこと・1つのアプリケーションを分割するためのコンポーネント管理方法・メルペイの社内向け管理画面を振り返る・Web パフォーマンスのための HTML 最適化・Cypress + TestRail による Frontend E2E テストの効率化について など）
• チームの取り組みを紹介してもらったり（「業務はバラバラ」「でも助け合える」メルペイFrontendがスピード重視な開発で見つけた、孤立させないチーム体制・エンジニアと立ち話。Vol.38 @1000ch（メルペイ、ソフトウェアエンジニア）ちょっとお話いいですか？ など）

などが挙げられます。

メルカリグループではかねてより外国籍のメンバーも採用していますが、2020 年に入ってからは Merpay Frontend にも外国籍のソフトウェアエンジニアがジョインしました。また、Origami のメルカリグループへの参画に伴い、Origami の Frontend メンバーも Merpay Frontend にジョインしています。

チーム内で定期開催している勉強会

社内には他にもたくさんの勉強会がありますが、Merpay Frontend として開催している勉強会に WebWednesday があります。WebWednesday は Web 技術に関することをざっくばらんに話す会で、毎週水曜日に有志が参加しており、2019 年の頭にはじまってから既に 90 回を数えています。ちなみに最近は水曜日ではなく木曜日に開催されています。

開催のポリシーとして「資料の準備を頑張らない」「スキップしない」の2点があり、雑談ベースでも継続することをモットーにしたことで約 2 年の力みすぎずに続けてこれており、チーム内のナレッジ共有やコミュニケーション促進に（特にコロナウイルス状況下におけるリモートワーク環境に於いては）一役買っているように思います。

包括的なコミュニケーションに向けた取り組み

メルカリグループでは Diversity & Inclusion を推進しています。Merpay Frontend でも外国籍メンバーがジョインしたタイミングで、コミュニケーションを包括的なものにするために、チームミーティングで使う言語を英語と日本語を交互に使うように切り替えました（今週は全員が英語で、来週は全員が日本語で、といった具合に）。単に日本語と英語を交互に使うのではなく「やさしい日本語」と「やさしい英語」を使うことで、日本語話者と英語話者の双方が歩み寄り、理解しあえるように取り組んできました。

また、こうしたチーム内コミュニケーションを効果的なものにするために LET (Language Education Team) に協力を依頼し、より良い「やさしい日本語」と「やさしい英語」や会議体の進め方などをレビューしてもらうことで、改善してきました。

今年の 10 月からは、チーム内の英語力を更に高めることを目的として、チーム内コミュニケーションで使う言語を英語に統一しました。英語化することが Diversity & Inclusion の目的ではありませんが、今後の組織内外における英語需要の高まりを考慮し、チームとして英語力を強化していく決断をしました。英語力の強化は数ヶ月で達成されるものではなく長い道のりになると思いますが、組織としても Diversity & Inclusion を Objective に掲げることを計画しており、Merpay Frontend のみならず会社全体として取り組みを進めていくことになりそうです。

プロダクトクオリティへの取り組み

プロダクトの品質は言わずもがな重要であり、Engineering Division としても様々な改善に取り組んできました。今年の半ばからは、より包括的な OKR を掲げることで、エンジニアリング全体で取り組んでいます。

Engineering Division としては、2020 年後半の大きな関心としてテストがありました。一口にテストといっても様々な種類がありますが、大きな改善の一つとして、これまでは手作業で行われていた各プラットフォーム（iOS、Android、Web）のリグレッションテストの大半を自動化したことが挙げられるでしょう（これについては Cypress + TestRail による Frontend E2E テストの効率化についてという記事でも詳しく解説しています）。

Merpay Frontend としてはテストに加えて、アクセシビリティとパフォーマンスにも取り組んできました。2020 年後半で達成したこととしては、「品質の目的と基準の定義」と「定義した基準を用いた Web アプリケーションの継続的な計測」です。目的と基準の定義では、たとえばユニットテストであれば以下のような項目を明記し、チーム内でコンセンサスを取っています。

• なぜユニットテストを行うのか → ソフトウェア品質のボトムアップのため
• どのようにユニットテストを計測するのか → ユニットテストのカバレッジを集計する
• カバレッジの集計にどのツールを使うのか → Codecov を使って集計する
• いつ計測するのか → すべてのコミットを契機に計測する
• どのように可視化するのか → 計測したデータを BigQuery に集め Looker で可視化する

これはユニットテストの例ですが、計測データはすべて BigQuery に集めて Looker で可視化することで、アプリケーションの品質を確認できます。今後としてはアプリケーションの性質も考慮し、それぞれの基準に閾値を設けて継続的に改善していくことが次のステップです。また、こうした品質は Web に限らないので、Engineering Division としてはユーザーフェーシングな iOS と Android を含めたクライアントサイドとしてトラッキングしていくことも必要になってくるでしょう。

Client Platform Group を通じた組織横断の取り組み

こうした非機能要件に関する取り組みを推進していくことを目的に、Client Platform Group というプログラムが始まりました。Client Platform Group はメルペイだけではなく、メルカリを含めたクライアントサイド（iOS、Android、Web）のソフトウェアエンジニアが参加しているグループで、先に述べたような品質に関することやビルド環境・テスト基盤など、いわゆる「機能開発以外のこと」についてグループ内で共通認識を持ち、一緒に取り組んでいくことを目的としています。あるいはエンジニアの体験を改善するで触れられているように、Developer Experience の改善も含まれそうです。

Merpay Frontend としても横断的に取り組むべき課題感を持つメンバーが自主的に参加して、課題感の洗い出しや Mercari Frontend とのすり合わせなどを行っています。関心事項としてはテスト・セキュリティ・アクセシビリティ・パフォーマンスなどの非機能要件、iOS や Android との連携を担っているネイティブとのブリッジ実装が含まれる JavaScript SDK の中長期方針、gRPC 前提で実装されている Backend のマイクロサービスとの対話方法、などについて議論している最中です。

Merpay Frontend のこれから

Merpay Frontend で担当しているマイクロサービスはたくさんありますが、この人数規模で安定運用できているだけでなく、負債を生まないように開発を続けられているのは、まずまず良いエンジニアリングを実践できている証のようにも思えます。もちろん先に述べたように、包括的なコミュニケーションや品質への取り組みなど、改善できることはまだまだありますので、引き続き取り組んでいきます。

既存のアプリケーションを安定運用できている一方で、メルペイとしてやりたいこともまだまだ沢山あります。やりたいことが増えると開発運用するアプリケーションも増えます。つまり、一緒に働いてくれる仲間が必要です。現在 Merpay Engineering Division では Android や QA をはじめ、いくつかのソフトウェアエンジニアのポジションがオープンになっています。Merpay Frontend のポジションもオープンしているので、ご興味がある方は募集要項を是非チェックしてみてください。

明日の Merpay Advent Calendar 2020 担当は @nerocrux さんです。引き続きお楽しみください。