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
2. ͻΉΒ ͱ΋ͻ͜ ͳ͔ͥϑϩϯτΤϯυܥͰ༡ΜͰ͍Δ
3. 注意事項 特にオチがない可能性があります
4. ೥຤ͷ࿩
6. 内容に関係ない デモに時間をかけてしまった
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>
16. 調整が必要
17. まとめ • 既存ライブラリを活用して • リッチなUIが比較的簡単につくれる • とはいえ簡単ではない • サイト向けというよりアプリ向け
18. ࡶஊ
19. コンポーネント
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. コンポーネントは • コンビネータで合成 • 関数でコンポーネントを変換
34. 例
35. <AppBar title="hoghoge" />
37. const state = {title: "hogehoge"}; <AppBar {...state} />
38. もしstateのkeyが違ったら…?
39. const state = {name: "hogehoge"}; <AppBar title={state.name} />
40. nameからtitleの マッピングをする必要がある
41. 別の手段
42. const MyBar = (props) => { return <AppBar title={props.name} /> }; // ৽ͨͳίϯϙʔωϯτఆٛͯ͠͠·͍ͬͯΔ const state = {name: "hogehoge"}; <MyBar {...state} /> コンポーネント側を調整する
43. 高階コンポーネントを使うと コンポーネントを定義する必要はない
44. const HighOrderComponent = mapProps((props) => { ɹreturn {title: props.name}; }); // ίϯϙʔωϯτΛม׵͢ΔͨΊͷಓ۩ΛखʹೖΕͨ const MyBar = HighOrderComponent(AppBar); const state = {name: "hogehoge"}; <MyBar {...state} /> 高階コンポーネント
45. const MyBar = HighOrderComponent(AppBar); const MyBar2 = HighOrderComponent(AppBar2); const MyBar = (props) => { return <AppBar title={props.name} /> }; const MyBar2 = (props) => { return <AppBar2 title={props.name} /> };
46. なぜ関数プログラミングは重要か? http://www.sampou.org/ haskell/article/whyfp.html l
    ϞδϡϥϓϩάϥϛϯάΛࢧԉ͢Δʹ͸ɺݴޠ͸ྑ͍ ކΛ༻ҙ͠ͳ͚Ε͹ͳΒͳ͍ɻؔ਺ܕϓϩάϥϛϯά ݴޠ͸ೋͭͷ৽͍͠λΠϓͷކΛڙڅ͢Δɻ͢ͳΘͪɺ ߴ֊ؔ਺ͱ஗ԆධՁͰ͋Δɻ͜ΕΒͷކΛ༻͍ͯ৽͠ ͍Θ͘Θ͘͢ΔΑ͏ͳํ๏ͰϓϩάϥϜΛ؆୯ʹϞ δϡʔϧԽͰ͖ΔɻΑΓখ͘͞ɺΑΓ൚༻తͳϞδϡʔ ϧ͸ɺͦͷޙͷϓϩάϥϛϯάͰΑΓ޿͘࠶ར༻͢Δ ͜ͱ͕Ͱ͖Δ
47. なぜコンポーネントは重要か?
48. なぜReactが筋が良いのか?
49. まとめ • 高階コンポーネント楽しい