@1000ch (id:hc0001) です。6 月 4 日にメルカリオフィスで Mercari x Merpay Frontend Meetup を開催しました。今回の Frontend Meetup では @_hitima と @1000ch が登壇し、メルカリとメルペイの Web Frontend 事情についてお話しました。本記事ではその様子を抜粋してお届けします。
メルカリとメルペイ、それぞれにおける Web
メルカリはスマートフォン向けのフリマアプリとしてご存知の方も多いと思いますが、Web 版も存在します。メルカリの Frontend チームでは、この Web 版のメルカリの他に、CS チームのオペレーションに必要な管理画面であったり、アプリ版メルカリから参照する取引画面などを開発しています。CS チームの管理画面については、4 月 25 日に行われた管理画面チラ見せ♡ナイト #6 で @bravewood からチラ見せがあったので、ご存知の方もいるかと思います。
メルカリの取引画面の歴史はリリース当初である 2013 年 10 月に遡ります。メルカリを支える取引機能を Web で担ってきたわけですが、らくらくメルカリ便・ゆうゆうメルカリ便といった数々の機能追加をスピード優先で進めてきたこともあり、追加開発の余裕が無い段階まで来ています。
一方メルペイは事業の立ち上げということで新規開発をしています。メルペイはその名の通りメルカリのプラットフォームを拡張したデジタルウォレットの提供を予定していますが、それは実現しようとしていることの一部に過ぎません。メルペイという新しいおサイフを中心として様々な金融事業やサービスを提供していきたいと考えています。
この大きなミッションを実現するために、様々なプロジェクトが立ち上がっていますが、それぞれのプロジェクトで Web の実装が必要な部分を開発しています。例えば、メルペイを導入してもらう店舗様で商品がメルペイで支払われると、その売上を銀行に振り込んでもらう必要がありますが、そういった売上金を管理するダッシュボードなどの開発が一つです。あとは、EC サイトなど、Web ページ上でお金を支払うシーンもたくさんあると思いますが、その手段の一つにメルペイがあっても良いはずです。わかりやすく言うと「メルペイで決済する」ボタンの SDK の提供も考えています。
採用技術について
メルカリでは、ライブラリの成熟度や社内の知見の多さを考慮して React 中心のスタックを採用しています。先の話に出た取引画面は Knockout.js を現行では使っていますが、プロダクトドリブンなスピード開発を進めたが故に View 部分のコードの可読性が著しく下がった経緯があります。そのため React + Redux を使ったリアーキテクチャを進めていますが（後述）、そこでは Flux による Model → View を画一化を図っています。ただし、全て React で書くと決めているわけではなく、最近の新規開発の技術選定が結果的に React になっているだけです。状況に応じて最適解が選べれば良いと思っています。
それに応じてというわけではありませんが、メルペイでは Vue.js を使っています。Vue.js は HTML の記述を活かしたコンポーネントシステムを提供しつつ、高速な差分描画を実現している UI ライブラリです。更に、Web アプリケーションを作る上でコアとなるルーターや Flux ライブラリといった周辺ツールをコアチームが開発していたり、日本の Vue.js コミュニティ活動も活発で日本語ドキュメントも継続的にメンテナンスされているなど、エコシステムが充実していることも採用した理由です。前提として高速な Web アプリケーションを提供したい個人的な想いがあり、SSR + SPA が自ずと必要になって、それを実現するのに Nuxt を利用しています。
メルカリとメルペイの Web の今後
メルカリでは Progressive Web Apps (PWA) と称する周辺の Web 技術への注目が高まってきています。現在の Web 版はアプリ版に比べていくつか機能が提供できていない状態なので、機能を拡充すると共に PWA として提供できるように計画しています。一方で提供スピードを維持するために、先の取引画面のように、アプリから参照する Web の開発というのも引き続き重要です。
これらを実現するために、アーキテクチャを刷新するプロジェクトを進めています。このリアーキテクチャプロジェクトでは、メルカリの Frontend チームで培ってきた React とその周辺技術の知見を活かしながら、初期ロードのパフォーマンスを重視してサーバーサイドでレンダリングする構成を検討しています。
メルペイについてはプロダクトをリリースしておらずこれからではありますが、品質への意識は大切にしたいと思っています。品質は私が前職のサイバーエージェントで取り組んでいたことの一つですが、これから社会インフラを実装しようとしているメルペイにとっても非常に重要な指標だと捉えています。ひとえに品質と言っても様々な観点がありますが、パフォーマンスとアクセシビリティで例示すると、いざ店頭で決済をするときのレスポンスがもたついていたり、視覚や聴覚等に何らかの障碍を持つ人が使えない・使いにくい、等は当然ながら望ましくありません。
これについてはプロダクトに関わる人全員で認識合わせをしていますが、アクセシビリティについてはデザイナーが率先して取り組んでくれています。コントラストを考慮したカラーパレットを定義してプロダクト全体にシェアするなど、自主的に動いてくれています。
このあと、参加者の皆様から事前に頂いていた質問、会場からの質問にお答えしました。質問内容は技術選定やこれからの Web 技術についても少なくありませんでしたが、実際の開発の流れや、プロジェクトマネージャーやデザイナーとの協業体制、デプロイ方法、リファクタリングなどについても関心が高かったように感じました。一通りご質問にお答えさせて頂いたあと、懇親会に移りました。
懇親会の様子
懇親会は @jollyjoester の元気な乾杯の挨拶で始まりました。日本と中国のキャッシュレス事情や、Vue.js、マイクロサービス、Web Components など、色々なトピックについて話しながら、参加者の皆様と親睦を深めました。
今回のケータリングは goody さんにお願いしました。いつも素敵なお食事をありがとうございます！
まとめ
今回のミートアップやこちらの記事を通じて、メルカリやメルペイの Frontend がどうなっているのかが少しでも伝わっていたら幸いです。Frontend はもちろん、今後もミートアップや勉強会を積極的に開催していく予定ですので、今回参加できなかった人、メルカリ・メルペイの事業に興味が湧いたという人は是非ご応募ください。
ミートアップに参加頂いた皆様、運営スタッフの皆様、ありがとうございました！
