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
React Native で状態管理とコンポーネント設計に悩んだ話
Search
zerosant
June 03, 2022
Technology
2
1.7k
React Native で状態管理とコンポーネント設計に悩んだ話
zerosant
June 03, 2022
Tweet
Share
Other Decks in Technology
See All in Technology
データエンジニアリング領域におけるDuckDBのユースケース
chanyou0311
9
2.2k
Охота на косуль у древних
ashapiro
0
110
リクルートのエンジニア組織を下支えする 新卒の育成の仕組み
recruitengineers
PRO
1
110
大規模アジャイルフレームワークから学ぶエンジニアマネジメントの本質
staka121
PRO
3
1.3k
ウォンテッドリーのデータパイプラインを支える ETL のための analytics, rds-exporter / analytics, rds-exporter for ETL to support Wantedly's data pipeline
unblee
0
130
JAWS FESTA 2024「バスロケ」GPS×サーバーレスの開発と運用の舞台裏/jawsfesta2024-bus-gps-serverless
ma2shita
3
250
実は強い 非ViTな画像認識モデル
tattaka
3
1.3k
AWSアカウントのセキュリティ自動化、どこまで進める? 最適な設計と実践ポイント
yuobayashi
7
640
DevinでAI AWSエンジニア製造計画 序章 〜CDKを添えて〜/devin-load-to-aws-engineer
tomoki10
0
170
Introduction to OpenSearch Project - Search Engineering Tech Talk 2025 Winter
tkykenmt
2
110
いまからでも遅くない!コンテナでWebアプリを動かしてみよう!コンテナハンズオン編
nomu
0
160
NFV基盤のOpenStack更新 ~9世代バージョンアップへの挑戦~
vtj
0
360
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
How to train your dragon (web standard)
notwaldorf
91
5.9k
Bash Introduction
62gerente
611
210k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Agile that works and the tools we love
rasmusluckow
328
21k
How GitHub (no longer) Works
holman
314
140k
How to Ace a Technical Interview
jacobian
276
23k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Transcript
React Native でコンポーネント設計と 状態管理に悩んだ話 at TECH STAND #8 React Native
& React 2022.06.03 スターフェスティバル株式会社 ソフトウェアエンジニア 吉藤 徹
自己紹介 吉藤 徹 Yoshifuji Toru スターフェスティバル株式会社 ソフトウェアエンジニア @zerosant 普段は TypeScript
でサーバーサイド・フロントエンドを書いています。 Node.js や React がメイン。最近はサーバーサイド寄りが若干多め。
今日話すこと • サービス紹介 • 状態管理に悩んだ話 • コンポーネント設計に悩んだ話
サービス紹介 • 日本最大級の企業・ワーカー向け フードデリバリーサービス • 10,000種類以上のラインナップ • 会議・接待・イベントシーンにマッチし たごちそうをお届け
サービス紹介 • 毎日選べる日替わりメニューをオフィ スにお届け • 健康的な食事で福利厚生を充実 • Web・アプリ・Slackから注文
サーバーサイド API Batch フロントエンド ワーカー向け画面 各種管理画面 エンジニア2名 Slack Bot App
ごちクルNowの開発体制
技術選定 Why React Native ? • 普段からReactでフロントエンドを開発している。 • Flutterも検討したが、学習コストと天秤にかけてスピードを重視。
状態管理に悩んだ話
状態管理に悩んだ話 Web版での状態管理は... • Reduxを採用している。 • APIレスポンスや通信状態などを含め、Reduxに全部任せる。 • 単純なUIの制御状態は Local State
で管理する。
状態管理に悩んだ話 でも、Reduxはしんどい • コード量が多く、少しの改修でも変更量がかさむ。 • Redux不要論も囁かれ始める世の中。
「状態」ってなに...?
状態を分類した 1. セッションデータ ◦ 認証情報やそれに関連するユーザー情報・ユーザー設定。 ◦ 多くのページで使用されることを想定している。 2. ドメインデータ ◦
「商品」や「注文」といった、サービスが取り扱う固有なデータ。 ◦ サーバーからAPI経由で取得する。 ◦ 未取得・取得成功/失敗といった通信に関する状態も同時に持つ。 3. UIの制御状態 ◦ フォームの入力状態や開閉状態など。 ◦ ユーザーの操作によって変更され、 UIの表示に影響する。
状態の分類 → 状態管理の手法 1. セッションデータ → React Context ◦ 認証情報やそれに関連するユーザー情報・ユーザー設定。
◦ 多くのページで使用されることを想定している。 2. ドメインデータ → Local State or Redux ◦ 「商品」や「注文」といった、サービスが取り扱う固有なデータ。 ◦ サーバーからAPI経由で取得する。 ◦ 未取得・取得成功/失敗といった通信に関する状態も同時に持つ。 3. UIの制御状態 → Local State or React Context ◦ フォームの入力状態や開閉状態など。 ◦ ユーザーの操作によって変更され、 UIの表示に影響する。
状態管理の手法 : React Context いつ React Context を使うのか → ページを跨いで保持したいもので、更新頻度が低いものに使う
コンテクストは、ある React コンポーネントのツリーに対して「グローバル」とみなすことができる、現在の認証済 みユーザ・テーマ・優先言語といったデータを共有するために設計されています。 React 公式 - コンテクスト
状態管理の手法 : React Context React Context で管理するもの • セッションデータ ◦
すべてのページ/画面にまたがって使用する。 ◦ 更新頻度は低い • UIの制御状態 ◦ グローバルな制御状態のみ。 ◦ ModalとかSnackbarとか。
状態管理の手法 : Local State Local State で管理するもの • ドメインデータ ◦
特定のページ/画面のみで使用する、ページ固有のものに限る。 • UIの制御状態 ◦ フォームの入力状態など。 ◦ コンポーネントのライフサイクルに依存するもの。
状態管理の手法 : Redux Redux (などの状態管理ライブラリ) で管理するもの • ドメインデータ ◦ ページ/画面をまたがって保持する必要のあるもの。
◦ 該当するものはなさそう。 ◦ → 該当するものが出現したら導入する。
徐々に侵される Context
反省 • Modal や Snackbar など、グローバルなUIコン ポーネントにドメインデータを表示したくなる。 • 時が来たらReduxを入れるという決意、無謀(甚 大な作業量)
• 特定の処理だけを行うためだけの Contextが増 えていく。 • グッバイ秩序 ※ イメージ
Facebook もやってる FACEBOOK ALSO DOES SO.
コンポーネント設計に悩んだ話
状態管理に悩んだ話 Web版でのコンポーネント設計は... • 細かいルールは存在しなかった。 • ワーカー向け画面や複数の管理画面で使い回すUI部品は共通化している。 • Reduxを採用し、Container Component を作っていた。
• Redux の Action Creator で API を呼び出していた。 • あとは src/components にどんどん追加していく。
Reduxから解き放たれた私たち ※ イメージ
状態管理に悩んだ話 秩序を取り戻そう • API呼び出しは特定のレイヤで行う。 • Screen単位でContainer Componentを作って、そこでのみAPIを呼び出す。 • Atomic Design
でいう Pages と Templates に近い。 • あとは src/components にどんどん追加していく(雑)
目指すコンポーネント設計 ※ イメージ
肥大化する Container Component
反省 • Container コンポーネントが肥大化。 • Presentational コンポーネントの凝集度がと ても低い。 • どうにかして分割したいけど、
API call のレイ ヤを統一しつつ分割するとなると ... • 尽きぬ悩み ※ イメージ
まとめ • 状態管理に悩んだ話 ◦ 状態を三分類した。 ◦ 状態の特性ごとに適した状態管理手法を検討した。 • コンポーネント設計に悩んだ話 ◦
ページ/画面単位でビューとロジックを分離した。 ◦ ほんとはもっと細かい悩みはたくさんあるけど紹介しきれない ...!
We are hiring!!! スターフェスティバルでは、エンジニアを大募集しています!!!!! 採用情報 スターフェスティバル 採用情報 CTOによる対談記事 「イチから作り出せるチャンスがたくさんある」 CTO経験者が語った、スタフェス開発への期待|スター
フェスティバル公式|note
ご清聴ありがとうございました