CtoCフリマアプリの作り方 〜6ヶ月間のPayPayフリマ開発を支えた設計〜 / YJTC19 in Shibuya A-6 #yjtc

CtoCフリマアプリの作り方 ~6ヶ月間のPayPayフリマ開発を支えた設計~ ヤフオク!統括本部フリマ推進本部プロダクト開発部 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. 松田悠吾 三宅晃暉

三宅 晃暉 フリマ推進本部プロダクト開発部 2016年新卒入社。ヤフオク!のBEやFE開発・運用、 Androidの開発を経て現在ではPayPayフリマのBE開 発統括・リーダー 趣味はドライブ、日帰り旅行、スキー Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

アジェンダ 1. PayPayフリマとは 2. バックエンド 3. Android Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

アジェンダ 1. PayPayフリマとは 2. バックエンド 3. Android Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

PayPayフリマとは PayPayフリマ 1. 2.PayPay 3. 4. ! 10月7日リリース！ Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

PayPayフリマとは PayPayでの支払い PayPay Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

PayPayフリマとは 価格の相談 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

PayPayフリマとは ヤフオク!との連携 ヤフオク!から出品された商品をPayPayフリマでも表示・購入できる Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

PayPayフリマとは キャンペーン・販促 送料無料キャンペーン 複数CM放送 メディアや自社サービスからの誘導 ロンチから1ヶ月（11/8）で アプリ100万DLを突破 現在急速に成長中！ Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

アジェンダ 1. PayPayフリマとは 2. バックエンド 3. Android Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

バックエンド バックエンドのアジェンダ 実現するシステム 効率を上げるキーワード 1.機能 1.開発手法 1.API 2.システム構成 2.想定負荷 （マイクロサービス） 3.開発期間 3.ヤフオクシステムとの連携 4.GraphQL Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

バックエンド バックエンドのアジェンダ 実現するシステム 効率を上げるキーワード 1.機能 1.開発手法 1.API 2.システム構成 2.想定負荷 （マイクロサービス） 3.開発期間 3.ヤフオクシステムとの連携 4.GraphQL Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

実現するシステム 機能 数多くの機能（18機能）をスクラッチ開発 商品情報 出品・購入 いいね 問い合わせ 価格の相談 ユーザー カテゴリ ・出品 ・商品詳細 ・購入 ・価格の相談 ・いいね ・問い合わせ etc... Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

実現するシステム API API 商品情報 出品・購入 いいね 出品API 商品詳細API 問い合わせ 価格の相談 ユーザー カテゴリ 購入API いいねAPI 問い合わせAPI 価格の相談API 検索API ... Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. 60以上

実現するシステム 想定負荷 ユーザー情報... 5200req/s 商品情報... 2500req/s カテゴリ情報... 1200req/s キャンペーン負荷 を想定したシステム構成 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

実現するシステム 開発期間 仕様策定：1ヶ月 機能開発：4.5ヶ月 機能・性能テスト：1.5ヶ月 半年の開発期間 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

開発期間半年 60本以上のAPI・機能開発 5000req/sを超える負荷対策 高いレベルでの品質・生産性 画像 アフロ Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. どれだけ効率よく開発を行うか システム設計が重要

バックエンド バックエンドのアジェンダ 実現するシステム 効率を上げるキーワード 1.機能 1.開発手法 1.API 2.システム構成 2.想定負荷 （マイクロサービス） 3.開発期間 3.ヤフオクシステムとの連携 4.GraphQL Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

開発手法 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

開発手法 言語・Framework 、 と親和性が高い （ ） • と比べて少ない記述量 • 安全など にはない機能 メンバーの開発 • • Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. • 社内標準、利用できるエン ジニアが多い • 強力な によるテスタブル なコード

開発手法 開発手法と効果 基盤実装のテンプレート化 共通部分のライブラリ化 ペアプログラミング 統一された構成・記述 ノウハウの資産化 多機能の並行開発化 機能間による記述の差異を生みにくい Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

システム構成 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

PayPayフリマのシステム構成 PayPayフリマのシステム構成 データ用PF データベース アプリケーション 向けAPIサーバ アプリ BFF （Backend for Frontend） データ用PF データベース データ用PF データベース ゲートウェイ アプリケーション 向けAPIサーバ Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. データ用PF

