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の設計概論 ~おてつたびの事例に添えて~
Search
ryubb
January 19, 2022
Programming
1
1.1k
Reactの設計概論 ~おてつたびの事例に添えて~
ryubb
January 19, 2022
Tweet
Share
More Decks by ryubb
See All by ryubb
最近流行りのRemixとは何か
ryubb
1
1.3k
Other Decks in Programming
See All in Programming
Serena MCPのすすめ
wadakatu
4
800
Reactをクライアントで使わない
yusukebe
7
6.2k
SpecKitでどこまでできる? コストはどれくらい?
leveragestech
0
350
開発者への寄付をアプリ内課金として実装する時の気の使いどころ
ski
0
320
なぜGoのジェネリクスはこの形なのか? Featherweight Goが明かす設計の核心
ryotaros
7
960
Let's Write a Train Tracking Algorithm
twocentstudios
0
220
議事録の要点整理を自動化! サーバレス Bot 構築術
penpeen
3
1.6k
Pythonスレッドとは結局何なのか? CPython実装から見るNoGIL時代の変化
curekoshimizu
3
930
そのpreloadは必要?見過ごされたpreloadが技術的負債として爆発した日
mugitti9
2
2.4k
ИИ-Агенты в каждый дом – Алексей Порядин, PythoNN
sobolevn
0
140
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
380
Advance Your Career with Open Source
ivargrimstad
0
160
Featured
See All Featured
A designer walks into a library…
pauljervisheath
208
24k
Balancing Empowerment & Direction
lara
4
660
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.7k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
How GitHub (no longer) Works
holman
315
140k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Context Engineering - Making Every Token Count
addyosmani
3
140
Transcript
←マイページ登録 ←Twitter Reactの設計概論 ~おてつたびの事例に添えて~ Presented by 橋本龍之介
←マイページ登録 ←Twitter 自己紹介 橋本龍之介 株式会社おてつたび フルスタックエンジンア エンジニア4年目 ◦使用したことがある言語 PHP, JS,
TS, Java, Python, Ruby ◦使用したことがあるフレームワークやライブラリ FuelPHP, React, Vue, Play Framework, Django, Ruby on Rails ◦その他 ReactとTSが大好き 最近はSwiftに挑戦中
←マイページ登録 ←Twitter useState Redux Recoil Context Class component hooks Functional
component useReducer mobx Containerパターン Atomic Design Compound Components
←マイページ登録 ←Twitter useState Redux Recoil Context Class component state hooks
Functional component state useReducer mobx Containerパターン Atomic Design Compound Components どう設計すれば良いか分からない!
←マイページ登録 ←Twitter 今日話すこと 1. コンポーネント設計 2. State設計 3. Contextの適用箇所
←マイページ登録 ←Twitter 1. コンポーネント設計
←マイページ登録 ←Twitter おてつたびのコンポーネント設計 • Containerパターン • Atomic Design
←マイページ登録 ←Twitter Containerパターンとは Containerパターンとは、責務をロジックとレイアウトに明確に分離して、ロ ジックはContainerコンポーネントに、レイアウトはPresentationalコンポーネ ントにコーディングしていくデザインパータン。 フロントエンドでは、様々な責任を持つコンポーネントが登場するが、一番大 きな分類であるロジックとレイアウトを分離することで、責務の分離とコードの 可読性や保守性を高めるパターン。
←マイページ登録 ←Twitter Containerコンポーネントの責務 1. ビジネスロジック全般 a. onClick等の各種イベントハンドラ b. APIとの通信と副作用の管理 2.
Stateの管理 3. reduxやContextからのデータの受け取り
←マイページ登録 ←Twitter Presentationalコンポーネントの責務 1. HTMLとCSSを用いたレイアウト 2. レイアウトを責務とするコンポーネントの統合 ダイアログやフォームであっても、 state管理は一切行わず、親コンポーネントにあたる Containerコンポーネ
ントで行う。Containerコンポーネントで管理されている stateをpropsで受け取る。
←マイページ登録 ←Twitter Containerパターンを用いたディレクトリ設計 • pageディレクトリの配下に、該当のページ名を表 すディレクトリを作成 上記の例では、記事一覧ページを作成することを 想定しているためArticlesという命名 • Articles配下にContainerコンポーネントである
index.tsxを定義 • Presentatioanlコンポーネントを配置する componentsディレクトリを作成 • Presentatinalコンポーネントを束ねるコンポーネ ント(Atomic Designでいうtemplates)である index.tsxをcomponentsディレクトリ内に定義
←マイページ登録 ←Twitter Atomic Designとは コンポーネントをAtoms、Molecules、Organisms、Templates、Pagesの5つ に責務を分離して設計していくデザイン手法。 PagesはContainerコンポーネントにあたるので、それ以外の4つをレイアウト を責務とするコンポーネントとして設計する。 参考:https://bradfrost.com/blog/post/atomic-web-design/
←マイページ登録 ←Twitter Atomic Designとは その② 各コンポーネントの責務 • Atoms UIの最小単位。 ボタンやフォームの入力フィールド、ラベル単体など
• Molecules Atomsを組み合わせてUIを構成したもの。 入力フィールドとラベルを組み合わせたものや、リストなど • Organisms AtomsやMoleculesを組み合わせてUIを構成したもの ヘッダやサイドバー、フォームなど • Templates 上記のコンポーネントを組み合わせて UIを構成した、ページ全体のUI 実データを渡していないもの • Pages 実データを渡して、実際にページを構成するもの ContainerパターンのContainer componentにあたるので、あまり登場しないコンポーネント
←マイページ登録 ←Twitter Atomic Designベースのディレクトリ設計 • atomsディレクトリ ボタン(Button.sx)などを配置する • moleculesディレクトリ ボタンやラベルを組み合わせたコンポーネント
(Field.tsx)を配置する • organismsディレクトリ atomsやmoleculesを組み合わせたコンポーネン ト(Field.tsx)を配置する • templatesディレクトリ 各ページtemplatesは通常一つしか想定されない ので、index.tsxを作成して、templatesを責務とす るコンポーネントを記載する
←マイページ登録 ←Twitter おてつたびでのコンポーネント設計 • ロジックとレイアウトを分離するためにContainerパターンを導入 • レイアウトの責務の分離は、Atomic Designを意識してコンポーネント設 計を行う •
ある程度コンポーネント数が多いページでは、Atomic Designを用いたコ ンポーネント設計を行う • ディレクトリ設計はContainerパターンは遵守し、Atomic Designを用いる 場合にのみAtomic Designを意識したディレクトリ設計にする
←マイページ登録 ←Twitter • Compound componentsパターンの使用 条件分岐によるViewの宣言を排除し、より宣言的にコーディングするデ ザインパターン • Classコンポーネントでは使用せず、Functionalコンポーネントとhooksで 実装する
• HOCよりRender propsを使用 その他のコンポーネント設計
←マイページ登録 ←Twitter 2. State設計
←マイページ登録 ←Twitter おてつたびのState管理 • useState ◦ ローカルstateの管理 • useReducer ◦
新しく導入しているローカルstateの管理 • Redux ◦ グローバルstateの管理 基本的にはこの3つしか使いません!
←マイページ登録 ←Twitter useStateの例
←マイページ登録 ←Twitter useStateのPros & Cons Pros 1. シンプルで一番分かりやすい 2. シンプルがゆえに、コードが複雑になりづらい
3. パフォーマンスが一番良い Cons 1. 複数のstateを管理する場合、可読性が低下し複雑になりがち 機能の提供が少ないので、可もなく不可もなくと いうような感じ
←マイページ登録 ←Twitter useReducerの例
←マイページ登録 ←Twitter useReducerのPros & Cons Pros 1. 複数の値の管理が行いやすい 2. Reduxのように書くことができる
3. パフォーマンスはそこそこ良い Cons 1. 責務をどこで担当させるかや設計がやや難しい 2. 設計を行わないと、すぐにコードが複雑になる 3. 【個】payloadの型定義がやりづらい
←マイページ登録 ←Twitter reduxのPros & Cons Pros 1. 責務の分離が明確 2. どのコンポーネントからでも容易にデータを渡すことが可能
3. 複数の値を管理でき、namespaceで区切ることも可能 4. ドキュメントやBest practiceなどが豊富 Cons 1. 学習コストが高い(redux, redux-saga, redux-thunk) 2. レンダリングパフォーマンスが悪い 3. 必要ないページで不要なデータを保持してしまう
←マイページ登録 ←Twitter おてつたびでの運用ルール • useState ◦ stateとして管理すべきデータの種類が少なく、複雑な操作を用いないシンプ ルなページ ◦ できれば、userReducerの方を使っていく
• useReducer ◦ stateとして管理すべきデータの種類が多い、もしくは複雑な操作を用いるよ うなページ ◦ 現時点では、積極的に使っていく ▪ どちらかというと、未知なる技術で知見を貯めたいから • Redux ◦ ページ全体に渡って必要なデータを管理する場合のみ使う ▪ 認証やユーザー情報など ◦ まずはuseStateやuseReducerを使う方針で考える ◦ その他グローバルstateで管理することで恩恵を受けられる場合 ▪ APIリクエストを抑制するためのデータ保持など
←マイページ登録 ←Twitter 3. Contextの適用箇所
←マイページ登録 ←Twitter Contextに関して Contextとは • React v16.3で登場した技術 • propsとは別のやり方で、コンポーネント間のデータ授受の機能を提供す る
• stateやデータ管理の機能を提供していない • 比較的シンプルに扱うことができる • コンポーネント間に依存が発生するので、多用は厳禁 state管理機能と組み合わせて使うもので、 propsに近い概念
←マイページ登録 ←Twitter おてつたびでのContext使用例 1. Global state(redux)を使用していない画面 2. 扱うデータの種類が多くて、propsの管理が大変に なる場合 3.
元のソースコードをリファクタする前に一時的に機能 追加する場合 便利なAPIだが、Consumeコンポーネント(Context APIでデータを受け取る側)がProviderコン ポーネントに依存するため、使用箇所は見極めが必要で、基本的には使用しない前提で考えて良 い。 Atomic DesignのTemplatesやOrganismsにあたるコンポーネントはConsumeになって良いが、 MoleculesやAtomsでは依存を避けるためにもConsumeとはならない。
←マイページ登録 Contextはあるコンポーネントに依存する代償としてデータの 受け渡しをシンプルにするという対価を得ているので、その Pros & Consは見極める必要がある。 大前提として、Reduxのように使わないで済む方法を模索 し、どうしてもという場合に依存を最小限にしなければならな い場合以外で使用する
←マイページ登録 ←Twitter 仲間募集中! おてつたびでは、新しい旅の形を一緒に作っていく仲間を募集中です。 募集ポジションは以下の通りです。 • iOSアプリエンジニア • Webフルスタックエンジニア まずはカジュアルにお話ししましょう!
その後、おてつたびに興味を持っていただけたら、是非ご一緒しましょう。 Notion Wantedly iOS Wantedly フルスタックエンジニア
←マイページ登録 ←Twitter SNS SNSもやっています! 今後はZennをメインに発信しつつ、noteやTwitterも活用しています。 フロントエンド中心に発信しているので、興味ある方は閲覧 && フォローをお 願いします! Twitter
Zenn note