React.js + Reduxで作るSPA

1. React.js + Reduxで作る
SPA
@saekis

2. @saekis
• 91年生まれ(25歳)
• Software engineer

3. SPAとは
“A single-page application (SPA) is a web application
that fits on a single web page providing a
more fluid user experience
similar to a desktop application”
出典: Wikipedia

4. 従来のweb
• ページ遷移の度にサーバへHTTPリクエスト
• その度にHTMLやassetsファイルをダウンロー
ド、そしてDOMの生成
• 必要に応じてajaxを使う
• 遅い

5. SPA
• ページ遷移の度にブラウザをリロードさせず、コンテンツとな
るDOMの更新のみ行う
• HTMLやassetsファイルのダウンロードは初回リクエスト時のみ
• 必要なデータをajaxで取得
• 速い
• ネイティブアプリ

6. React.js

8. リリースから3年

9. みなさん、React
書いてますか？

10. MVC

11. React.jsとは
• Facebook製
• UI描画のためのライブラリ
• Component -> VirtualDOM -> DOM

12. VirtualDOM??

13. VirtualDOM??
VirtualDOM Tree VirtualDOM Tree
DOM Tree
差分を計算
反映

14. VirtualDOM??
VirtualDOM Tree VirtualDOM Tree
差分を計算
反映
<div>hoge</div>
<div>foo</div>
<div>hoge</div>
<div>piyo</div>
<div>hoge</div>
<div>piyo</div>

15. VirtualDOM??
• 仮想DOMとして現在のDOMの状態を記憶
• レンダー前の仮想DOMと現在の仮想DOMの差
分を計算
• 差分のみDOMに反映

16. JSX

17. JSX
• HTMLタグっぽい何か
• JSのコードにHTMLっぽい定義をするための
言語

18. JSX
import React from 'react'
export default class CommentBox extends React.Component {
render() {
return (
<div className="commentBox">
Hello, world! I am a CommentBox.
</div>
)
}
}

19. JSX
import React from 'react'
export default class CommentBox extends React.Component {
render() {
return (
<div className="commentBox">
Hello, world! I am a CommentBox.
</div>
)
}
}

20. JSX
import React from 'react'
export default class CommentBox extends React.Component {
render() {
return (
<div className="commentBox">
Hello, world! I am a CommentBox.
</div>
)
}
}
var div = document.createElement("div");
div.className = 'commentBox';
div.innerHTML = "Hello, world! I am a CommentBox.";
変換

21. JSX
• ブラウザにJSとして解釈させるためにはコンパイルが必要
• JSX -> browserify, babelify -> JS
• browzerifyはブラウザ上でもNode.jsのモジュールを使える
ようにするために使う
• babelifyはES6->ES5の変換、JSX->JSの変換をするために
使う

22. JSX -> JS
import gulp from 'gulp'
import browserify from 'browserify'
import babelify from 'babelify'
import source from 'vinyl-source-stream'
import duration from 'gulp-duration'
gulp.task('browserify', () => {
return browserify({entries: [“./react/app.js“]})
.transform(babelify, {presets: ["es2015", "react"], plugins: ["babel-plugin-transform-object-
assign"]})
.bundle()
.pipe(source('bundle.js'))
.pipe(gulp.dest(config.dest + '/react'))
.pipe(duration('browserify'))
})

23. Redux

25. Redux
• Fluxアーキテクチャに基づいて設計された
Javascriptフレームワーク
• FacebookもFluxフレームワークの中では
Reduxを使うことを推奨している（たぶん）

26. Flux?

27. Flux?

28. Flux?
• アーキテクチャ(設計思想)
• データは必ず一方向にしか流れないように設
計される
• Action -> Dispatcher -> Store -> View ->
Action -> …

29. Redux
• Fluxアーキテクチャに基づいて設計された
Javascriptフレームワーク

30. Redux

31. React + Reduxで
SPAをつくる

32. SPAをつくる
• Reactコンポーネント
• route定義
• reducer
• Redux state -> React prop

33. route定義
import { Provider } from 'react-redux'
import { Router, Route, IndexRoute, browserHistory } from 'react-router'
<Provider store={store}>
<Router history={history}>
<Route path="/hoge" component={Index} >
<Route path="foo" component={FooContainer}></Route>
<Route path="piyo" component={PiyoContainer} ></Route>
</Route>
</Router>
</Provider>

34. react-redux
• Reduxの”state”とReactの”prop”をつなぐ
• 明示的に書かなくても、stateの更新を
componentがsubscribeしてくれる

35. react-redux
import { connect } from ‘react-redux'
import hogeComponent from '../components/hoge'
function mapStateToProps(state) {
return { user: state.user }
}
function mapDispatchToProps(dispatch) {
return {
hoge: () => { dispatch(hoge()) },
foo: () => { dispatch(foo()) }
}
}
export default connect(mapStateToProps, mapDispatchToProps)(hogeComponent)

36. 実務で使ってみた感想

37. 実務で使ってみた感想
• テストがしやすい
• Reduxのコード量がとにかく多くなる感じ
• 特にaction createrの肥大化

38. ご清聴ありがとう
ございました