Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Dive into React.js
Search
koba04
February 15, 2015
Programming
10
3.4k
Dive into React.js
歌舞伎座.tech#6「VirtualDOMとReact」での発表資料です。
http://kbkz.connpass.com/event/11254/
koba04
February 15, 2015
Tweet
Share
More Decks by koba04
See All by koba04
フロントエンドの現在地とこれから
koba04
10
5.3k
Standing on the shoulders of giants
koba04
0
2.9k
React/Next によるアプリケーション開発のこれから
koba04
61
17k
フロントエンド刷新をプロジェクトとして進める際に気をつけていること
koba04
3
1.9k
How useEvent would change our applications
koba04
1
3.1k
kintoneフロントエンド刷新によるモノリスからの脱却とその先に目指す未来
koba04
3
15k
Make it Declarative with React
koba04
0
1.8k
Ready for React in 2019
koba04
2
1.7k
Algorithms in React
koba04
14
17k
Other Decks in Programming
See All in Programming
開発生産性を上げるための生成AI活用術
starfish719
3
1.1k
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
140
株式会社 Sun terras カンパニーデック
sunterras
0
320
PHPに関数型の魂を宿す〜PHP 8.5 で実現する堅牢なコードとは〜 #phpcon_hiroshima / phpcon-hiroshima-2025
shogogg
1
230
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
940
そのpreloadは必要?見過ごされたpreloadが技術的負債として爆発した日
mugitti9
2
3.4k
Go Conference 2025: Goで体感するMultipath TCP ― Go 1.24 時代の MPTCP Listener を理解する
takehaya
9
1.7k
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
natmark
2
510
いま中途半端なSwift 6対応をするより、Default ActorやApproachable Concurrencyを有効にしてからでいいんじゃない?
yimajo
2
430
Six and a half ridiculous things to do with Quarkus
hollycummins
0
170
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
190
Serena MCPのすすめ
wadakatu
4
1k
Featured
See All Featured
Measuring & Analyzing Core Web Vitals
bluesmoon
9
620
Build your cross-platform service in a week with App Engine
jlugia
232
18k
Writing Fast Ruby
sferik
629
62k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Context Engineering - Making Every Token Count
addyosmani
6
250
Building Flexible Design Systems
yeseniaperezcruz
329
39k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Embracing the Ebb and Flow
colly
88
4.8k
Designing for Performance
lara
610
69k
Side Projects
sachag
455
43k
Building an army of robots
kneath
306
46k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
Transcript
%JWFJOUP3FBDUKT Վب࠲UFDI !LPCB
!LPCB w 8FC"QQMJDBUJPO&OHJOFFS w IUUQLPCBDPN
None
3FBDUKT
http://facebook.github.io/react/
3FBDUKTFWFSZXIFSF
https://www.facebook.com/
http://instagram.com/
http://instagram.com/
https://speakerdeck.com/mridgway/isomorphic-flux
None
http://facebook.github.io/react/docs/videos.html
https://developer.atlassian.com/blog/2015/02/rebuilding-hipchat-with-react/
https://vivaldi.com/
http://techblog.netflix.com/2015/01/netflix-likes-react.html
3FBDUXPSLTXJUIPVUUIF%0. https://github.com/reactjs/react-art/blob/master/src/ReactART.js
http://engineering.flipboard.com/2015/02/mobile-web/
None
$PNQPOFOU
$PNQPOFOU w $PNQPOFOUΛ࡞ͬͯ͏ɻશͯ$PNQPOFOU୯ҐͰߟ͑Δɻ w EJW3FBDUKT͕ఆ͍ٛͯ͠Δ$PNQPOFOUɻ var Hello = React.createClass({ render()
{ return <div>Hello {this.props.name}</div>; } }); React.render(<Hello name=“kbkz” />, document.body); // <div>Hello kbkz</div>
&4$MBTT WCFUB class Hello extends React.Component { render() { return
<div>Hello {this.props.name}</div>; } } React.render(<Hello name=“kbkz” />, document.body); // <div>Hello kbkz</div>
$PNQPOFOU &MFNFOU ReactComponentClass = React.createClass({ render(){} }); ReactCompositeComponent = React.render(<ReactComponentClass
/>, document); ReactCompositeComponent.setState({}); ReactDOMComponent = React.render(<div />, document); ReactDOMComponent.setState({}); // Uncaught TypeError: undefined is not a function ReactElement = React.createElement(ReactComponentClass, null); // ReactElement has type, props(children), key, ref.
1SPQBOE4UBUF
1SPQJTJNNVUBCMF w 1SPQ$PNQPOFOU͕֎෦͔Βड͚͚ΔͰมߋෆՄɻ w 1SPQͷσʔλॴ༗͍ͯ͠ͳ͍σʔλɻ w )BOEMFSΛड͚͚ΔΑ͏ʹͯ͠ʹॲཧΛҕৡͨ͠Γɻ var Foods =
React.createClass({ render() { var foods = [‘sushi’, ‘ramen’, ‘pizza’].map( food => { return <Food name={food} /> }); return <div>{foods}</div>; } var Food = React.createClass({ render() { return <ul><li>{this.props.name}</li></ul> } }); ͜ͷσʔλ Foodsͷͷ
1SPQJTB4QFD w ֎෦ͱͷ*'༷ͱͳΔɻ w 1SPQ5ZQFTͰ໌֬ʹఆٛ͢Δɻ var Food = React.createClass({ propTypes:
{ name: React.PropTypes.string.isRequired }, render() { return <ul><li>{this.props.name}</li></ul> } }); จࣈྻͰඞਢ
1SPQ5ZQFT React.PropTypes.array // ྻ React.PropTypes.bool.isRequired // BooleanͰඞਢ React.PropTypes.func //
ؔ React.PropTypes.number // React.PropTypes.object // ΦϒδΣΫτ React.PropTypes.string // จࣈྻ React.PropTypes.node // RenderͰ͖Δͷ React.PropTypes.element.isRequired // React ElementͰඞਢ React.PropTypes.instanceOf(XXX) // XXXͷinstance͔Ͳ͏͔
1SPQ5ZQFT React.PropTypes.oneOf(['foo', 'bar']) // foo͔bar React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.array]) // จࣈྻ͔ྻ
React.PropTypes.arrayOf(React.PropTypes.string) // จࣈྻͷྻ͔Ͳ͏͔ React.PropTypes.objectOf(React.PropTypes.string) // จࣈྻͷΛ͍࣋ͬͯΔ͔ React.PropTypes.shape({ // ࢦఆ͞ΕͨܗࣜΛຬ͍ͨͯ͠Δ͔ color: React.PropTypes.string, fontSize: React.PropTypes.number }); React.PropTypes.any.isRequired // ͳΜͰ͍͍͚Ͳඞਢ // ΧελϜͷ੍ఆٛग़དྷΔ(μϝͳ߹Error͛Δ) customPropType: function(props, propName, componentName) { if (!/^[0-9]/.test(props[propName])) { return new Error('Validation failed!'); } }
4UBUFJTNVUBCMF w 4UBUFͦͷ$PNQPOFOU͕ঢ়ଶΛཧ͢Δɻ w TUBUFࣗମJNNVUBCMFͱͯ͠ѻ͍ඞͣTFU4UBUFͰߋ৽͢Δɻ var Counter = React.createClass({ getInitialState()
{ return { count: 0 }; }, onClick() { this.setState({ count: this.state.count + 1}); }, render() { return ( <div> <span>{this.state.count}</span> <button onClick={this.onClick}>click</button> </div> ); } });
1SFEJDUBCMF
0XOFSTIJQ w $PNQPOFOUؒͷࢠؔΛҙࣝ͢Δɻ Image Image Food Food Foods setState({ foods:
[ { name: “sushi”, img: “sushi.png” }, { name: “ramen”, img: “ramen.png”} ] }); <Food food={foods[1]} /> <Food food={foods[0]} /> <Image src=“ramen.png” /> <Image src=“sushi.png” /
3FVTFBCMF w $PNQPOFOUͷׂΛҙࣝ͢Δɻ Image Image Food Food Foods click! onClick()
{ this.props.onImageClick(); } onImageClick() { this.props.onFoodClick(this.props.food); }; onFoodClick(food) { : this.setState({ foods: newFoods }); };
3FSFOEFSUIFFOUJSFBQQ w 3FBDUKT͕%0.ͷࠩߋ৽Λͬͯ͘ΕΔͷͰɺΞϓϦͷσʔ λΛ·ͱΊ͓͍ͯ࣋ͬͯͯTFU4UBUFͰߋ৽͢ΔΑ͏ͳࡶͳΞʔ ΩςΫνϟՄೳʹͳΔɻ
7JSUVBM%0.JTJOGSBTUSVDUVSF w 7JSUVBM%0.ͷ࣮͍ͭͯ͏ଆؾʹ͢Δඞཁͳ͍ɻ w Ϧετʹର͢ΔLFZͷࢦఆ͘Β͍ɻ w ܭࢉྔΛݮΒͨ͢Ίʹ৭ʑͱͯͨ͠Γ͢Δɻ w ಉ֊ɺ$PNQPOFOUಉ࢜Ͱͷൺֱʜ w
IUUQDBMFOEBSQFSGQMBOFUDPNEJ⒎ render() { var li = this.state.items.map((item) => <li key={item.id}>{item.name}</li> ); return <ul>{li}</ul>; }
-JGFDZDMF
$PNQPOFOUMJGFDZDMF w .PVOUJOH w DPNQPOFOU8JMM.PVOU DPNQPOFOU%JE.PVOU w 6QEBUJOH w
DPNQPOFOU8JMM3FDFJWF1SPQT TIPVME$PNQPOFOU6QEBUF DPNQPOFOU8JMM6QEBUF DPNQPOFOU%JE6QEBUF w 6ONPVOUJOH w DPNQPOFOU8JMM6ONPVOU
+49
+49 w +VTUTZOUBYTVHBSPG3FBDUDSFBUF&MFNFOU w +49JTPQUJPOBM w 4FQBSBUJPOPGDPODFSOT 㱠UFDIOPMPHJFT w
4QSFBE"UUSJCVUFT <div className=“container”>{this.props.name}</div> ! React.createElement("div", {className: "container"}, this.props.name); <User {...this.props} type=“user”} />
SFBDUUPPMT w KTYίϚϯυมϥΠϒϥϦ͕ೖ͍ͬͯΔɻ w CSPXTFSJGZͷUSBOTGPSNͰ͋ΔSFBDUJGZɺXFCQBDLͷMPBEFS Ͱ͋ΔKTYMPBEFSͰΘΕ͍ͯΔɻ w IBSNPOZPQUJPOΛ༗ޮʹ͢Δ͜ͱͰҰ෦ͷ&4 GFBUVSFΛ ͏͜ͱ͕ग़དྷΔɻ
#BCFM UP w #BCFMࣗମ͕+49Λαϙʔτ͍ͯ͠ΔͷͰ#BCFM͚ͩͰSFBDU UPPMT͏ඞཁ͕ͳ͍ɻ w IUUQCMPHLPCBDPNQPTUB DPNCJOBUJPOPGSFBDUKTBOEUP w CSPXTFSJGZ
CBCFMJGZɺXFCQBDL CBCFMMPBEFS͚ͩͰ 0,ɻ w +49ͷQBSTFSʹ33FWFSTFSBDPSOKTYΛ͍ͬͯΔɻ
#SPXTFSFOWJSPONFOU
SFGHFU%0./PEF w SFG$PNQPOFOUʹର͢ΔࢀরΛऔಘ͢ΔͨΊͷ1SPQɻ w HFU%0./PEFͱΈ߹Θͤͯ͏ͷ͘Β͍ʹʜɻ w HFU%0./PEF%0.ͷࢀরΛऔಘ͢ΔͨΊͷ"1*ɻ w W͔Β3FBDUpOE%0./PEFʹɻ onComponentDidMount()
{ this.refs.input.getDOMNode().focus(); }, render() { return <input type=“text” ref=“input” />; }
EBOHFSPVTMZ4FU*OOFS)5.- w )5.-Λͦͷ··͍ͨ͠ͱ͖ʹ͏ɻ w ҙͯ͠͏͜ͱΛڧௐͨ͠*'ɻ w ໊લมΘΔ͔ɻ *TTVFͰٞத w
IUUQTHJUIVCDPNGBDFCPPLSFBDUJTTVFT createMarkup(data) { return { __html: someEncodeAPI(data) }; }, render() { return <div dangerouslySetInnerHTML={this.createMarkup(data)} /> }
4ZOUIFUJD&WFOU w ࣮ࡍʹ&WFOU-JTUFOFSΛొ͍ͯ͠ΔͷSPPUͷཁૉʹ͚ͩͰɺ σϦήʔτʹΑ֤ͬͯ$PNQPOFOUͷΠϕϯτͱͯ͠Ϛοϐϯά ͍ͯ͠Δɻ onChange(e) { this.setState({ text: e.target.value
}); } onClick(e) { e.preventDefault(); } render() { return ( <div> <input type=“text” onChange={this.onChange} />; <a onClick={this.onClick}>no longer</a> </div> ); } Autobinding Not support in Class syntax
)PXUPUFTU
)PXUPUFTU w 3FBDUBEEPOT5FTU6UJMTSFOEFS*OUP%PDVNFOUͰ%0.ʹՃ ͯ͠ॻ͍͍ͯ͘ײ͡ɻ describe("handleSubmit", () => { let inputArtist,
preventDefault; beforeEach(() => { inputArtist = React.addons.TestUtils.renderIntoDocument(<InputArtist />); preventDefault = jest.genMockFunction(); inputArtist.setState({ inputArtist: 'travis' }); React.addons.TestUtils.Simulate.submit(inputArtist.getDOMNode(), { preventDefault: preventDefault }); }); it ("calls fetchByArtist with state.inputArtist", () => { expect(AppTracksActionCreators.fetchByArtist).toBeCalled(); expect(AppTracksActionCreators.fetchByArtist).toBeCalledWith('travis'); }); it ("calls e.preventDefault", () => { expect(preventDefault).toBeCalled(); });
3PVUJOH
SBDLUSFBDUSPVUFS w $PNQPOFOUͰϧʔςΟϯάΛఆ͍ٛͯ͘͠ɻ w TFSWFSTJEFSFOEFSJOHωετͨ͠ϧʔςΟϯάͳͲʹର Ԡ͍ͯͯ͠ଟػೳɻ var routes = (
<Route name="top" handler={App} path="/"> <Route name="artist" handler={Artist} /> <Route name="country" handler={Country} /> <DefaultRoute handler={Top} /> </Route> ); Router.run(routes, Router.HistoryLocation, (Handler) => { React.render(<Handler />, document); });
4FSWFSTJEFSFOEFSJOH
4FSWFSTJEFSFOEFSJOH w 3FBDUKTͰɺ$PNQPOFOUͷঢ়ଶΛΦϒδΣΫτͱͯ࣋ͬ͠ ͍ͯͯڥʹΑΒͣ)5.-ͱͯ͠ు͖ग़͢͜ͱ͕ग़དྷΔɻ w 4&0ɺJOJUJBMMPBEͷͨΊʹɻ w TFSWFSଆͰͷ+49ͷύʔεOPEFKTYΛͬͨΓUP UP OPEFDPNNBOE
ΛͬͨΓɻ w 4UPSFͷσʔλΛ4FSWFSͱ#SPXTFSͰڞ༗͢Δɻ
)PXUPJNQMFNFOU w SFOEFS5P4USJOH w ϑϩϯτଆͰ3FBDUKTΛ͍͍ͨ߹ʹ͏ɻEBUB SFBDUJEͳͲ͕Ճ͞Εͨ)5.-͕ੜ͞ΕΔɻ w ϝΠϯͬͪ͜ɻ w SFOEFS5P4UBUJD.BSLVQ
w EBUBSFBDUJEͳͲ͕͍ͯͳ͍୯७ͳ)5.-Λฦ͢ͷͰ੩త ͳϖʔδΛੜ͍ͨ͠߹ʹ͏ɻ
3FBDUSFOEFS5P4USJOH server HTTP Request data-reactid, data-react-checksum&ॳظσʔλ ͖ͷHTML React.renderͰੜͨ͠HTMLͱserver͔Βͷdata-react-checksumΛൺֱ React.render Ұக͢ΕEventListenerΛઃఆ͢Δ͚ͩͰɺ͠ͳ͍߹React.renderͰ
ੜͨ͠HTMLΛinnerHTML্ͯ͠ॻ͖ͯ͠DOMΛ࠶ߏங͢Δ
'MVY
'MVYJTBBSDIJUFDUVSF https://github.com/facebook/flux
'MVYJTBBSDIJUFDUVSF w GBDFCPPLqVYʹEJTQBUDIFS͔͠ͳ͍ɻ w ͦͷଞ4UPSF͕&WFOU&NJUUFSܧঝͯ͠Δ͘Β͍ɻ w ΑΓগͳ͍ίʔυͰॻ͖ͨ͘͢͠ΓɺTFSWFSTJEFSFOEFSJOH ʹରԠ͢ΔͨΊʹɺ৭ʑͳ'MVY࣮͕ཚཱ͍ͯ͠Δɻ w IUUQTHJUIVCDPNWPSPOJBOTLJqVYDPNQBSJTPO
w TFOTJUJWFͳ෦3FBDUKT͕໘Λݟͯ͘ΕΔͷͰɺ'MVYͰΞ ϓϦέʔγϣϯͷॲཧͷྲྀΕΛ୯७ʹɻ
%JTQBUDIFS import {Dispatcher} = from ‘flux’; import assign = from
‘object-assign’; import AppConstants = from ‘../constants/AppConstants’; ; let PayloadSources = AppConstants.PayloadSources; export default assign(new Dispatcher(), { handleViewAction: function(action) { this.dispatch({ source: PayloadSources.VIEW_ACTION, action: action }); } });
4UPSF let tracks = []; let TrackStore = assign({}, EventEmitter.prototype,
{ emitChange: function() { this.emit(CHANGE_EVENT); }, addChangeListener: function(callback) { this.on(CHANGE_EVENT, callback); }, removeChangeListener: function(callback) { this.removeListener(CHANGE_EVENT, callback); }, getAll: function() { return tracks; }, }); TrackStore.dispatchToken = AppDispatcher.register(function(payload) { let action = payload.action; switch (action.type) { case ActionTypes.RECEIVE_TRACKS_BY_ARTIST: tracks = action.tracks; TrackStore.emitChange(); break;
"DUJPO$SFBUPST export default { fetchByArtist: function(artist) { request.get( `url${encodeURIComponent(artist)}`, (res)
=> { AppDispatcher.handleViewAction({ type: ActionTypes.RECEIVE_TRACKS_BY_ARTIST, tracks: res.body.toptracks.track }); } ); }, }
7JFX export default React.createClass({ getInitialState() { return { tracks: TrackStore.getAll(),
}; }, componentDidMount: function() { TrackStore.addChangeListener(this._onChange); }, componentWillUnmount: function() { TrackStore.removeChangeListener(this._onChange); }, _onChange: function() { this.setState({ tracks: TrackStore.getAll() }); }, handleSubmit(e) { e.preventDefault(); let artist = this.state.inputArtist; if (artist) AppTracksActionCreators.fetchByArtist(artist); }, });
$PODMVTJPO
3FBDUKTJTGBTU
"EWBOUBHFPG7JSUVBM%0. w ͍ʁ w K2VFSZͳͲͰ%0.৮ͬͯॻ͍ͨํ͕͍ɻ w %0.ΛҙࣝͤͣʹࡶʹൣғͰ$PNQPOFOUΛߋ৽ͯͦ͠ ͍ͦ͜͜ɻ w TIPVME$PNQPOFOU6QEBUFʹΑΔ࠷దԽɻ
3FBDUKTJTFBTZ
.BLFEFWFMPQNFOUFBTJFS w %0.ͷөΛ3FBDUKTʹͤΔ͜ͱͰΞϓϦέʔγϣϯͷ ίʔυΛॻ͘͜ͱʹྗग़དྷΔɻ w +BWB4DSJQUͷࣝΛͦͷ··׆͔ͨ͠։ൃɻ
$PODMVTJPO w 3FBDUKT։ൃΛߴΊΔ͜ͱ͕తͰͳͯ͘ɺΞϓϦ έʔγϣϯͷ৴པੑΛߴΊΔ͜ͱ͕తɻ w 7JFXͷߋ৽Λ3FBDUKTʹ͓ͤͯ͘͜ͱͰΞϓϦέʔγϣϯͷ ίʔυΛγϯϓϧʹॻ͘͜ͱ͕ग़དྷΔɻ w $PNQPOFOUΛ࡞Δ͚ͩͳͷͰϥΠϒϥϦͷαΠζ͋Δͷ ͷಋೖ͍͢͠ɻ
w 3FBDUKTࠓΘΕ͍ͯΔٕज़ɻ
5IBOLZPV