PayPayフリマのシステム構成 PayPayフリマのシステム構成 データ用PF データベース アプリケーション 向けAPIサーバ データ用PF データベース データ用PF データベース ゲートウェイ BFF アプリ （Backend for Frontend） APIのマッシュアップ アプリ向けのデータ整形 ヤフオクサーバとの共存 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. アプリケーション 向けAPIサーバ データ用PF

PayPayフリマのシステム構成 PayPayフリマのシステム構成 データ用PF データベース アプリケーション向けAPIサーバ データ用PF アプリ BFF （Backend for Frontend） データベース BFFが利用する機能ごとのAPI群 ゲートウェイ ビジネスロジックを担保 データソースは直接扱わない データ用PF アプリケーション 向けAPIサーバ Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. データ用PF データベース

PayPayフリマのシステム構成 PayPayフリマのシステム構成 データ用PF アプリケーション 向けAPIサーバ アプリ BFF （Backend for Frontend） ゲートウェイ 機能データごとのIFを提供 （GraphQL） データ用PF データベース ビジネスロジックは持たない 独自にスケールアウト データ用PF アプリケーション 向けAPIサーバ Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. データベース データ用PF データベース

PayPayフリマのシステム構成 PayPayフリマシステムのメリット 役割が明確 データ用PF どこで何をしているかわかる アプリ BFF （Backend for Frontend） データベース アプリケーション 向けAPIサーバ データ用PF データベース データ用PF データベース ゲートウェイ アプリケーション 向けAPIサーバ Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. データ用PF

PayPayフリマのシステム構成 PayPayフリマシステムのメリット 各々のコンポーネントが独立している ため並行開発ができる → BFF （Backend for Frontend） 生産性↑ データ用PF データベース アプリケーション 向けAPIサーバ データ用PF データベース データ用PF データベース ゲートウェイ アプリケーション 向けAPIサーバ Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. データ用PF

PayPayフリマのシステム構成 PayPayフリマシステムのメリット コンポーネントごとの負荷状況に合わせて スケールアウトできる BFF （Backend for Frontend） データ用PF データベース アプリケーション 向けAPIサーバ データ用PF データベース データ用PF データベース ゲートウェイ アプリケーション 向けAPIサーバ Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. データ用PF

ヤフオク!との連携 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

ヤフオク!との連携 なぜ？ クロスリスティング機能の実現 ヤフオク!の資源の共通化 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

ヤフオク!システムとの連携 クロスリスティング ヤフオク!から出品された商品をPayPayフリマでも表示・購入できる Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

ヤフオク!システムとの連携 出品（クロスリスティング） 商品用PF 出品 BFF PayPayフリマ （Backend for Frontend） PayPayフリマ 商品DB データ連携 ゲートウェイ PayPayフリマ のAPサーバ PayPayフリマ Index 検索システム データ連携 ヤフオク! Index 出品 ヤフオク! ゲートウェイ Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. ヤフオクの APサーバ 商品用PF ヤフオク! 商品DB

ヤフオク!システムとの連携 出品（クロスリスティング） PayPayフリマ のAPサーバ BFF PayPayフリマ （Backend for Frontend） 商品用PF PayPayフリマ 商品DB ゲートウェイ 検索リクエスト PayPayフリマ Index 検索システム ヤフオク! Index ヤフオク! ゲートウェイ Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. ヤフオクの APサーバ 商品用PF ヤフオク! 商品DB

ヤフオク!システムとの連携 商品詳細（クロスリスティング） 商品IDを元にヤフオク!の商品かPayPayフリマの商品かを判断して叩き分け BFF PayPayフリマ （Backend for Frontend） ゲートウェイ PayPayフリマ のAPサーバ 商品用PF 商品詳細 リクエスト ヤフオク! ゲートウェイ Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. ヤフオクの APサーバ 商品用PF PayPayフリマ 商品DB ヤフオク! 商品DB

ヤフオク!システムとの連携 PayPayフリマとヤフオク!の共通化 システム間が疎結合なので データ用PF ヤフオク!の資源を再利用できる BFF （Backend for Frontend） データベース PayPayフリマ のAPI群 データ用PF データベース データ用PF データベース ゲートウェイ ヤフオク のAPI群 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. データ用PF

GraphQLの活用 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

