1 メルカリ ハロ アプリの技術スタックの紹介 @atsumo

2 自己紹介 atsumo Mercari Hallo Mobile EM サイバーエージェントにて新卒エンジニアとしてキャリアをス タートし、アメーバピグやスマホゲーム、アプリ開発などでTLや EMを務める。その後、スタートアップでPdM兼TLとしてアプリ開 発に携わる。現在はメルカリでメルカリ ハロのユーザーインター フェース開発に注力している。 @atsumo

3 メルカリ ハロについて

4 4

Confidential ライフスタイルに合わせて多様化する働き方ニーズ デザイン進める

6 技術スタックの紹介

7 https://engineering.mercari.com/blog/entry/20240606-mercari-hallo-app-tech-stacks/

8 ● Monorepo ● API: GraphQL ● 状態管理 ● デザインシステム Summary

9 ● Monorepoを採用 ○ バックエンドやフロントエンド・アプリのコード全 てを一つのリポジトリで管理 ○ Dart・Go・TypeScriptなど言語ごとにディレ クトリを分けている ○ CI/CDのなどはスコープを対象のディレクトリ に対して行う ● メリット ○ システム全体の見通しが良い ○ GraphQLスキーマファイルの共有が楽 ○ バックエンドなどの修正が追いやすい ○ 一緒に開発している感が強まる Monorepo

10 ● 使用パッケージ ○ graphql_flutter ○ graphql_codegen ● メリット ○ スキーマ定義による型の安全性 ○ キャッシュ機能による状態管理の簡素化 ○ 宣言的UIとの相性が良い API: GraphQL

11 ● アプリケーションステート ○ サーバーリクエスト・キャッシュ ■ graphql_flutter(graphql) ○ グローバルステート ■ riverpod ● ローカルステート ○ flutter_hooks 状態管理 参考: https://docs.flutter.dev/data-and-backend/state-mgmt/ephemeral-vs-app

12 ● graphql_flutter ○ graphql_flutterはgraphqlを使いや すくするためのAPIやWidgetを提供し ているラッパーのパッケージ ● Apollo Clientをモデルとした GraphQLクライアント ○ Query / MutationなどのOperation がある ○ 正規化してキャッシュする サーバーリクエスト・キャッシュ 参考: https://graphql.org/learn/caching/

13 ● riverpod ● 複数画面で使われるようなデータ ○ ハロの場合はサーバからのデータは GraphQLのCacheで管理しているの でそれ以外のステートを管理 ● 例えば ○ 認証用トークン グローバルステート

14 ● flutter_hooks ● スクリーンやコンポーネント内で完結 するデータの管理 ○ ローディングのステータス ○ ボタンの有効・無効の切り替え ローカルステート 参考: https://riverpod.dev/docs/concepts/about_hooks

15 ● 独自のデザインシステム ○ デザイントークン ○ UIコンポーネント ● Figma 上で設定されたプ ロパティをコード側でも同 じようなプロパティになる ように実装 ○ 画面実装する際にコードと 紐付きがわかりやすい デザインシステム

16 UIカタログ(Widgetbook) ● Widgetbook ● デザインシステムとして定 義したUIコンポーネントや Widgetなどをカタログ化 ● 特定条件でしか表示され ないUIの確認などにも重 宝

17 ● 複雑な画面でない限りコン ポーネントを並べることで 画面が出来上がる 画面実装

18 ● メルカリ ハロでは、Monorepoを採用し、APIにはGraphQLを使用 ● 状態管理では graphql_flutter、flutter_hooks、riverpod を採用していま す ● デザインシステムはFigmaのコンポーネントプロパティを活用し、 Widgetbookでカタログ化することで、効率的なUI開発を行うことができました ● まだまだシステム改善の余地があり、常にサービスやチーム状況にあった改善 をしていければと思っております まとめ

19 ありがとうございました。 @atsumo