Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
メルカリ ハロ アプリの技術スタック
Search
atsumo
October 08, 2024
Programming
4
2.2k
メルカリ ハロ アプリの技術スタック
メルカリハロの技術スタックに関する資料
atsumo
October 08, 2024
Tweet
Share
More Decks by atsumo
See All by atsumo
Component System
atsumo
0
180
Other Decks in Programming
See All in Programming
Laravel Boost 超入門
fire_arlo
1
130
Namespace and Its Future
tagomoris
6
430
TDD 実践ミニトーク
contour_gara
0
150
サイトを作ったらNFCタグキーホルダーを爆速で作れ!
yuukis
0
500
Flutter로 Gemini와 MCP를 활용한 Agentic App 만들기 - 박제창 2025 I/O Extended Seoul
itsmedreamwalker
0
150
Understanding Ruby Grammar Through Conflicts
yui_knk
1
140
[FEConf 2025] 모노레포 절망편, 14개 레포로 부활하기까지 걸린 1년
mmmaxkim
0
1.1k
Infer入門
riru
4
1.6k
AIでLINEスタンプを作ってみた
eycjur
1
200
Rancher と Terraform
fufuhu
0
110
一人でAIプロダクトを作るための工夫 〜技術選定・開発プロセス編〜 / I want AI to work harder
rkaga
13
2.8k
Dart 参戦!!静的型付き言語界の隠れた実力者
kno3a87
0
210
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
431
65k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
RailsConf 2023
tenderlove
30
1.2k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Rails Girls Zürich Keynote
gr2m
95
14k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
GraphQLとの向き合い方2022年版
quramy
49
14k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Transcript
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