GraphQLの活用 GraphQLとは APIへの問い合わせと操作のための言語 Queryを定義し、クライアント側で必要な操作のためのQueryを発行 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

GraphQLの活用 PayPayフリマでのGraphQL利用 データ用PF データベース アプリケーション 向けAPIサーバ アプリ BFF （Backend for Frontend） データ用PF データベース データ用PF データベース ゲートウェイ アプリケーション 向けAPIサーバ Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. データ用PF

GraphQLの活用 PayPayフリマでのGraphQL利用 データ用PF データベース アプリケーション 向けAPIサーバ アプリ BFF （Backend for Frontend） データ用PF データベース データ用PF データベース ゲートウェイ アプリケーション 向けAPIサーバ Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. データ用PF

GraphQLの活用 なぜ？ データ用PFは様々なアプリケーションサーバから利用される 商品サービス 取引サービス 購入サービス ユーザー情報PF データベース Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. CSサービス レコメンド サービス

GraphQLの活用 なぜ？ それぞれ必要とされる情報が違う → スキーマが全部違う GraphQL ならクライアント側でスキーマ定義できる 商品サービス 購入サービス 取引サービス ユーザーID ニックネーム ユーザーID 認証情報 購入フラグ ユーザー情報PF データベース Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. CSサービス ユーザーID レコメンド サービス ユーザーID 性別

GraphQLの活用 なぜ？ 言語も環境もそれぞれ違う → クライアントとなる環境が異なる CurlにQueryを付与することで目的の値が取れる PaaS + Kotlin IaaS + PHP IaaS + PHP PaaS + PHP IaaS + Python 商品サービス 取引サービス 購入サービス CSサービス レコメンド サービス ユーザー情報PF データベース Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

GraphQLの活用 なぜ？ 仕様変更や追加によるスキーマの肥大化 XXがほしい 〇〇も追加ね！ Queryの項目追加でOK 目的ごとに整理しやすい 仕様追加！ 仕様追加！ 仕様追加！ 商品サービス 困ったw △△も必要かもな... ユーザー情報PF Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. データベース

BEシステムについて BEまとめ Kotlin+SpringFramework → コード品質と生産性を向上 システム構成・ヤフオク!連携 → 並行開発化、ヤフオク!資産の再利用、スケールアウト可能 GraphQL → データ用PFの様々な利用用途に対して柔軟に対応 様々なキーワードを実現し取り入れることで 品質と生産性を両立 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

アジェンダ 1. PayPayフリマとは 2. バックエンド 3. Android Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

松田 悠吾 フリマ推進本部プロダクト開発部 2017年にヤフオク! iOSエンジニアとして中途入社。 ヤフオク! Androidのリードエンジニアを経験。現在 はPayPayフリマのAndroid開発リーダー。 趣味は、スノボ Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

アジェンダ 1. 期間・体制 2. 開発手法・基盤 ペアプログラミング、Android Jetpack、 マルチモジュール 、DI Framework（Dagger） 3. まとめ Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

期間・体制（クイズ） Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

期間・体制 問題① 約60画面ありますが、リポジトリ作成からリリースまでの期間は？ A：1ヶ月 B：3ヶ月 C：6ヶ月 D：12ヶ月 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

期間・体制 正解① B. 3ヶ月 リポジトリ作成：7/16 リリース：10/28 1画面 / 日 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

期間・体制 問題② リリース月のチーム1人あたり平均残業時間は？ A：10時間 B：20時間 C：30時間 D：40時間 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

期間・体制 正解② A. 10時間 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

期間・体制 開発スケジュール 2019/7 2019/8 2019/9 一通り機能完了 リポジトリ作成 基盤 BE 2019/10 テスト ログ エンジニア 外部連携 ディレクション デザイナー BEから帰還 デザイン ヤフオク!から 機能開発 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. 新メンバー！ 改善 リリース

期間・体制 なぜ3ヶ月でリリースできたか 10人中7人がヤフオク! Androidエンジニア • 高速＆高品質な開発手法 • ヤフオク!に近い画面構成 • 強いエンジニア（黒帯や海外登壇者など） つよくてニューゲーム Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

開発手法・基盤 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

開発手法・基盤 • 手法 ペアプログラミング • 基盤 Android Jetpack マルチモジュール DI Framework Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

