$30 off During Our Annual Pro Sale. View Details »

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

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)の発表資料

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

Tomohiko Himura

January 08, 2017
Tweet

More Decks by Tomohiko Himura

Other Decks in Programming

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