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
VS Code Update for GitHub Copilot
74th
2
650
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
170
技術同人誌をMCP Serverにしてみた
74th
1
650
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
220
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
450
Is Xcode slowly dying out in 2025?
uetyo
1
270
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
5.8k
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
550
Discover Metal 4
rei315
2
140
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
190
ニーリーにおけるプロダクトエンジニア
nealle
0
840
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
680
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Done Done
chrislema
184
16k
Navigating Team Friction
lara
187
15k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Bash Introduction
62gerente
613
210k
Building Adaptive Systems
keathley
43
2.7k
What's in a price? How to price your products and services
michaelherold
246
12k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Agile that works and the tools we love
rasmusluckow
329
21k
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