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.7k
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
520
Other Decks in Programming
See All in Programming
Javaに鉄道指向プログラミング (Railway Oriented Pro gramming) のエッセンスを取り入れる/Bringing the Essence of Railway-Oriented Programming to Java
cocet33000
2
580
deno-redisの紹介とJSRパッケージの運用について (toranoana.deno #21)
uki00a
0
120
ASP.NETアプリケーションのモダナイズ インフラ編
tomokusaba
1
380
Webからモバイルへ Vue.js × Capacitor 活用事例
naokihaba
0
730
ReadMoreTextView
fornewid
1
450
GraphRAGの仕組みまるわかり
tosuri13
7
440
実践ArchUnit ~実例による検証パターンの紹介~
ogiwarat
2
280
XSLTで作るBrainfuck処理系
makki_d
0
210
無関心の谷
kanayannet
0
180
関数型まつりレポート for JuliaTokai #22
antimon2
0
130
Using AI Tools Around Software Development
inouehi
0
1.2k
Effect の双対、Coeffect
yukikurage
5
1.4k
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
GitHub's CSS Performance
jonrohan
1031
460k
How GitHub (no longer) Works
holman
314
140k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
Git: the NoSQL Database
bkeepers
PRO
430
65k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Adopting Sorbet at Scale
ufuk
77
9.4k
Raft: Consensus for Rubyists
vanstee
140
7k
BBQ
matthewcrist
89
9.7k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
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. ありがとうございました!