Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Reactの設計概論 ~おてつたびの事例に添えて~

46416ca30dd69584c16460dde1b4dc3e?s=47 ryubb
January 19, 2022

Reactの設計概論 ~おてつたびの事例に添えて~

46416ca30dd69584c16460dde1b4dc3e?s=128

ryubb

January 19, 2022
Tweet

More Decks by ryubb

Other Decks in Programming

Transcript

  1. ←マイページ登録 ←Twitter Reactの設計概論 ~おてつたびの事例に添えて~ Presented by 橋本龍之介

  2. ←マイページ登録 ←Twitter 自己紹介 橋本龍之介 株式会社おてつたび フルスタックエンジンア エンジニア4年目 ◦使用したことがある言語 PHP, JS,

    TS, Java, Python, Ruby ◦使用したことがあるフレームワークやライブラリ FuelPHP, React, Vue, Play Framework, Django, Ruby on Rails ◦その他 ReactとTSが大好き 最近はSwiftに挑戦中
  3. ←マイページ登録 ←Twitter useState Redux Recoil Context Class component hooks Functional

    component useReducer mobx Containerパターン Atomic Design Compound Components
  4. ←マイページ登録 ←Twitter useState Redux Recoil Context Class component state hooks

    Functional component state useReducer mobx Containerパターン Atomic Design Compound Components どう設計すれば良いか分からない!
  5. ←マイページ登録 ←Twitter 今日話すこと 1. コンポーネント設計 2. State設計 3. Contextの適用箇所

  6. ←マイページ登録 ←Twitter 1. コンポーネント設計

  7. ←マイページ登録 ←Twitter おてつたびのコンポーネント設計 • Containerパターン • Atomic Design

  8. ←マイページ登録 ←Twitter Containerパターンとは Containerパターンとは、責務をロジックとレイアウトに明確に分離して、ロ ジックはContainerコンポーネントに、レイアウトはPresentationalコンポーネ ントにコーディングしていくデザインパータン。 フロントエンドでは、様々な責任を持つコンポーネントが登場するが、一番大 きな分類であるロジックとレイアウトを分離することで、責務の分離とコードの 可読性や保守性を高めるパターン。

  9. ←マイページ登録 ←Twitter Containerコンポーネントの責務 1. ビジネスロジック全般 a. onClick等の各種イベントハンドラ b. APIとの通信と副作用の管理 2.

    Stateの管理 3. reduxやContextからのデータの受け取り
  10. ←マイページ登録 ←Twitter Presentationalコンポーネントの責務 1. HTMLとCSSを用いたレイアウト 2. レイアウトを責務とするコンポーネントの統合 ダイアログやフォームであっても、 state管理は一切行わず、親コンポーネントにあたる Containerコンポーネ

    ントで行う。Containerコンポーネントで管理されている stateをpropsで受け取る。
  11. ←マイページ登録 ←Twitter Containerパターンを用いたディレクトリ設計 • pageディレクトリの配下に、該当のページ名を表 すディレクトリを作成 上記の例では、記事一覧ページを作成することを 想定しているためArticlesという命名 • Articles配下にContainerコンポーネントである

    index.tsxを定義 • Presentatioanlコンポーネントを配置する componentsディレクトリを作成 • Presentatinalコンポーネントを束ねるコンポーネ ント(Atomic Designでいうtemplates)である index.tsxをcomponentsディレクトリ内に定義
  12. ←マイページ登録 ←Twitter Atomic Designとは コンポーネントをAtoms、Molecules、Organisms、Templates、Pagesの5つ に責務を分離して設計していくデザイン手法。 PagesはContainerコンポーネントにあたるので、それ以外の4つをレイアウト を責務とするコンポーネントとして設計する。 参考:https://bradfrost.com/blog/post/atomic-web-design/

  13. ←マイページ登録 ←Twitter Atomic Designとは その② 各コンポーネントの責務 • Atoms UIの最小単位。 ボタンやフォームの入力フィールド、ラベル単体など

    • Molecules Atomsを組み合わせてUIを構成したもの。 入力フィールドとラベルを組み合わせたものや、リストなど • Organisms AtomsやMoleculesを組み合わせてUIを構成したもの ヘッダやサイドバー、フォームなど • Templates 上記のコンポーネントを組み合わせて UIを構成した、ページ全体のUI 実データを渡していないもの • Pages 実データを渡して、実際にページを構成するもの ContainerパターンのContainer componentにあたるので、あまり登場しないコンポーネント
  14. ←マイページ登録 ←Twitter Atomic Designベースのディレクトリ設計 • atomsディレクトリ ボタン(Button.sx)などを配置する • moleculesディレクトリ ボタンやラベルを組み合わせたコンポーネント

    (Field.tsx)を配置する • organismsディレクトリ atomsやmoleculesを組み合わせたコンポーネン ト(Field.tsx)を配置する • templatesディレクトリ 各ページtemplatesは通常一つしか想定されない ので、index.tsxを作成して、templatesを責務とす るコンポーネントを記載する
  15. ←マイページ登録 ←Twitter おてつたびでのコンポーネント設計 • ロジックとレイアウトを分離するためにContainerパターンを導入 • レイアウトの責務の分離は、Atomic Designを意識してコンポーネント設 計を行う •

    ある程度コンポーネント数が多いページでは、Atomic Designを用いたコ ンポーネント設計を行う • ディレクトリ設計はContainerパターンは遵守し、Atomic Designを用いる 場合にのみAtomic Designを意識したディレクトリ設計にする
  16. ←マイページ登録 ←Twitter • Compound componentsパターンの使用 条件分岐によるViewの宣言を排除し、より宣言的にコーディングするデ ザインパターン • Classコンポーネントでは使用せず、Functionalコンポーネントとhooksで 実装する

    • HOCよりRender propsを使用 その他のコンポーネント設計
  17. ←マイページ登録 ←Twitter 2. State設計

  18. ←マイページ登録 ←Twitter おてつたびのState管理 • useState ◦ ローカルstateの管理 • useReducer ◦

    新しく導入しているローカルstateの管理 • Redux ◦ グローバルstateの管理 基本的にはこの3つしか使いません!
  19. ←マイページ登録 ←Twitter useStateの例

  20. ←マイページ登録 ←Twitter useStateのPros & Cons Pros 1. シンプルで一番分かりやすい 2. シンプルがゆえに、コードが複雑になりづらい

    3. パフォーマンスが一番良い Cons 1. 複数のstateを管理する場合、可読性が低下し複雑になりがち 機能の提供が少ないので、可もなく不可もなくと いうような感じ
  21. ←マイページ登録 ←Twitter useReducerの例

  22. ←マイページ登録 ←Twitter useReducerのPros & Cons Pros 1. 複数の値の管理が行いやすい 2. Reduxのように書くことができる

    3. パフォーマンスはそこそこ良い Cons 1. 責務をどこで担当させるかや設計がやや難しい 2. 設計を行わないと、すぐにコードが複雑になる 3. 【個】payloadの型定義がやりづらい
  23. ←マイページ登録 ←Twitter reduxのPros & Cons Pros 1. 責務の分離が明確 2. どのコンポーネントからでも容易にデータを渡すことが可能

    3. 複数の値を管理でき、namespaceで区切ることも可能 4. ドキュメントやBest practiceなどが豊富 Cons 1. 学習コストが高い(redux, redux-saga, redux-thunk) 2. レンダリングパフォーマンスが悪い 3. 必要ないページで不要なデータを保持してしまう
  24. ←マイページ登録 ←Twitter おてつたびでの運用ルール • useState ◦ stateとして管理すべきデータの種類が少なく、複雑な操作を用いないシンプ ルなページ ◦ できれば、userReducerの方を使っていく

    • useReducer ◦ stateとして管理すべきデータの種類が多い、もしくは複雑な操作を用いるよ うなページ ◦ 現時点では、積極的に使っていく ▪ どちらかというと、未知なる技術で知見を貯めたいから • Redux ◦ ページ全体に渡って必要なデータを管理する場合のみ使う ▪ 認証やユーザー情報など ◦ まずはuseStateやuseReducerを使う方針で考える ◦ その他グローバルstateで管理することで恩恵を受けられる場合 ▪ APIリクエストを抑制するためのデータ保持など
  25. ←マイページ登録 ←Twitter 3. Contextの適用箇所

  26. ←マイページ登録 ←Twitter Contextに関して Contextとは • React v16.3で登場した技術 • propsとは別のやり方で、コンポーネント間のデータ授受の機能を提供す る

    • stateやデータ管理の機能を提供していない • 比較的シンプルに扱うことができる • コンポーネント間に依存が発生するので、多用は厳禁 state管理機能と組み合わせて使うもので、 propsに近い概念
  27. ←マイページ登録 ←Twitter おてつたびでのContext使用例 1. Global state(redux)を使用していない画面 2. 扱うデータの種類が多くて、propsの管理が大変に なる場合 3.

    元のソースコードをリファクタする前に一時的に機能 追加する場合 便利なAPIだが、Consumeコンポーネント(Context APIでデータを受け取る側)がProviderコン ポーネントに依存するため、使用箇所は見極めが必要で、基本的には使用しない前提で考えて良 い。 Atomic DesignのTemplatesやOrganismsにあたるコンポーネントはConsumeになって良いが、 MoleculesやAtomsでは依存を避けるためにもConsumeとはならない。
  28. ←マイページ登録 Contextはあるコンポーネントに依存する代償としてデータの 受け渡しをシンプルにするという対価を得ているので、その Pros & Consは見極める必要がある。 大前提として、Reduxのように使わないで済む方法を模索 し、どうしてもという場合に依存を最小限にしなければならな い場合以外で使用する

  29. ←マイページ登録 ←Twitter 仲間募集中! おてつたびでは、新しい旅の形を一緒に作っていく仲間を募集中です。 募集ポジションは以下の通りです。 • iOSアプリエンジニア • Webフルスタックエンジニア まずはカジュアルにお話ししましょう!

    その後、おてつたびに興味を持っていただけたら、是非ご一緒しましょう。 Notion Wantedly iOS Wantedly フルスタックエンジニア
  30. ←マイページ登録 ←Twitter SNS SNSもやっています! 今後はZennをメインに発信しつつ、noteやTwitterも活用しています。 フロントエンド中心に発信しているので、興味ある方は閲覧 && フォローをお 願いします! Twitter

    Zenn note