このインタビューではメルペイのフロントエンド開発を支える @ryotah 、 @yutapon 、@tokuda109 、 @dwj の4人に今取り組んでいることや、技術スタック、今後の展望などを聞いています。メルペイのフロントエンドがどういったテクノロジーによって開発されているか気になる方はぜひご覧ください。
インタビューアーはEngineering Officeの@afroscriptにてお届けします。
自己紹介
– まずは皆さんの自己紹介からお願いします
@ryotah: 私は2018年8月にメルペイに入社しました。それまでは飲食店の予約・顧客管理サービスやゲーム開発におけるフロントエンドエンジニアでした。入社後は加盟店様が利用する管理画面の開発であったり、社内で利用するCustomer Support（以下CS）ツールの開発を行っていました。
現在はグループ企業であるメルコイン用のCSツール開発に携わっています。
@yutapon: 私は @ryotah より少しだけ遅く、2018年9月に入社しました。それまではWebメディア企業でフロントエンドエンジニアをしていて、記事執筆用の管理画面開発を行っていました。
メルペイでは加盟店申込みフォームの開発運用や、審査・管理を行うためのMerchant Support（以下MS）ツールの開発運用を行っています。
@tokuda109: 私は2019年10月に入社しました。それまでは電子書籍サービスやキュレーションサイトでフロントエンドエンジニアをしていました。入社後はメルペイCouponの開発を中心に、リグレッションテストの安定化を行っています。現在はフロントエンドのパフォーマンス改善や技術試験評価方法の改善であったり、NFTプロジェクトのサポートをしています。
@dwj: 私は2020年2月に入社しました。出身はイタリアになります。家族が日本人で、2018年に来日しました。入社前はShiftbrainという会社でフロントエンドエンジニアをしていました。入社後はCSツールの開発を担当していて、現在は内部ツール開発やビルドツールの最適化などが主なタスクになります。
フロントエンドチームが掲げる4大品質
– フロントエンドチームが現在取り組んでいることを教えてください
@tokuda109: 2019年2月にメルペイをリリースしてから、ようやく大きな機能開発は落ち着いてきています。現在はプロダクトの品質を高めるフェーズになっています。フロントエンドチームでは、テスト・パフォーマンス・アクセシビリティ・セキュリティをプロダクトの4大品質と定めて、日々改善しています。2020年夏頃からLookerというダッシュボードツールを使って、この4大品質に関わる各指標の可視化を行っています。
– 具体的にどのような指標を見ていますか？
@tokuda109: テストについてはカバレッジや成功率を見ています。テストが失敗するとSlackで通知がくるようにしていて、成功率が下がってきたときに改善するようにしています。
また、パフォーマンスについては、次の4つを計測しています。
- LCP（Largest Contentful Paint / 最大視覚コンテンツの表示時間）
- CLS（Cumulative Layout Shift / 累積レイアウトシフト数）
- TBT（Toral Blocking Time / 合計ブロック時間）
- TTI（Time to Interactive / 操作可能になるまでの時間）
Web Vitals によると、LCP・CLS・FID（First Input Delay / 初回入力までの遅延時間）を測るのが良いとされいますが、FIDはユーザの環境で測らないとリアルな値が取れないため、代わりに近しい指標として TBTとTTI を計測しています。
@dwj: アクセシビリティについては、WCAG standardという国際的な基準に基づいた指標をKPIとして見ています。現在僕らのシステムは、この基準の中でAA Levelがとれていて、いいバランスを保てていると思います。
@yutapon: 最後にセキュリティについてですが、各フロントエンドチームが管理しているGitHubリポジトリにGiItHub Appsでホワイトソーススキャンを入れていて、それによって僕らが使っているパッケージに幾つ脆弱性が残っているかをGitHub Issuesに起票してくれます。その個数をマンスリーで記録し、いくつ減らせているかをトラッキングしています。
– 技術的にチャレンジングなことや苦労していることはなんですか？
@tokuda109: パフォーマンスは低下の原因が特定しづらいのが難点です。Webブラウザの挙動やJavaScriptがどう実行されるのか、ライブラリがどういう処理を行っているのか理解しないとボトルネックを発見できません。そうしたところをすべて理解するのが難しいポイントです。
テストの面では、テスト環境がたびたび壊れてしまうのが苦労してる点です。メルペイのシステムはさまざまなマイクロサービスが協調しあって動いています。そのため、テスト環境ではその中に実装中のものが含まれてしまうことがあったり、リソース不足が起きてしまい、テスト環境が壊れる要因となってしまいます。現在はリトライを行うなどして対応していますが、今後大きくテコ入れすることも検討しています。
@dwj: アクセシビリティについては、セットアップや実装はシンプルなので、技術的に大きく苦労している点はないです。しかし、プロダクトの機能開発の中でアクセシビリティの改善に取り組む時間を確保するのに苦戦しています。現在は、クォーターの最初にどういった改善をするかを決め、それに取り組み時間を確保するようにしています。
@yutapon: 全社的に新しいツールを導入するときのセキュリティ面の確認は、個人的に気を遣っています。全社的にはGoを開発に用いているので、Goでの開発に適したツールが導入されることがしばしばあります。それをフロントエンドでの開発にも適用するにはどのような設定が必要か、あるいは具体的なサンプルコードはどのようなものがあるかを調べて、チームにシェアしています。みんなが不安なく安全に使うための手助けになればと思っています。
利用している技術、開発環境について
– フロントエンドチームではどのような技術やツールを使っていますか？
@yutapon: 図で表すと次のようになります。
フロントエンドではほぼNuxt2を採用しています。ユニットテストはJest、インテグレーションやリグレッションテストにはCypressを利用しています。インテグレーションテストはAPIをモックした形で、リグレッションテストはモックにせず、バックエンドのAPI挙動を含めた一連のe2eテストを指します。
MS（Merchant Support）ツールの場合、機能実装とインテグレーションテストの追加者は異なるようにしています。テストは実装を見ず、スペックだけを基に作成します。それによって機能実装者が仕様を勘違いしていたとしても、テストで発見できます。これは2021年6月くらいからトライしていますが、うまくワークしています。
– 最近導入したツールで便利だと思うものは何ですか？
@yutapon: Renovateの自動マージ機能が便利です。開発用のリポジトリで、テストが通れば自動でパッケージのアップデートを行います。これまでは手動でアップデートしていましたが、リポジトリの数が増えたので自動マージ機能は活躍しています。
※参考: renovatebot/renovate: Universal dependency update tool that fits into your workflows.
– こういった新しいツールはどうチーム内に浸透させているのですか？
@yutapon: 自分で実際に試した後、要点をドキュメントでまとめた上で、毎週行っているFrontend syncというチームミーティングにて共有しています。外部システムや契約が絡んだりするものでなければ、割と自由に導入できます。
フロントエンドチームの今後
– 今後の展望を教えてください
@ryotah: 現在はリポジトリの数がとても増えており、パッケージアップデートを含めたメンテナンスコストが大きくなってきています。目の前の開発は減ったとしても、メンテナンスするリポジトリは増えているので、スケールしづらいのが課題です。現在、それを改善すべくモノレポ運用ができないか検討しています。
@yutapon: 現在Nuxt3のβ版が公開されており、間もなくRC版も出る予定です。そろそろNuxt3/Vue3への移行準備を行う段階になっています。書き方のシンタックスも変更されて、大きな変更になる予定なので、技術的に面白そうだと感じています。
チームとしては引き続き品質を向上させる取り組みを行っていきたいです。最近は様々なツールを駆使して、セキュアな開発を実現するためのガイドラインを作成しています。ただツールの使い方を理解するだけでなく、なぜ導入する必要があるのかと言った意図を理解することが大事だと思うので、啓蒙していくことにやりがいを感じます。
@tokuda109: 私も同じくNuxt3/Vue3への移行を進めていきたいですね。また、パフォーマンスについては、あまり外部に知見が公開されていないので、手探りにならざるを得ない部分があります。そんな中でも知見はたまってきていて、現在エンジニアリングブログにもまとめているところです。しかし、改善成果はまだ十分ではないと感じているので大きな成果を得たいです。
@dwj: チームではプロダクトの品質と性能向上のために、日々改善を行っていきます。ViteやNx、pnpmなどの新しいツールや開発戦略を模索し、チャレンジを続けています。Nuxt3/Vue3への移行によって開発体験やプロダクトのパフォーマンスは大きく向上する予定ですが、サービスへの影響がないよう、慎重に移行計画を進める予定です。
フロントエンドチームにフィットする人物とは？
– フロントエンドチームにはどんな方がフィットすると思いますか？
@tokuda109: フロントエンドチームではテスト・パフォーマンス・アクセシビリティ・セキュリティをプロダクトの4大品質と定めて、日々改善しています。このいずれかの領域に興味がある方であれば、活躍できると思います。
また、フロントエンドチームでは英語化も進めています。苦手な人は勉強する機会があったり、Frontend Syncのファシリテーターは当番制となっていますので、英語を使って仕事をしたい方にもお勧めです。
– ありがとうございました！
採用情報
メルペイのフロントエンドチームではメンバーを募集中です。 少しでも興味を持っていただいた方は、ぜひともMercari Careersの募集要項をご覧ください。