開発手法・基盤 ペアプログラミング • XP開発のプラクティスの1つ タスク1 • ペアでプログラミング 設計や実装、調査、ストア申請など • 毎日ペアをローテーション A 新しくペアを組む人に毎朝レクチャー タスク2 タスク3 E Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. B F C D

ペアプログラミング メリット • 質の高いレビューが可能 • レビュー工数がほぼゼロ • ペアのローテーションで知識の共有が早い • 全体仕様に詳しくなり属人化しない Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

開発手法・基盤 開発を支えた基盤 開発のはじめ1週間は基盤作り • Android Jetpack • マルチモジュール • Clean Architecture • DI Framework • Material Components • CI/CD など Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

開発手法・基盤 Android Jetpack 高品質なAndroidアプリを簡単に開発できるようになるコンポーネント集 • 開発を加速させる • ボイラープレートコードを排除する • 高品質で堅牢なアプリを作成する Architecture Component 堅牢でテストとメンテナンスが簡単なアプリを設計できる Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

Android Jetpack 検索結果画面 ヤフオク! Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. PayPayフリマ

Android Jetpack ヤフオク!の検索結果 Lifecycle, LiveData, ViewModel, Paging, Roomを活用 PagedListAdapter ViewModel ① Repository DataSource ② ③ ⑤ Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. LiveData <PagedList> ④ Room Network + Database

Android Jetpack PayPayフリマの検索結果 DataBindingとNavigationも活用 PagedListAdapter ViewModel Navigation ① Repository DataSource ② ③ ⑤ DataBinding Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. LiveData <PagedList> ④ Room Network + Database

Android Jetpack メリット • 品質を保ったまま、開発を加速させる事ができる • コード量が少なくなり、保守しやすいコードになる Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

開発手法・基盤 マルチモジュール 20 モジュール 約60のモジュールに分割 app navigation feature repository remote database core Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. 30 モジュール

マルチモジュール メリット • マージコストが減る • 並行開発しやすい • モジュール間の結合度を低くできる • モジュール間の依存関係が明確になる • 循環依存を排除できる Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

開発手法・基盤 DI Framework 依存性の注入（Dependency Injection：DI） コンポーネント間の依存関係をコード上から排除して、オブジェクトを外部から注 入できるようにする Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

DI Frameworkについて DIしない場合 class Repository { val apiClient: ApiClient = ApiClientImpl() } RepositoryはApiClientImplに依存 UseCase Repository ApiClient ApiClientImpl Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

DI Frameworkについて DIした場合 class Repository ( private val apiClient: ApiClient ) Repository(apiClient : ApiClientImpl()) オブジェクトを生成したりやさらに上位レイヤーから注入したりなど大変 UseCase Inject Repository ApiClient ApiClientImpl Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

DI Frameworkについて DIした場合 class RepositoryFactory ( fun create() = Repository(apiClient : ApiClientImpl()) ) RepositoryFactory.create() オブジェクトの管理が必要 UseCase Inject Repository ApiClient Factory ApiClientImpl Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

DI Frameworkについて DI Framework（Dagger）を使った場合 @Module class Module { @Provides @Singleton } fun provideApiCliet() : ApiClient = ApiClientImpl() class Repository @Inject constructor( private val apiClient: ApiClient ) UseCase Repository ApiClient Inject Dagger Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. ApiClientImpl

DI Frameworkについて Daggerの特徴 • Googleが開発 • コンパイル時に依存性を検証し、エラーがわかる • Annotation Processingで管理し、デバッグしやすい Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

DI Frameworkについて メリット • モジュール間の結合度が下がり、柔軟性向上 • モジュール間で簡単に注入でき、機能の実装に集中 • テスト/本番環境の振る舞いを変えて効率的に動作確認 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

まとめ Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

Android開発 まとめ • 60画面を3ヶ月で開発した • ペアプログラミング：質の高いレビュー、属人化ゼロ • Android Jetpack：高速・高品質なアプリ開発 • マルチモジュール：マージコストを減らし、並行開発化 • DI Framework：機能実装に集中でき、開発効率向上 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

最後に Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

CtoCフリマアプリの作り方 最後に • 話題の技術を実際に導入すると、開発速度や品質が向上した • アプリエンジニアがサーバーサイドの知見を持つと、全体の開発効率が上がる PayPayフリマは新しい技術や領域にチャレンジできる環境 フリマ業界でNo.1のサービスを目指す！！ Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.