Slide 1
Slide 1 text
React + Material-UIͰ
༡Μͩײ
2017-01-08 LTۦಈ։ൃ32
Slide 2
Slide 2 text
ͻΉΒ ͱͻ͜
ͳ͔ͥϑϩϯτΤϯυܥͰ༡ΜͰ͍Δ
Slide 3
Slide 3 text
注意事項
特にオチがない可能性があります
Slide 4
Slide 4 text
ͷ
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
内容に関係ない
デモに時間をかけてしまった
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
> React + Material-UI <
Slide 9
Slide 9 text
React
https://facebook.github.io/react/
• Viewライブラリ
• 仮想DOM
• コンポーネント指向
• Learn Once, Write Anywhere
Slide 10
Slide 10 text
Material-UI
http://www.material-ui.com/
• Reactのコンポーネント集
• Material Designを実装
Slide 11
Slide 11 text
サイト作成に試し中
Slide 12
Slide 12 text
良い点
• 最近のフロントエンドに触れる機会になる
• React
• Webpack
• ES2017
• Flow
• リッチなUIが簡単につくれる (MUI)
• コンポーネント単位で考えられる (React)
Slide 13
Slide 13 text
微妙な点
• 慣れてないので
• やりたいことに時間がかかる (react MUI)
• ドキュメントだけじゃわからない (MUI)
• ソース読め
• CSSフレームワークではない (MUI)
Slide 14
Slide 14 text
CSSフレームワークではない
ɹ
hoge
hogehoge
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
調整が必要
Slide 17
Slide 17 text
まとめ
• 既存ライブラリを活用して
• リッチなUIが比較的簡単につくれる
• とはいえ簡単ではない
• サイト向けというよりアプリ向け
Slide 18
Slide 18 text
ࡶஊ
Slide 19
Slide 19 text
コンポーネント
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
• 構成要素になる
• 独立して働く
Slide 22
Slide 22 text
React Componentの作り方
Slide 23
Slide 23 text
class Welcome extends React.Component {
render() {
return
Hello, {this.props.name}
; } }Slide 24
Slide 24 text
Functional Component
関数コンポーネント
Slide 25
Slide 25 text
function Welcome(props) {
return
Hello, {props.name}
; }Slide 26
Slide 26 text
function Welcome(props) {
return
Hello, {props.name}
; } propsが引数から渡される this. が不要になるSlide 27
Slide 27 text
High-Order Component
高階コンポーネント
Slide 28
Slide 28 text
Component -> Component
コンポーネントを受け取って
コンポーネントを返す
関数
Slide 29
Slide 29 text
復習
高階関数
Slide 30
Slide 30 text
Function -> Function
関数を受け取って
関数を返す
関数
Slide 31
Slide 31 text
高階コンポーネント
少し制約のある高階関数 (?)
Slide 32
Slide 32 text
コンポーネントは
• コンビネータで合成
• 関数でコンポーネントを変換
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
例
Slide 35
Slide 35 text
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
const state = {title: "hogehoge"};
Slide 38
Slide 38 text
もしstateのkeyが違ったら…?
Slide 39
Slide 39 text
const state = {name: "hogehoge"};
Slide 40
Slide 40 text
nameからtitleの
マッピングをする必要がある
Slide 41
Slide 41 text
別の手段
Slide 42
Slide 42 text
const MyBar = (props) => {
return
}; // ৽ͨͳίϯϙʔωϯτఆٛͯ͠͠·͍ͬͯΔ
const state = {name: "hogehoge"};
コンポーネント側を調整する
Slide 43
Slide 43 text
高階コンポーネントを使うと
コンポーネントを定義する必要はない
Slide 44
Slide 44 text
const HighOrderComponent = mapProps((props) => {
ɹreturn {title: props.name};
}); // ίϯϙʔωϯτΛม͢ΔͨΊͷಓ۩ΛखʹೖΕͨ
const MyBar = HighOrderComponent(AppBar);
const state = {name: "hogehoge"};
高階コンポーネント
Slide 45
Slide 45 text
const MyBar = HighOrderComponent(AppBar);
const MyBar2 = HighOrderComponent(AppBar2);
const MyBar = (props) => {
return
};
const MyBar2 = (props) => {
return
};
Slide 46
Slide 46 text
なぜ関数プログラミングは重要か?
http://www.sampou.org/
haskell/article/whyfp.html
lϞδϡϥϓϩάϥϛϯάΛࢧԉ͢Δʹɺݴޠྑ͍
ކΛ༻ҙ͠ͳ͚ΕͳΒͳ͍ɻؔܕϓϩάϥϛϯά
ݴޠೋͭͷ৽͍͠λΠϓͷކΛڙڅ͢Δɻ͢ͳΘͪɺ
ߴ֊ؔͱԆධՁͰ͋Δɻ͜ΕΒͷކΛ༻͍ͯ৽͠
͍Θ͘Θ͘͢ΔΑ͏ͳํ๏ͰϓϩάϥϜΛ؆୯ʹϞ
δϡʔϧԽͰ͖ΔɻΑΓখ͘͞ɺΑΓ൚༻తͳϞδϡʔ
ϧɺͦͷޙͷϓϩάϥϛϯάͰΑΓ͘࠶ར༻͢Δ
͜ͱ͕Ͱ͖Δ
Slide 47
Slide 47 text
なぜコンポーネントは重要か?
Slide 48
Slide 48 text
なぜReactが筋が良いのか?
Slide 49
Slide 49 text
まとめ
• 高階コンポーネント楽しい