Tweet
Tweet

Slide 1

Slide 1 text

React Native でコンポーネント設計と 状態管理に悩んだ話 at TECH STAND #8 React Native & React 2022.06.03 スターフェスティバル株式会社 ソフトウェアエンジニア 吉藤 徹

Slide 2

Slide 2 text

自己紹介 吉藤 徹 Yoshifuji Toru スターフェスティバル株式会社 ソフトウェアエンジニア @zerosant 普段は TypeScript でサーバーサイド・フロントエンドを書いています。 Node.js や React がメイン。最近はサーバーサイド寄りが若干多め。

Slide 3

Slide 3 text

今日話すこと ● サービス紹介 ● 状態管理に悩んだ話 ● コンポーネント設計に悩んだ話

Slide 4

Slide 4 text

サービス紹介 ● 日本最大級の企業・ワーカー向け フードデリバリーサービス ● 10,000種類以上のラインナップ ● 会議・接待・イベントシーンにマッチし たごちそうをお届け

Slide 5

Slide 5 text

サービス紹介 ● 毎日選べる日替わりメニューをオフィ スにお届け ● 健康的な食事で福利厚生を充実 ● Web・アプリ・Slackから注文

Slide 6

Slide 6 text

サーバーサイド API Batch フロントエンド ワーカー向け画面 各種管理画面 エンジニア2名 Slack Bot App ごちクルNowの開発体制

Slide 7

Slide 7 text

技術選定 Why React Native ? ● 普段からReactでフロントエンドを開発している。 ● Flutterも検討したが、学習コストと天秤にかけてスピードを重視。

Slide 8

Slide 8 text

状態管理に悩んだ話

Slide 9

Slide 9 text

状態管理に悩んだ話 Web版での状態管理は... ● Reduxを採用している。 ● APIレスポンスや通信状態などを含め、Reduxに全部任せる。 ● 単純なUIの制御状態は Local State で管理する。

Slide 10

Slide 10 text

状態管理に悩んだ話 でも、Reduxはしんどい ● コード量が多く、少しの改修でも変更量がかさむ。 ● Redux不要論も囁かれ始める世の中。

Slide 11

Slide 11 text

「状態」ってなに...？

Slide 12

Slide 12 text

状態を分類した 1. セッションデータ ○ 認証情報やそれに関連するユーザー情報・ユーザー設定。 ○ 多くのページで使用されることを想定している。 2. ドメインデータ ○ 「商品」や「注文」といった、サービスが取り扱う固有なデータ。 ○ サーバーからAPI経由で取得する。 ○ 未取得・取得成功/失敗といった通信に関する状態も同時に持つ。 3. UIの制御状態 ○ フォームの入力状態や開閉状態など。 ○ ユーザーの操作によって変更され、 UIの表示に影響する。

Slide 13

Slide 13 text

状態の分類 → 状態管理の手法 1. セッションデータ → React Context ○ 認証情報やそれに関連するユーザー情報・ユーザー設定。 ○ 多くのページで使用されることを想定している。 2. ドメインデータ → Local State or Redux ○ 「商品」や「注文」といった、サービスが取り扱う固有なデータ。 ○ サーバーからAPI経由で取得する。 ○ 未取得・取得成功/失敗といった通信に関する状態も同時に持つ。 3. UIの制御状態 → Local State or React Context ○ フォームの入力状態や開閉状態など。 ○ ユーザーの操作によって変更され、 UIの表示に影響する。

Slide 14

Slide 14 text

状態管理の手法 : React Context いつ React Context を使うのか → ページを跨いで保持したいもので、更新頻度が低いものに使う コンテクストは、ある React コンポーネントのツリーに対して「グローバル」とみなすことができる、現在の認証済 みユーザ・テーマ・優先言語といったデータを共有するために設計されています。 React 公式 - コンテクスト

Slide 15

Slide 15 text

状態管理の手法 : React Context React Context で管理するもの ● セッションデータ ○ すべてのページ/画面にまたがって使用する。 ○ 更新頻度は低い ● UIの制御状態 ○ グローバルな制御状態のみ。 ○ ModalとかSnackbarとか。

Slide 16

Slide 16 text

状態管理の手法 : Local State Local State で管理するもの ● ドメインデータ ○ 特定のページ/画面のみで使用する、ページ固有のものに限る。 ● UIの制御状態 ○ フォームの入力状態など。 ○ コンポーネントのライフサイクルに依存するもの。

Slide 17

Slide 17 text

状態管理の手法 : Redux Redux (などの状態管理ライブラリ) で管理するもの ● ドメインデータ ○ ページ/画面をまたがって保持する必要のあるもの。 ○ 該当するものはなさそう。 ○ → 該当するものが出現したら導入する。

Slide 18

Slide 18 text

徐々に侵される Context

Slide 19

Slide 19 text

反省 ● Modal や Snackbar など、グローバルなUIコン ポーネントにドメインデータを表示したくなる。 ● 時が来たらReduxを入れるという決意、無謀（甚 大な作業量） ● 特定の処理だけを行うためだけの Contextが増 えていく。 ● グッバイ秩序 ※ イメージ

Slide 20

Slide 20 text

Facebook もやってる FACEBOOK ALSO DOES SO.

Slide 21

Slide 21 text

コンポーネント設計に悩んだ話

Slide 22

Slide 22 text

状態管理に悩んだ話 Web版でのコンポーネント設計は... ● 細かいルールは存在しなかった。 ● ワーカー向け画面や複数の管理画面で使い回すUI部品は共通化している。 ● Reduxを採用し、Container Component を作っていた。 ● Redux の Action Creator で API を呼び出していた。 ● あとは src/components にどんどん追加していく。

Slide 23

Slide 23 text

Reduxから解き放たれた私たち ※ イメージ

Slide 24

Slide 24 text

状態管理に悩んだ話 秩序を取り戻そう ● API呼び出しは特定のレイヤで行う。 ● Screen単位でContainer Componentを作って、そこでのみAPIを呼び出す。 ● Atomic Design でいう Pages と Templates に近い。 ● あとは src/components にどんどん追加していく（雑）

Slide 25

Slide 25 text

目指すコンポーネント設計 ※ イメージ

Slide 26

Slide 26 text

肥大化する Container Component

Slide 27

Slide 27 text

反省 ● Container コンポーネントが肥大化。 ● Presentational コンポーネントの凝集度がと ても低い。 ● どうにかして分割したいけど、 API call のレイ ヤを統一しつつ分割するとなると ... ● 尽きぬ悩み ※ イメージ

Slide 28

Slide 28 text

まとめ ● 状態管理に悩んだ話 ○ 状態を三分類した。 ○ 状態の特性ごとに適した状態管理手法を検討した。 ● コンポーネント設計に悩んだ話 ○ ページ/画面単位でビューとロジックを分離した。 ○ ほんとはもっと細かい悩みはたくさんあるけど紹介しきれない ...！

Slide 29

Slide 29 text

We are hiring!!! スターフェスティバルでは、エンジニアを大募集しています！！！！！ 採用情報 スターフェスティバル 採用情報 CTOによる対談記事 「イチから作り出せるチャンスがたくさんある」 CTO経験者が語った、スタフェス開発への期待｜スター フェスティバル公式｜note

Slide 30

Slide 30 text

ご清聴ありがとうございました