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

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

1a679952cdf455ecd6a15cbde7ae80d5?s=128

Tomohiko Himura

January 08, 2017
Tweet

Transcript

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

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

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

  4. ೥຤ͷ࿩

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

  7. None
  8. > React + Material-UI <

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

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

  11. サイト作成に試し中

  12. 良い点 • 最近のフロントエンドに触れる機会になる • React • Webpack • ES2017 •

    Flow • リッチなUIが簡単につくれる (MUI) • コンポーネント単位で考えられる (React)
  13. 微妙な点 • 慣れてないので • やりたいことに時間がかかる (react MUI) • ドキュメントだけじゃわからない (MUI)

    • ソース読め • CSSフレームワークではない (MUI)
  14. CSSフレームワークではない <MuiThemeProvider> ɹ<div className="App"> <AppBar title="hogehoge" /> <Paper> <h1>hoge</h1> <p>hogehoge</p>

    </Paper> </div> </MuiThemeProvider>
  15. None
  16. 調整が必要

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

  18. ࡶஊ

  19. コンポーネント

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

  22. React Componentの作り方

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

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

  25. function Welcome(props) { return <h1>Hello, {props.name}</h1>; }

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

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

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

  29. 復習 高階関数

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

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

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

  33. None
  34. <AppBar title="hoghoge" />

  35. None
  36. const state = {title: "hogehoge"}; <AppBar {...state} />

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

  38. const state = {name: "hogehoge"}; <AppBar title={state.name} />

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

  40. 別の手段

  41. const MyBar = (props) => { return <AppBar title={props.name} />

    }; // ৽ͨͳίϯϙʔωϯτఆٛͯ͠͠·͍ͬͯΔ const state = {name: "hogehoge"}; <MyBar {...state} /> コンポーネント側を調整する
  42. 高階コンポーネントを使うと コンポーネントを定義する必要はない

  43. const HighOrderComponent = mapProps((props) => { ɹreturn {title: props.name}; });

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

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

    ͜ͱ͕Ͱ͖Δ
  46. なぜコンポーネントは重要か?

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

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