React + Material-UIで遊んだ感想と recomposeで遊んだ話

[LT駆動開発32](https://github.com/LTDD/Sessions/wiki/LT%E9%A7%86%E5%8B%95%E9%96%8B%E7%99%BA32)の発表資料。

高階コンポーネントの話をしました。

Transcript

1. React + Material-UIͰ
   ༡Μͩײ૝
   2017-01-08 LTۦಈ։ൃ32
   

   View Slide

2. ͻΉΒ ͱ΋ͻ͜
   ͳ͔ͥϑϩϯτΤϯυܥͰ༡ΜͰ͍Δ
   

   View Slide

3. 注意事項
   特にオチがない可能性があります
   

   View Slide

4. ೥຤ͷ࿩
   

   View Slide

5. View Slide

6. 内容に関係ない
   デモに時間をかけてしまった
   

   View Slide

7. View Slide

8. > React + Material-UI <
   

   View Slide

9. React
   https://facebook.github.io/react/
   • Viewライブラリ
   • 仮想DOM
   • コンポーネント指向
   • Learn Once, Write Anywhere
   

   View Slide

10. Material-UI
    http://www.material-ui.com/
    • Reactのコンポーネント集
    • Material Designを実装
    

    View Slide

11. サイト作成に試し中
    

    View Slide

12. 良い点
    • 最近のフロントエンドに触れる機会になる
    • React
    • Webpack
    • ES2017
    • Flow
    • リッチなUIが簡単につくれる (MUI)
    • コンポーネント単位で考えられる (React)
    

    View Slide

13. 微妙な点
    • 慣れてないので
    • やりたいことに時間がかかる (react MUI)
    • ドキュメントだけじゃわからない (MUI)
    • ソース読め
    • CSSフレームワークではない (MUI)
    

    View Slide

14. CSSフレームワークではない
    
    ɹ
    
    
    hoge
    hogehoge
    
    
    
    

    View Slide

15. View Slide

16. 調整が必要
    

    View Slide

17. まとめ
    • 既存ライブラリを活用して
    • リッチなUIが比較的簡単につくれる
    • とはいえ簡単ではない
    • サイト向けというよりアプリ向け
    

    View Slide

18. ࡶஊ
    

    View Slide

19. コンポーネント
    

    View Slide

20. View Slide

21. • 構成要素になる
    • 独立して働く
    

    View Slide

22. React Componentの作り方
    

    View Slide

23. class Welcome extends React.Component {
    render() {
    return Hello, {this.props.name};
    }
    }
    

    View Slide

24. Functional Component
    関数コンポーネント
    

    View Slide

25. function Welcome(props) {
    return Hello, {props.name};
    }
    

    View Slide

26. function Welcome(props) {
    return Hello, {props.name};
    }
    propsが引数から渡される
    this. が不要になる
    

    View Slide

27. High-Order Component
    高階コンポーネント
    

    View Slide

28. Component -> Component
    コンポーネントを受け取って
    コンポーネントを返す
    関数
    

    View Slide

29. 復習
    高階関数
    

    View Slide

30. Function -> Function
    関数を受け取って
    関数を返す
    関数
    

    View Slide

31. 高階コンポーネント
    少し制約のある高階関数 (?)
    

    View Slide

32. コンポーネントは
    • コンビネータで合成
    • 関数でコンポーネントを変換
    

    View Slide

33. View Slide

34. 例
    

    View Slide

35. 
    

    View Slide

36. View Slide

37. const state = {title: "hogehoge"};
    
    

    View Slide

38. もしstateのkeyが違ったら…?
    

    View Slide

39. const state = {name: "hogehoge"};
    
    

    View Slide

40. nameからtitleの
    マッピングをする必要がある
    

    View Slide

41. 別の手段
    

    View Slide

42. const MyBar = (props) => {
    return
    }; // ৽ͨͳίϯϙʔωϯτఆٛͯ͠͠·͍ͬͯΔ
    const state = {name: "hogehoge"};
    
    コンポーネント側を調整する
    

    View Slide

43. 高階コンポーネントを使うと
    コンポーネントを定義する必要はない
    

    View Slide

44. const HighOrderComponent = mapProps((props) => {
    ɹreturn {title: props.name};
    }); // ίϯϙʔωϯτΛม׵͢ΔͨΊͷಓ۩ΛखʹೖΕͨ
    const MyBar = HighOrderComponent(AppBar);
    const state = {name: "hogehoge"};
    
    高階コンポーネント
    

    View Slide

45. const MyBar = HighOrderComponent(AppBar);
    const MyBar2 = HighOrderComponent(AppBar2);
    const MyBar = (props) => {
    return
    };
    const MyBar2 = (props) => {
    return
    };
    

    View Slide

46. なぜ関数プログラミングは重要か?
    http://www.sampou.org/
    haskell/article/whyfp.html
    lϞδϡϥϓϩάϥϛϯάΛࢧԉ͢Δʹ͸ɺݴޠ͸ྑ͍
    ކΛ༻ҙ͠ͳ͚Ε͹ͳΒͳ͍ɻؔ਺ܕϓϩάϥϛϯά
    ݴޠ͸ೋͭͷ৽͍͠λΠϓͷކΛڙڅ͢Δɻ͢ͳΘͪɺ
    ߴ֊ؔ਺ͱ஗ԆධՁͰ͋Δɻ͜ΕΒͷކΛ༻͍ͯ৽͠
    ͍Θ͘Θ͘͢ΔΑ͏ͳํ๏ͰϓϩάϥϜΛ؆୯ʹϞ
    δϡʔϧԽͰ͖ΔɻΑΓখ͘͞ɺΑΓ൚༻తͳϞδϡʔ
    ϧ͸ɺͦͷޙͷϓϩάϥϛϯάͰΑΓ޿͘࠶ར༻͢Δ
    ͜ͱ͕Ͱ͖Δ
    

    View Slide

47. なぜコンポーネントは重要か?
    

    View Slide

48. なぜReactが筋が良いのか?
    

    View Slide

49. まとめ
    • 高階コンポーネント楽しい
    

    View Slide