2021年7月8日に、「Frontend Tech Talk 〜 Quality of Merpay Frontend 〜」 というイベントを開催しました。
本記事はその中でメルペイ フロントエンド エンジニアリングマネージャー @naughtldy のプレゼンテーションの書き起こしです。
お客さま・加盟店さま・オペレーター3つの領域の開発を担う
メルペイフロントエンドの品質のための取り組みについてご紹介させて頂きます。発表者はメルペイフロントエンドでエンジニアリングマネージャーをしています杉浦です。本日はよろしくお願いします。
まず初めにメルペイフロントエンドチームについてご紹介させてください。私たちメルペイフロントエンドチームは、大きくお客さま向け・加盟店さま向け・オペレーター向けの3つの領域で開発を進めています。
お客さま向けとしてはキャンペーンやクーポン・各種決済・送金機能。また、加盟店さま向けでは申し込みフォームやダッシュボード。そして、オペレーター向けでは、お客さまのサポートツール・加盟店様のサポートツール、これらのサービスを12名のエンジニアで開発を続けています。
メルペイフロントエンドが採用する技術
次にこちらが私たちが採用している技術構成になります。
私たちはNuxt.jsとTypeScriptを採用しています。サーバーサイドレンダリングを採用しているサービスもあるため、Node.jsやNginx、インフラ構成や設定をするためのTerraform 。CIとしてCircleCI やSpinnaker、GCP、Kubernetes。モニタリングツールとしてDatedog、Sentry、PagerDutyといったツール。可視化でLookerというものを利用しています。
リリース優先により生まれた技術負債を返却し、品質への取り組みに注力
ここでまず、プロダクトのリリースについて振り返っていきたいと思います。これが、今まで私たちがリリースしてきた機能になります。
2019年2月のファーストリリース以降、私たちは多くの機能をリリースしてきました。特にリリース初期は多くの新機能をリリースしています。
そして、それぞれのタイミングで注力するポイントがありました。プロダクトリリース初期はリリースを優先しています。新機能の提供などを優先するための開発体制がとられていました。そして、初期のリリース優先から多くの技術負債を抱えることになってしまいました。
そのため、次に注力したのが技術負債の返却です。各チームで負債を洗い出して、期間を決めて負債返却に取り組みました。現在は品質について取り組んでいます。
詳細はこちらをご覧ください。
お客さま体験の向上を目指し品質を追求
次にプロダクトの品質についてです。なぜ私たちが品質に取り組むのかについてですが、前提にあるのはお客さま体験を向上させたいということです。私たちはお客さま体験を向上させる方法として、品質に取り組むことにしました。
お客さま体験を向上させるために、どうすれば向上できるかを考えました。テストなどの品質指標を上げていけば向上するだろう。では、どういった基準にすればいいか。また、何を持って向上を達成したかを測っていけばいいかということを考えてきました。
品質といってもいろいろあると思いますが、メルペイフロントエンドで初めに取り組もうと考えたのは、パフォーマンス・テスト・アクセシビリティの三つになります。そしてこれらの品質を改善して行くためにも継続して測定する基準を決めることが必要です。
4つのチームで品質の向上に取り組む
これからは、私たちはどのように品質について取り組んできたかについて紹介します。はじめに、私たちはチームを作りました。1つはData Visualization Team、もう1つは、パフォーマンス・テスト・アクセシビリティに関するチームの4つです。
Data Visualization Teamは継続的に計測、可視化する仕組みを作るチームです。主にデータの可視化について取り組んでいます。パフォーマンス・テスト・アクセシビリティのチームはどういう基準にするか、また、どうやって計測するかについて取り組んでいくチームになります。ここではData Visualization Teamがどのようにデータを可視化していったかについて話していきます。
品質を測るには継続した計測が重要
こちらが私たちが考えた計測方法になります。
品質を測るためにも継続して計測していくことが大切です。ユニットテストのようなものであれば、 GitHubへのソースコードのプッシュを契機に計測を開始します。その他にも、毎日 ScheduleJobを実行することで、継続して計測できるようにしています。そして、すべてのデータはBigQueryに集約されていきます。
データがあれば、あとはLookerを使って可視化するだけになります。また、計測データをすべて BigQueryにいれているため、追加でなにか表示させたいといったことがあった場合でも、チーム内でグラフを作ることで確認することができるようになっています。 こちらが計測からLoggingサービスに送るデータのフォーマットになっています。
大きくはtype・project・dataの3つのキーを持っています。typeはLoggingからBigQuery にデータをシンクするときに使用しています。計測する指標ごとにユニークな値を持っています。また、 projectの方はLooker でデータを表示する時のマイクロサービス単位の判別に使用しています。
共通のフォーマットを使用し、サービスごとの可視化をスピーディーに
こちらがデータの流れになっていきます。
Loggingサービスからtypeごとに、別のテーブルにデータをシンクします。 Looker はテーブルとプロジェクトキーから任意のデータを抽出し、各チームで必要なデータを可視化することができます。初期は各チームで個別にグラフ・チャートを作成していました。しかし、私たちは管理しているマイクロサービスが多く、個別にメンテナンスすることは難しかったです。 そのため、現在は LookerMLダッシュボードを使って各品質指標ごとに共通のフォーマットで可視化をするという事をしています。
メルペイフロントエンドではパフォーマンス・テスト・アクセシビリティといった品質について取り組んでいます。各品質のベースラインを設定し、その向上に取り組んでいます。また、Lookerで個別に管理することもできるんですが、多くのマイクロサービスを個別に管理することはなかなか負担が大きくなっています。現在は、共通のダッシュボードテンプレートのようなものを作り、各マイクロサービスごとの可視化を素早くできるように取り組んでいます。以上がメルペイフロントエンドの品質のための取り組みの一部です。
最後に
メルペイ・メルコインではフロントエンドエンジニアを募集しています。ご興味ある方は是非、ご応募ください。
