メルカリ ハロ アプリの技術スタック

メルカリハロの技術スタックに関する資料

Transcript

1. 1 メルカリ ハロ アプリの技術スタックの紹介 @atsumo
2. 2 自己紹介 atsumo Mercari Hallo Mobile EM サイバーエージェントにて新卒エンジニアとしてキャリアをス タートし、アメーバピグやスマホゲーム、アプリ開発などでTLや EMを務める。その後、スタートアップでPdM兼TLとしてアプリ開 発に携わる。現在はメルカリでメルカリ ハロのユーザーインター フェース開発に注力している。 @atsumo
3. 3 メルカリ ハロについて
4. 4 4
5. Confidential ライフスタイルに合わせて多様化する働き方ニーズ デザイン進める
6. 6 技術スタックの紹介
7. 7 https://engineering.mercari.com/blog/entry/20240606-mercari-hallo-app-tech-stacks/
8. 8 • Monorepo • API: GraphQL • 状態管理 • デザインシステム Summary
9. 9 • Monorepoを採用 ◦ バックエンドやフロントエンド・アプリのコード全 てを一つのリポジトリで管理 ◦ Dart・Go・TypeScriptなど言語ごとにディレ クトリを分けている ◦ CI/CDのなどはスコープを対象のディレクトリ に対して行う • メリット ◦ システム全体の見通しが良い ◦ GraphQLスキーマファイルの共有が楽 ◦ バックエンドなどの修正が追いやすい ◦ 一緒に開発している感が強まる Monorepo
10. 10 • 使用パッケージ ◦ graphql_flutter ◦ graphql_codegen • メリット ◦ スキーマ定義による型の安全性 ◦ キャッシュ機能による状態管理の簡素化 ◦ 宣言的UIとの相性が良い API: GraphQL
11. 11 • アプリケーションステート ◦ サーバーリクエスト・キャッシュ ▪ graphql_flutter(graphql) ◦ グローバルステート ▪ riverpod • ローカルステート ◦ flutter_hooks 状態管理 参考: https://docs.flutter.dev/data-and-backend/state-mgmt/ephemeral-vs-app
12. 12 • graphql_flutter ◦ graphql_flutterはgraphqlを使いや すくするためのAPIやWidgetを提供し ているラッパーのパッケージ • Apollo Clientをモデルとした GraphQLクライアント ◦ Query / MutationなどのOperation がある ◦ 正規化してキャッシュする サーバーリクエスト・キャッシュ 参考: https://graphql.org/learn/caching/
13. 13 • riverpod • 複数画面で使われるようなデータ ◦ ハロの場合はサーバからのデータは GraphQLのCacheで管理しているの でそれ以外のステートを管理 • 例えば ◦ 認証用トークン グローバルステート
14. 14 • flutter_hooks • スクリーンやコンポーネント内で完結 するデータの管理 ◦ ローディングのステータス ◦ ボタンの有効・無効の切り替え ローカルステート 参考: https://riverpod.dev/docs/concepts/about_hooks
15. 15 • 独自のデザインシステム ◦ デザイントークン ◦ UIコンポーネント • Figma 上で設定されたプ ロパティをコード側でも同 じようなプロパティになる ように実装 ◦ 画面実装する際にコードと 紐付きがわかりやすい デザインシステム
16. 16 UIカタログ(Widgetbook) • Widgetbook • デザインシステムとして定 義したUIコンポーネントや Widgetなどをカタログ化 • 特定条件でしか表示され ないUIの確認などにも重 宝
17. 17 • 複雑な画面でない限りコン ポーネントを並べることで 画面が出来上がる 画面実装
18. 18 • メルカリ ハロでは、Monorepoを採用し、APIにはGraphQLを使用 • 状態管理では graphql_flutter、flutter_hooks、riverpod を採用していま す • デザインシステムはFigmaのコンポーネントプロパティを活用し、 Widgetbookでカタログ化することで、効率的なUI開発を行うことができました • まだまだシステム改善の余地があり、常にサービスやチーム状況にあった改善 をしていければと思っております まとめ
19. 19 ありがとうございました。 @atsumo