ReactのHigher-order Componentsの利用方法

1. ReactのHigher-order Componentsの利用方法 Tsuyoshi Numano @Lancers　2016/12/15
2. 自己紹介
3. 沼野剛志 1990年生まれ 出身高専　 ：神戸高専専攻科（~2012） 出身大学院 ：JAIST（~2014） 現在はランサーズ株式会社でフロントエンドエンジニアとして 働いています。主にReact.jsを利用。 自己紹介
4. ランサーズ株式会社について
5. React.js のプロダクト：メッセージ画面
6. React.js のプロダクト：プロジェクト管理画面
7. ランサーズのフロント周りで利用している技術 ランサーズ流 React.js/redux アプリ開発入門 リポジトリ公開してます！
8. 今日お話しする内容(主にHOCについて話します) - HOC(Higher-order-compoents)の基礎 - 実際に利用されているライブラリについて - 弊社での利用実例 - まとめ
9. HOCの基礎
10. A higher-order component is just a function that takes an existing component and returns another component that wraps it. (引用: Mixins Are Dead. Long Live Composition) - コンポーネントを引数にして、カスタマイズしたコンポーネントを返す関数のこ と - 既存のコンポーネントに新しい機能を追加することが可能 HOC とは何か？ HOCの基礎
11. HOC の基礎 sebmarkbage/Enhance.js の gist の例（HOCの古典） HOCの基礎
12. 要点を抜き出すと 1. 関数がコンポーネントを引数にとって 3. 引数にとったコンポーネントに 　合成してreurn. 　(data という props を加えて返す) 2. 何か処理を行って。 （ここでは、stateに data: ‘Hello’ を代入） HOCの基礎
13. HOC の基礎：利用する側の実装 HOCの基礎
14. 要点を抜き出すと 1. 先ほどの関数の引数に、コンポーネントを指定する 2. Enhance.js から渡した data が利用できる HOCの基礎
15. コンポーネントに機能を加えて、 新たなコンポーネントを返す関数 Enhancer MyComponent return Enhance(MyComponent) Reactのコンポーネントが引数 合成されたコンポーネント (Higher-Order Components) data data HOC の基礎 イメージ図 HOCの基礎
16. 実際に利用されている ライブラリについて
17. • react-redux • connect() • material-ui (material design を react のコンポーネントで利用できるライブラリ) • muiThemeable() • redux-form (フォームの処理を　react-redux のフローに乗せてくれるライブラリ) • reduxForm() • react-router（react のコンポーネント単位でルーティングを行えるライブラリ） • withRouter() • radium (cssの擬似セレクタをインラインで扱うライブラリ) • enhanceWithRadium() 最近よく見かける HOC を利用しているライブラリとその実装 ライブラリについて
18. material-ui での例 Material Design を react の component で利用出来るライブラリ ライブラリについて
19. material-ui / themes - テーマの色設定などは、muiTheme　という形で1つのファイルで管理している - textColor などの定義を、自作のコンポーネントでも使いたい場合・・・ material-ui での例 ライブラリについて
20. - muiThemeable()()という HOC を呼び出して、独自のコンポーネントに適応 - MyComponent というコンポーネントに、muiThemeable を適応している 1.関数の引数に、コンポーネントを指定する 2. textColor が呼び出せるようになった material-ui での例 ライブラリについて
21. muiThemeable.jsの中身を簡略化したもの ライブラリについて material-ui での例
22. muiThemeable.jsの中身を簡略化したもの 1.関数が、引数にコンポーネントをとって 3.引数にとったコンポーネントに合成して返す 2. 何らかの処理を加えて ライブラリについて material-ui での例
23. ReduxForm での例 フォームなどを redux のフローで扱えるライブラリ ライブラリについて
24. ReduxForm での例 ライブラリについて
25. ReduxForm での例 1.関数の引数に、コンポーネントを指定する 2. reduxのフローで操作可能になる ライブラリについて
26. reduxForm.js の中身を簡略化したもの ライブラリについて
27. reduxForm.js の中身を簡略化したもの 1.関数が、引数にコンポーネントをとって 3.引数にとったコンポーネントに合成して返す 2. 何らかの処理を加えて ライブラリについて
28. ここまでのまとめ１ React関連のライブラリを使っていて というような、コンポーネントを引数に取る構成の記述を見かけた場合はHOC の実装を使っているのではないかと考えると理解しやすい。 ライブラリについて
29. ここまでのまとめ２ 1. 関数がコンポーネントを引数にとって 2. 何らかの処理を加えて a. 新しい props の注入 b. 共通のライフサイクル処理 3. 引数にとったコンポーネントに合成して返す 案外、 HOC の実装はパッと見で複雑でも、元のコンポーネントに新しく props を注入したりしているだけかもしれません。 ライブラリについて
30. 弊社での利用実例
31. HOC の 2 つのパターン React Higher Order Components in depthの記事によると、HOC には２つの パターンがあります 1. 先ほどまでの props を新しく追加する例は Props Proxy 2. PropsProxy 以外には Inheritance Inversion (逆継承) 実際の実装を見ながら順に説明していきます 弊社での利用実例
32. HOC の具体的な実装例１ ボタンのバリエーションを HOC で表現する 以下のようなボタンを作りたい時 弊社での利用実例
33. HOC の具体的な実装例１：HOCを作成 - createPrimaryButton という関数で、HOCを作成 - material-ui の RaisedButton コンポーネントを拡張 弊社での利用実例
34. HOC の具体的な実装例１：HOCを作成 - createPrimaryButton という関数で、HOCを作成 - material-ui の RaisedButton コンポーネントを拡張 1.引数にコンポーネントをとる関数を作る 2.処理を加えて、引数にとったコンポーネントに合成して返す 3. コンポーネントを引数に、ボタンを作成 弊社での利用実例
35. HOC の具体的な実装例１： 呼び出す側 - PrimaryButton という名前で呼び出せる - material-ui の label などのプロパティがそのまま利用できる 弊社での利用実例
36. HOC の具体的な実装例１ - createButton に引数をつけて、バリエーションを増やす - color, size, shape をそれぞれ追加 弊社での利用実例
37. HOC の具体的な実装例１ - createButton に引数をつけて、バリエーションを増やす - color, size, shape をそれぞれ追加 弊社での利用実例 1.引数に変数を加える 2.引数から、一意の名前のコンポーネントを作成する
38. HOC の具体的な実装例１ - PrimaryButtonFullWidthなど、限定的な名前を持たせることで、コードが リーダブルになる 弊社での利用実例
39. HOC の具体的な実装例１（補足） - FlowTypeなどで型を持たせると、さらにリーダブルになる 弊社での利用実例
40. HOC の具体的な実装例２ - 閲覧するのにログインが必要なコンポーネントをHOCで制御 - Reduxで、 session.userId でログインユーザを管理してる前提 - loggedInRequired() という HOC を作る 弊社での利用実例
41. HOC の具体的な実装例２ - ログインが必要な箇所は、HOCでラップしてあげる - 「ログインしていません」のようなダイアログを出したい 弊社での利用実例
42. HOC の具体的な実装例２ 弊社での利用実例
43. HOC の具体的な実装例２ 1.関数が、コンポーネントを引数にとって 2.引数にとったコンポーネントをextends して 3. render をハイジャック 4. extends したコンポーネントを返す 弊社での利用実例
44. HOC の具体的な実装例２ で行っていること ラップしたコンポーネント自身を extends している。(Inheritance inversion) - HOCのライフサイクルメソッドを、ラップしたコンポーネントに適応 - HOCから、ラップしたコンポーネントの state や props に thisでアクセス - 条件によって、レンダリングしないように、 render をハイジャックできる ログインが必要なコンポーネントは、このHOCを利用すれば良いため、他のコンポーネ ント内にif文などを書かなくて良くなり、コンポーネント自身の責務に集中出来る。 弊社での利用実例
45. 複数のHOCを合成して使うテクニック - コンポーネントを複数のHOCでラップしたい場合 - loggedInRequired(connect(mapStateToProps, mapDispatchToProps)(ProfileForm)) と書くのか？ - redux の compose や lodash.js の _.compose を利用 弊社での利用実例
46. まとめ
47. まとめ - HOC　はコンポーネントを引数にして、カスタマイズしたコンポーネントを返 す関数のこと - material-ui や redux-form など、様々なライブラリで利用されている - 組み合わせることで、既存のコンポーネントに新しい機能を追加することが 可能 - アプリケーション内で共通に利用する機能や、パーツをまとめるのに便利 - 慣れればコードを読みやすくかける
48. https://www.wantedly.com/projects/74679
49. Thank you !