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.4k
React/Reduxで 秩序あるコードを書く
Naoya Ishii
August 23, 2018
Tweet
Share
More Decks by Naoya Ishii
See All by Naoya Ishii
Yahoo! JAPANアプリ上で動くWebVIewサービス開発
naoishii
2
1.9k
JS/Reactを初心者に説明するときに困ったポイント
naoishii
3
450
Other Decks in Programming
See All in Programming
Goキャッシュライブラリgolang-lruをLet Read and Understand!!
taniyarn
2
190
ABEMA 画像配信基盤における Cloudflare Workers の活用
peaceiris
7
650
iOS 開発で便利なツールたち
mitsuharu
0
130
Kotlin Standard Library Gems
antonarhipov
1
140
ChecksでアプリコンプライアンスとAIの安全性をシンプルに - セッション紹介
takakitojo
0
180
良いテストコードのために悪いテストコードを理解する - 不安定なテスト編: iOSアプリ開発ユニットテストの場合
yimajo
10
3.7k
アプリケーションをリプレイスしたら チームとサービス運用に向き合えた
kazatohiei
1
220
Kotlin Collection関数をマスター
masayukisuda
0
2k
Spring Bootと行レベルセキュリティではじめるマルチテナントアーキテクチャ / Multi-tenant architecture using Row-Level Security
jaguar_imo
4
1.1k
Ruby の型に関する活動をやっている話 / Activities related to Ruby types
euglena1215
3
130
RubyKaigi First Effects 〜はじめてのRubyKaigi〜
satoseri
0
300
What's new in Firebase for building gen AI features気になったところ
mkeeda
0
180
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
It's Worth the Effort
3n
180
27k
The Power of CSS Pseudo Elements
geoffreycrofte
63
5.1k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
15
8.5k
Ruby is Unlike a Banana
tanoku
96
10k
10 Git Anti Patterns You Should be Aware of
lemiorhan
650
58k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
Building Flexible Design Systems
yeseniaperezcruz
321
37k
Git: the NoSQL Database
bkeepers
PRO
423
64k
Being A Developer After 40
akosma
68
580k
Happy Clients
brianwarren
93
6.5k
How To Stay Up To Date on Web Technology
chriscoyier
784
250k
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. ありがとうございました!