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/Reduxで秩序あるコードを書く
Search
Naoya Ishii
August 23, 2018
Programming
8
6.8k
React/Reduxで 秩序あるコードを書く
Naoya Ishii
August 23, 2018
Tweet
Share
More Decks by Naoya Ishii
See All by Naoya Ishii
Yahoo! JAPANアプリ上で動くWebVIewサービス開発
naoishii
2
2.2k
JS/Reactを初心者に説明するときに困ったポイント
naoishii
3
530
Other Decks in Programming
See All in Programming
React 使いじゃなくても知っておきたい教養としての React
oukayuka
18
5.8k
decksh - a little language for decks
ajstarks
4
21k
パスタの技術
yusukebe
1
390
UbieのAIパートナーを支えるコンテキストエンジニアリング実践
syucream
2
630
LLMOpsのパフォーマンスを支える技術と現場で実践した改善
po3rin
8
960
GitHub Copilotの全体像と活用のヒント AI駆動開発の最初の一歩
74th
8
3k
kiroでゲームを作ってみた
iriikeita
0
180
Portapad紹介プレゼンテーション
gotoumakakeru
1
130
Introduction to Git & GitHub
latte72
0
120
管你要 trace 什麼、bpftrace 用下去就對了 — COSCUP 2025
shunghsiyu
0
440
Go製CLIツールをnpmで配布するには
syumai
2
1.2k
令和最新版手のひらコンピュータ
koba789
14
7.9k
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.6k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
20k
Git: the NoSQL Database
bkeepers
PRO
431
65k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Why Our Code Smells
bkeepers
PRO
338
57k
The Cult of Friendly URLs
andyhume
79
6.5k
Six Lessons from altMBA
skipperchong
28
4k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Site-Speed That Sticks
csswizardry
10
780
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
Transcript
Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. React/Reduxで
秩序あるコードを書く BonfireFrontend #2 ⽯井直⽮ @ヤフー株式会社
Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. ⾃⼰紹介
• ⽯井 直⽮ @kaidempa • 2012新卒 • ヤフーのスマホ版トップページ開発 • 現在は新規開発をやってます。
Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. ⾃⼰紹介
• Reactの本を書きました。
Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. 今⽇話すこと
• 秩序ある開発のために⾃分なりに気をつけていること • ここで⾔う秩序とは、複雑な要件や度重なる変更に対して柔軟 に対応できる状態のこと。 • 「あっちを修正したらこっちが変になった」を避けるということ。 • 1箇所の修正によってあちこち修正しないといけない事態を避けること。
Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. 今⽇話すこと
• re-ducksを使う • データを主体としてstateを管理する • ComponentとContainerをしっかり使う
Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. re-ducksの基本
• re-ducksとは • https://github.com/alexnm/re-ducks • ducksというパターンを踏襲 • https://github.com/erikras/ducks-modular-redux • OperationsとSelectorsが特徴的
Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. ducks
• ducksの基本は、Redux公式サイトのようなディレクトリ構成 ではなく、reducerとactionを同じ場所に置くこと。
Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. •
Ducksはファイルはスッキリするが、複雑になってくると1 ファイルが⼤きくなってくる。 • 使う側からのインターフェースを変えずにディレクトリにすることも できる。 • redux-thunkなどを使って⾮同期を扱うようになるとまたさら に複雑になる。 ducksの使いづらいところ
Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. re-ducks
• re-ducks • 使う側からの呼び⽅はducksと同じ感じ • action, reducerはほとんど定義するだけ • selector, operationという新キャラが登場 • 1層増やすことによって、 action, reducerが本来やるべきことに 集中できるようになる。
Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. Selector
• Selectorのルール 1. (state) => return 欲しい値 というインターフェース 2. Stateから算出できる値はstateに 保存しないでselectorから得る (同じデータを複数のstateで持 たない) 3. 別のディレクトリのselectorから 値を取得しても良い 4. reselectを使う
Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. Operation
• Operationのルール 1. redux-thunkを使って良い 2. 値が欲しいときはselectorを経由 して取得する 3. 同じディレクトリのactionは参照 して良い。 4. 別のディレクトリのactionは直接 参照せず、operationを経由して使 う 5. A→Bの順にactionを叩くといった ⼿続きを書いていい
Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. re-ducks
• re-duck⾃体の話はここまで。 • ここからは、re-ducksを使って破綻しないコードを書くには、 という話 • このようにしろと⾔ってるのではなくて、⾃分はこうしてなん とか秩序を保とうとしているという話
Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. re-ducks
• re-ducksを適切に使うことで、かなり秩序を得ることができる。 • 単にstateを操作するだけのaction/reducerと、 複雑な操作を扱うoperation/selectorを明⽰的に分ける • reactらしさ・reduxらしさを損なうことなく複雑さに⽴ち向か うことができる
Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. re-ducks
• アプリケーションの本質は「状態(state)」 • Reactの良さは状態(state)→表⽰を定義するだけで良いこと。 • 状態管理とアプリケーションの複雑さは切り離されているべき であり、operation, selectorを使うことで切り離すことができ る。 • ある状態を変更するルートが複数ある場合でも混乱しなくなるってこ と。 • stateと実際に表⽰上必要な値や使いやすい形はかならずしも⼀致して いないので、selectorで1クッションさせて変更に柔軟にする。
Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. re-ducks
• アプリケーションの本質である「状態」と複雑さを持つユーザ 操作や⼿続きを分けて考えることができる。 • ⼿続きの例として、「ログイン済みならコンテンツに遷移して、ログ インしてないならログイン画⾯に遷移」など。「コンテンツに遷移」 と「ログイン画⾯に遷移」は別々のaction(もしくはoperation)で、 別々の状態を操作するはず。 • それぞれはシンプルに作っておいて、operation, selectorで分岐する条 件を取得して必要なactionを順番に叩く。
Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.
Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. データを主体としてstateを管理する
• 「⾒た⽬切り」と「データ切り」がある。 • おすすめは「データ切り」
Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.
Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. データを主体としてstateを管理する
• データ切りすることで変更に強くなる。仕様変更があったとき に違和感なく修正できるようになる。 • 開発中のエンジニアは「その時点の」仕様に詳しいので⾒た⽬ 切りしがち。
Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. ComponentとContainerをしっかり使う
• コンポーネントはビジネスロジックを知りすぎてはいけない。 • 知りすぎた命名やコードは混乱の元
Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. ComponentとContainerをしっかり使う
• Componentが知りすぎた命名の例 • slottledGetHogehoge(ボタンにバインドされた関数) • スロットルされてるかは知らなくていい • Hogehogeをとってることも知らなくていい • ボタンはクリックされたら関数を呼ぶだけでよくて、何をするかは知らなくてい い。 • confirmAndLogin(ボタンの名前) • ログインはいいかもだけど、その前に確認を出すことは知らなくていい • 仕様が変わった時コンポーネントも修正しないといけなくなる
Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. ComponentとContainerをしっかり使う
• 知りすぎたロジック • よくあるif(xxx < 10)など。10ってなんだ。 • マジックナンバーが良くないは当然なので定数にする。 • この数字の理由が表⽰上の理由でコンポーネントにあるのか、ロジッ クの理由でここにあるのか考える必要がある • ロジックにあるならselectorを使って判定し、真偽値で渡す。
Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. ComponentとContainerをしっかり使う
• Containerをしっかりつかう。 • ContainerはシンプルなmapStateToPropsとmapDispatchToPropsを コンポーネントにconnectするだけの場所ではない。
Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. Redux公式サイトの例を改悪させたコード
Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. オリジナルのコード
https://redux.js.org/basics/usagewithreact
Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. ここがいいところ
Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. ComponentとContainerをしっかり使う
• mapStateToPropsではPropsにわたすべき値を計算することが できる。 • これは実際にはselectorでやる。 • コンポーネントに無駄なpropsを渡して知りすぎたロジックによる計算 をさせるべきではない。
Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. ComponentとContainerをしっかり使う
• mapDispatchToPropsで予めAction(re-ducksではOperation)に どんな値を渡すかを定義しておける。 • コンポーネントでは単に引数無しで実⾏するだけにできる • mapDispatchToPropsではActionのアグリゲート(おまとめ) ができる。 • ⼀つのユーザー操作に複数の別々の処理を紐づけたい時。「遷移する &⾳を鳴らす」とか。(どんなときだw) ※ 先程の「ログイン済みならコンテンツに遷移して、ログインしてない ならログイン画⾯に遷移」なんかは⼀連の⼿続きなのでOperationで書 いておく。
Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. ComponentとContainerをしっかり使う
• mergePropsを使う • mapDispatchToPropsではmapStateToPropsで得た値を知ることはで きない。 • stateの値もactionもコンポーネントに渡してセットで使う、をやりが ち • ユーザー操作によって引数に渡す値が変わらないのなら、mergeProps で「stateの値を引数に取るoperationを叩く関数」を作ってpropsとし て渡し、コンポーネントでは単に引数無しで実⾏するだけ、という形 にするとコンポーネントが知りすぎなくてよい。
Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. mergeProps使ってみた
Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. まとめ
• アプリケーションは複雑であることを認めて、向き合う。 • どこが複雑になるか、どこをシンプルにするかを意識する。 • Reducer, action, operation, selector, component, containerそ れぞれの責任を理解し、その範囲を超えすぎないことを気をつ ける。 • 開発中のエンジニアはすべてを知りすぎた状態なので、それぞ れの気持ちになってコーディングする。
Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. ありがとうございました!