Experts.jp日本に、もっとエキスパートを。Experts.jp編集部)PWA,ReactNative,WebView,フロントエンド,メルカリ2018年6月28日0click0940日米通算1億ダウンロードで日本最大フリマアプリ「メルカリ」。Experts.jp白石俊平編集長が直撃インタビューしてきました!メルカリで重要な役割を果たしているWebView白石:お二人は、メルカリでどんなお仕事をされているんですか?小嶋:私は2015年10月に入社して、アプリケーション内のWebViewページの開発を担当してきました。具体的には大規模なトラフィックがある取引画面や、配送サービス「メルカリ便」に新たな運送会社を追加したり、「大型らくらくメルカリ便」の配送機能を拡大したり、集荷サービスなどの開発も行いました。白石:ビジネス的に重要な部分を作っていらしたんですね。小嶋:技術としてはいわゆるHTML5、CSS3、JavaScriptを使ったフロントエンドで、WebView内からお客様の取引状況に合わせて、Web画面を出す部分を担当してきました。Web版(日本向けWebサイト)の開発を進めています。機能開発というよりは流入施策ですね。Developerとして働く。その後、Flashの衰退とともにHTML/JS/CSSにスイッチし、ゲームの受託開発などを行う。2015年にメルカリに入社。Web/WebView開発に従事。今はPWAに興味津々。坂本:エンジニアの坂本です。Teamというチームで、エンジニア全体の組織作りや制度、採用にコミットしています。現在3名(取材当時)いますが、全員エンジニアです。私は特に中途エンジニアの採用や技術広報、そして技術ブランディングを担当しています。サーバーサイドエンジニアで、2014年に入社して去年の12月まではプロダクトに関わっていました。営業職や店舗運営を経験し、Web制作会社に転職。PHPを用いたシステムの実装から、要件定義や設計、またDevOpsによる環境構築、Jenkinsサーバー構築等の開発基盤の構築・管理等を担当。2014年にメルカリに入社。ブランディングを行う部署のメンバーとして活躍中。白石:メルカリはWebViewをかなり使っているんですか?小嶋:最近はReactNativeを使ったりしているので、WebView自体は減っている傾向にあります。ReactNativeもJavaScriptで書くのでフロントエンドの領域だと思っています。WebViewとして特にコアな機能は取引画面ですね。いうことは、重要な画面はこれまでWebViewで作ってきたんですね。当時からするとホットデプロイできる強みや、Webの技術でデプロイして、クイックに画面が切り替えられるという理由でWebViewが選定されたんだと思います。白石:それはサーバーサイドに画面を更新すれば反映されるということですか?小嶋:はい。更新性という意味合いでは大分速くなってきたんですけど、ネイティブはどうしてもiOSで申請があったり、ネイティブのアップデートがあるので...。取引画面で使用している外部の配送サービスが急に一時期使えなくなったときに、ネイティブで何ができるかというとメンテナンスと出すしかなく、お客様はアップデートを待つしかありません。それであれば、Web上だけでクイックに開発できる方が良いという選択だったと思います。招待ページはWebViewで作られていましたね。WebViewの全体量としては減っていますが、Web文脈でいうと注目度はかなり高まっています。技術選定の根底にあるのは、お客様の体験だと思っているので、その時その時の状況に適した技術選定ができていればいいと思っています。Apps)だけにしていこうとかではなく、その都度リーチできるものを選べばいいかなと。白石:パフォーマンスの速さとユーザー体験を重視しているわけですね。小嶋:会社全体としてもテックカンパニーという点を重視しているので、いち早く最新技術を取り入れるという目的もあると思います。白石:小嶋さんご自身は、ReactNativeの開発をしているんですか?小嶋:僕自身は以前はUSプロダクトもやっていましたが、現在はJPプロダクトの担当なので、ReactNativeのプロダクト導入経験はないです。白石:ちなみに、USプロダクトということは、JPプロダクトとは別にアプリを作っているんですか?小嶋:はい。コードベースの話をすると、去年の秋くらいに現地での開発速度を優先するという目的で、JPとUSとUKのAPI含め、リージョンを分割したんですね。いうのも、日本で開発した機能で、一部USで表示がどうしてもおかしくなってしまうこともありました。いうことを懸念して、現地のことは現地でオーナーシップを持って開発・運営することにして、分割した経緯があります。白石:Googleは全世界で一つのコードベースだと言ってますが、御社は分割したほうがいいと判断されているというのは、興味深いですね。小嶋:ステークホルダーが同じリージョンにないということは、タイムゾーン分だけコストがかかります。USである機能をさくっと1日で開発してリリースしたいときも、JPに影響がないかを見るためにはQAなど複雑なリレーションが発生します。現地でやっていることは現地のルールを優先しています。坂本:メルカリは会社のミッションとしても、「世界的なマーケットプレイスを創る」ことを目標としています。最終的に世界中でメルカリを使ってもらいたい。世界を獲りにいくことが最優先。そのために一番いい選択肢は何かと考えたときにリージョンごとに分けるほうが最適だと判断をしました。小嶋:全リージョンで、完全に共通のコードベースを持つことは大切なんですけど、必ずしも日本のUIが全世界で最適だとは限らない面もあります。民族性や国土の広さなど、様々な違いがあるし、前提として物を売ったり買ったりするマインドの違いもある。そのときに共通のUIベースで勝負するのは難しいという課題もありますね。白石:とはいえ、決断にはかなりの覚悟が必要だったんじゃないかと思います。Bold(大胆にやろう)」があります。経営陣も迷ったと思いますが、かなりスピーディに進めていたと思います。Paymentsはかなり親和性はあるんじゃないかと思ってます。Webの可能性という話になるんですけど、決済に関して標準化されたものがあるなら、使っていきたい気持ちはあります。お客様にとって便利になるかどうかを検討してからになりますが、特にPWAやWebベースでのプラットフォーム化が加速していったときに十分可能性がありますね。Summit」というカンファレンスに参加させてもらったのですが、現地ではトラフィックに弱いインドなどではかなり可能性があると発表されていました。話を戻すとお客様にとっての体験向上という意味で、正しいプラットフォームは何なのかを考えながら、特に細かくどんどん変わっていくべきだと考えています。僕の個人的な意見ですが、例えば会社がビジネスを選定するときは、端末の保有台数や通信インフラの整備の高さなどを含めて海外進出を考えていくと思うんです。Notificationなどもありなんじゃないかと。PWAを一番最初に導入してユーザー数を3倍に増やしたインドのFlipkartのように、インドという巨大な人口を有する国でも戦えるんじゃないかと期待しています。白石:PWAをやるときはWebViewでやってたコードがまた使えるようになるんですか?小嶋:それでいうと、PWAのアーキテクチャにも最適解がかなりあって。Workerのオフラインキャッシュ、ヘッダー部分とかグローバルナビ部分などはきっちりコンテンツ部分とは分けるべきだと思います。Shellモデルの概念もあるし、既存のWebで培われているコードべースができるとは思っていないのと、メルカリの課題としてリプレイスとかもあると思っているので、新しいものは新しく作りたいですね。メルカリの開発体制や、サービスのリプレイスは?白石:続いては、メルカリの開発体制や、サービスのリプレイスをどう進めていくのかなどについて聞かせてください。小嶋:フロントエンドの文脈で言うと、一部リプレイスの必要があって、常に現場から上げるようにしています。今進んでいるプロジェクトとバランスを持って進められるように意識しています。Webの話ですか?小嶋:そこもやりたいのですが、もっと優先度が高いところもあります。今そこをやるのかというのを説明した上でやるようにしています。Webだけではないかなと思っています。白石:御社でいうフロントエンドというのは、もうWebに限らない?小嶋:そうですね。フロントエンドはアプリのWebViewの開発をしている人もいるし、Webの開発をしている人もいるし、USはJavaScriptエンジニアが開発しています。Node.jsなども使われています。領域は広がっています。白石:小嶋さんがフロントエンドだからあまり話に出てこないのかもしれないのですが、思いっきりネイティブで書かれているところも結構あるんですか?小嶋:かなりあります。うちは優秀なiOSエンジニア、Androidエンジニアが相当数いるので、ロイヤルティ高くお客様の体験向上のために寄与しています。フロントエンドは現状では更新性の高いところを担当していますね。白石:さらにメルカリの開発の裏側を知りたいと思うんですが、クラウドやデータベースの話から聞かせてもらってもいいでしょうか。坂本:サーバーサイドはいろいろな会社のサービスを使っていますね。日本のサーバーサイドがメインで動いているのは、さくらの専用サーバーですし、USではAWSを使っていたり、現在では裏側のドメインごとによるマイクロサービス化の流れがあります。白石:サーバ―サイドは何を使っているんですか?坂本:サーバ―サイドで最初からコードべースで一番使っているのは、PHPです。白石:それ以外の言語も増えているということでしょうか。坂本:マイクロサービスの文脈の中で基本的にインターフェイスが定義されていれば、中身はなんでもOKです。その中でもいろいろな利点からGoを使っているケースが多いです。白石:続いては、チーム作りや開発体制について聞いていこうと思います。先ほどフロントエンドの定義についてお聞きしましたけど、大まかにいうとフロントエンド、iOS、Android、サーバーサイドエンジニアというかんじなんですか?小嶋:開発体制でいうと、さらにプロダクトマネージャーとデザイナーが入ってきます。いわゆるチームプロダクトという大きなくくりで、プロダクトを推進するためのチームになっています。チーム体制についてはクォーター(四半期)制という3カ月ごとに適したチームを模索しています。僕の経験でいうと、かなりフレキシブルに動いていて、プロジェクトにプロダクトマネージャー、エンジニア、デザイナーと就くこともあれば、僕はJPフロントエンドという横ぐしのチームで動いています。その時にどういうチームが最適なんだろうと結構模索された上でチームを構成します。3カ月後に同じチームがあるとも限らないし、まったく違うチームでやる人もいるし、ずっと同じチームでやる人もいます。白石:3カ月ごとに編成されるというのは、大分スピーディですね。ちなみにどう開発しているか、どう開発を進めているかもお聞きしたです。UXにはこだわっていると思いますが、事前の調査やテスト、それをどうフィードバックして、どう開発やデザインに反映しているんでしょうか。小嶋:UXに関しては1年前くらいからユーザービリティテストをかなり活発にやっています。お客様に使ってもらって、ご意見を聞きながら、UI/UXの改善しています。あとはABテスト基盤があるので、プロダクトマネージャーが数値をもとに10%改善に基づいて、数値を見ながら取り組んでいます。常にPDCAが回っているかんじです。ターゲットや契約している会社があるわけではなく、社員は参加も自由で公募もされています。全社的にプロダクト志向が高いですね。エンジニアだからプロダクトに意見を言わないという風土はないですね。白石:クォーターごとにチームが変わっていくというお話ですけど、タスク管理などはどうされているんですか?小嶋:タスク管理に関してはアトラシアンのJIRAを使っていて、全社的にチケット駆動開発で進んでます。情報管理はOSSのコミッターがいるんですが、CrowiというWikiを使っています。チーム移動したからツールが違うというのはないですね。プロジェクトごとに切っているチームもあります。白石:現在の課題と自慢できること、今後やりたいことについて聞かせてください。小嶋:メルカリではクォーターごとにプロジェクトのゴールを設定しているので、開発速度が相当早いんです。開発速度が早いとなると、エンジニアとしては、技術的負債を早く返したいと考えます。その辺のバランスを見直そうという動きも出ていますが、開発スピードの早い組織ならではの課題だと考えています。白石:技術的負債をどうするかという問題ですね。小嶋:スピードも大事ではあるのですが。白石:自動テストもきっちり書いているとそれだけで時間がかかったりするから、省略するところもあったりしますよね。白石:メルカリ開発チームならではの自慢できることは何ですか?小嶋:現場が技術選定をある程度任されているところですね。あとは月並みですけど、全社員に開発者端末が支給されるんですね。iOSを使っている人だったらAndroid端末、Androidを使っている人ならiOS端末が入社時に無償で貸与されます。パフォーマンス出せるための備品や、エンジニアが最適だと考えるソフトウェアに対してはかなり優遇されていると思います。坂本:メルカリは退職者が圧倒的に少ないですね。ネガティブなことを考える必要がない。プロダクトに集中できるし、今の環境をよくすることに注力できます。Engineerがそれぞれ1名いて、技術的なトップと開発チームのマネジメントのトップが分かれているので、バランスがとれていると思います。CTOが開発体制に入り込んでしまうと、技術的な進歩に貢献することに時間がさけなくなってしまう恐れがありますが、そういうことがありません。圧倒的に会社の技術を引っ張るという意味で、会社全体を先導しているという姿勢を見せてくれている。Engineerがコミットしてくれている体制があるので、エンジニアたちはよけいなことに時間を使わずに本質的なことにフォーカスできる環境だと思います白石:CTOがこうだと言っても、現場が異議を唱えることはないんですか?小嶋:トップダウンというより、どちらかといえば方向性を提示した上でテック寄りな人たちでデスカッションしている。距離が近いので、導入するにしてもしないにしても議論が頻繁に行われています。白石:現場とトップの距離が近いとのことですが、CTOとのコミュニケーションもフラットにできるということですか?小嶋:そうですね。オープンな文化なので、CTOと1on1したいときも自由に設定できます。「必ずマネージャーを通すように」などの文化はないです。Dayという、普段はできないことをやろうという取り組みがあり、誰が何を開発してもいいことになっています。前回はオートメーションというテーマを設けて箱根で開発合宿をしたのですが、CTOも来てくれて、いろいろアドバイスしてくれました。関係性としてはフラットなのかなって思います。白石:エンジニアにとってはいい開発環境とチーム体制ですね。これからのメルカリにも期待しています!今日はいろいろ面白い話をありがとうございました。