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
8 Tips for React beginner
Search
takayuki shimizu
October 13, 2016
Technology
0
270
8 Tips for React beginner
2016/10/12「React勉強会 vol.2︎ 急成長サービスを支えるReactの最新動向」の登壇資料です。
takayuki shimizu
October 13, 2016
Tweet
Share
More Decks by takayuki shimizu
See All by takayuki shimizu
VPoEの仕事 / What's VPoE work?
takayukishmz
0
400
エンジニアリングマネージャーと実行力 - 13ヶ月の組織改善から学ぶ3つのアンチパターンとチェックリスト - / Engineering Manager and Execution
takayukishmz
8
4.5k
エンジニアリングマネージャーと戦略 / Engineering Manager and Strategy
takayukishmz
2
3.4k
カイカクジャーニー ~ スタートアップが必ずぶつかる課題と開発チームのメジャーバージョンアップ ~/ Rails Developer Meetup 2018-12-08
takayukishmz
5
3.7k
React/Reduxで半年くらい真面目にSPAするとわかること
takayukishmz
6
5.1k
Other Decks in Technology
See All in Technology
Claude Code に プロジェクト管理やらせたみた
unson
7
4.9k
敢えて生成AIを使わないマネジメント業務
kzkmaeda
2
500
American airlines ®️ USA Contact Numbers: Complete 2025 Support Guide
airhelpsupport
0
390
OpenTelemetryセマンティック規約の恩恵とMackerel APMにおける活用例 / SRE NEXT 2025
mackerelio
2
1.4k
衛星運用をソフトウェアエンジニアに依頼したときにできあがるもの
sankichi92
1
210
Copilot coding agentにベットしたいCTOが開発組織で取り組んだこと / GitHub Copilot coding agent in Team
tnir
0
130
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
54
22k
アクセスピークを制するオートスケール再設計: 障害を乗り越えKEDAで実現したリソース管理の最適化
myamashii
1
270
対話型音声AIアプリケーションの信頼性向上の取り組み
ivry_presentationmaterials
1
630
PO初心者が考えた ”POらしさ”
nb_rady
0
230
全部AI、全員Cursor、ドキュメント駆動開発 〜DevinやGeminiも添えて〜
rinchsan
2
760
Lufthansa ®️ USA Contact Numbers: Complete 2025 Support Guide
lufthanahelpsupport
0
230
Featured
See All Featured
Building Adaptive Systems
keathley
43
2.7k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
How STYLIGHT went responsive
nonsquared
100
5.6k
Designing for humans not robots
tammielis
253
25k
Faster Mobile Websites
deanohume
307
31k
Fireside Chat
paigeccino
37
3.5k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
6
320
Practical Orchestrator
shlominoach
189
11k
Automating Front-end Workflow
addyosmani
1370
200k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Music & Morning Musume
bryan
46
6.7k
Transcript
8 TIPS FOR REACT BEGINNER ٕज़։ൃຊ෦ WEB APPLICATION DEVELOPMENT MANAGER
ਗ਼ਫ ོ೭
agenda Why React?Redux? 8 Tips For React Beginner
͋ͳͨ୭ ਗ਼ਫོ೭ @takayukishmz DeNA -> startup -> FiNC #perl #node
#objc #ruby ΞϓϦɺαʔόʔɺϑϩϯτΤϯυʹશ෦ FiNCͰFiNCϓϥεɺΣϧωεαʔϕΠͳͲB ͚ΞϓϦέʔγϣϯ࡞ͬͯ·͢
What is FiNC w σʔλऩूˠੳˠιϦϡʔγϣϯˠ&$ w ߦಈม༰ͱܧଓͷͨΊͷΣϧωεόϦϡʔνΣʔϯ =/$ !B6 FQ
}jdc D]U EF TS -0$ SNS 5=$ qA`X >"2 q lY D {P e zG 3O yo3O |f 1_1ℓECg a:B=, • wNtb • W kZ • h~J • mix[p<$ • K4;@ etc. 3),/$'$ & C • B(9- 1 B&.= !4 <9@, • s-<@ • $8B#B etc. '$R~ D\r 7@, 7@,nM !B6tb 5=$ *B<%8 HV @+@* etc. D'$ $?),10O3 uv 10Ie ;$LI ^ f|
FiNC App (web) React + Redux + React-Router
FiNCϓϥε αʔϕΠʹαʔϕΠͰݸਓͷੜ׆श׳ɺਫ਼ਆঢ়ଶͳͲύʔιφϧσʔλΛऔಘɺੳ͠ɺݸਓاۀ ͷੜ࢈ੑɺ՝Λநग़ɻετϨενΣοΫʹରԠ React on Rails
ITPro Media *51SP͞ΜͰ3FBDU3FEVYͷهࣄΛॻ͖·ͨ͠
None
agenda Why React?Redux? 8 Tips For React Beginner
React͕ೖΔલ ϑϩϯτΤϯδχΞθϩ Railsͷແடংͳϑϩϯτʹѱઓۤಆ 10Ҏ্ͷϚΠΫϩαʔϏεͷू߹ ͱΓ͋͑ͣษڧձΛͬͯΈΔ υΩϡϝϯτɺαϯϓϧॆ࣮͍ͯ͠ΔͷͰ·ͣ ৮ͬͯΈΔ
࢝ΊͷҰา class HelloMessage extends React.Component { render() { return <div>Hello
{this.props.name}</div>; } } ReactDOM.render(<HelloMessage name="Finc" />, mountNode); https://facebook.github.io/react/
About React.js JUST THE UI ≠ϑϨʔϜϫʔΫɻͨͩͷViewϥΠϒϥϦ VIRTUAL DOM ԾdomͷΈΛ͚ͬͯࠩͩΛ؆୯ʹ࠶ඳը DATA
FLOW one-way binding. γϯϓϧͳσʔλͷྲྀΕ
Why React.js? ύϑΥʔϚϯεΛߴΊͯUXΛྑ͍ͨ͘͠ pureͳjs͚ͩͩͱঢ়ଶཧʹࠔΔ ࠷ॳͷεϐʔυେࣄ͚ͩͲɺอक͕ͬͱେࣄ Nativeͱಉ͡APIΛ͍͍ͨˍMicro ServiceΏ͑ଞ αʔϏεͱͷAPI࿈ܞଟ͍.
FiNCϓϥε ঢ়ଶ ঢ়ଶ ঢ়ଶ ঢ়ଶཧΛͲ͏ʹָ͔ʹͰ͖ͳ͍͔
Why React.js? ύϑΥʔϚϯεΛߴΊͯUXΛߴΊ͍ͨ virtual domʹΑΓ࣮ίετΛ͑ͭͭɺඳը͚ͬ͜͏ૣ͍ jsΦϯϦʔͩͱঢ়ଶཧʹࠔΔ Reaxt+FluxͰঢ়ଶཧʹదͨ͠ΞʔΩςΫνϟΛఏڙ ࠷ॳͷεϐʔυେࣄ͚ͩͲɺอक͕ͬͱେࣄ ҰఆنҎ্ʹͳͬͯSimpleͳσʔλϑϩʔΛอ͍ͪ͢ Nativeͱಉ͡APIΛ͍͍ͨˍMicro
ServiceΏ͑ଞαʔϏεͱͷAPI࿈ܞଟ͍ React+react-router+fluxͰಛఆͷαʔόʔ͔Βಠཱͨ͠SPAͱ࣮
agenda Why React?Redux? 8 Tips For React Beginner
8 TIPS FOR REACT BEGINNER 1.ϑϩϯτΤϯυߏܾΊ 2.ࠓͳΒES2015Ұ 3.Workflowͷඋ 4.FluxϥΠϒϥϦ 5.Fat
Flux 6.Smart/Dumb Component 7.CSS:Component = 1:1
1.ϑϩϯτΤϯυߏܾΊ React.js language: Javascript ES6 workflow: gulp + babel +
browserify + watchify Flux framework: Redux Test: ava ຊ൪ߏͷ࣮ྫ·ͩ·ͨখɻ ࣮ફ͍ͯ͠Δதͷਓʹ͖͘ͷ͕Ұ൪ɻ
2.͏ES2015Λ͓͏ 2015/06/17ʹඪ४༷ͱͯ͠ൃߦ babelΛ͑ES5ʹޓͰ͖ΔͷͰChromeʙIE· Ͱ’΄΅’ͳ͘ಈ͘ ArrowFunction, let,const,default parameter,Class etc ศརͳػೳ͕ଟՃɻCoffeeScript͍Βͣ. ڈͳΒ໎͕ͬͨɺࠓͳΒҰ
࠷ۙProjectʹΑͬͯTypeScriptΛ࠾༻
3.WorkFlowͷ४උ gulpɿhe streaming build system. babelͷม͔Β buildɺαʔόʔ্ཱͪ͛etcͳͲͷλεΫΛ࣮ߦɻ babelɿES6 -> ES5ม͢ΔτϥϯεύΠϥ
browserifyɿΫϥΠΞϯταΠυͰimport/require ΛՄೳʹͯ͘͠ΕΔຐ๏ͷ伺 watchifyɿwatchifyΛΕ͚ͯࠩͩ࠶τϥϯεύΠϧ workflow·ΘΓʑਐԽɻwebpack,RollupͳͲ༻ɻ
Α͠ɺReactΛ࢝ΊΑ͏
4. FLUXϑϨʔϜϫʔΫଟա͗ ແʹ͋ΔFluxϑϨʔϜϫʔΫʹৼΓճ͞Εͳ͕Βɺ 'MVYYPSBMUKTRedux ˡࠓίί Facebook Flux, Fluxible by Yahoo,
Reflux, Alt, Flummox, Marty.js, McFly, Lux, Material Flux, Redux, Redux + Flambeau, Nuclear.js, Fluxette, Fluxxor, Freezer, Fluxury..
About redux a predictable state container for JavaScript apps. https://github.com/reactjs/redux
ʮJavaScriptͷΞϓϦͷ༧ଌՄೳͳঢ়ଶͷίϯςφʯ FluxͷViewҎ֎ͷ෦Λ୲͏ StateΛReducerΛ௨ͯ͠ͷΈ͔͠มߋΛ͔͚ΒΕͳ͍
Redux Flow Reducer Store Middleware Action Action Creater Server View
Why Redux? Ұ൪͔͍ͬͳঢ়ଶ(State)ཧʹఆධ Action/reducer͕ͨͩͷؔͰɺૣ͍ɾςετ͠ ͍͢ ੍ଟ͍͕Θ͔ΕγϯϓϧɻΏ͑ʹfluxͷதͰ Ұ൪ίʔυϨϏϡʔ͍͘͢͠ɺอक͍͢͠ɻ
ͱ͍͑
5.͙͢ංେԽ͢Δ actions reducers stores components containers fetch API handling ϏδωεϩδοΫ
࣌ࠁදࣔ ࠃࡍԽ statefull component fat action fat reducer ̎ϲ݄ΕɺαϯϓϧͰΈͨ͜ͱͳ͍ίʔυྔʹ
actions reducers stores components containers repository entities utils React/ReduxͷجຊઃܭʹͱͲ·Βͣɺ ΞϓϦέʔγϣϯͷͷׂΛॳظ͔ΒਐΊΔͷ͕େࣄ
5.͙͢ංେԽ͢Δ
6.Smart/Dumb Components Container Component ৼΔ͍ʹؔ৺Λ࣋ͭ MVCͷCతͳҐஔ͚ σʔλͱৼΔ͍ΛPresentational Componentʹ͢ Presentational Componentͱfluxͱͷґଘ͕ͳ͍ঢ়ଶʹอͬͯ͘ΕΔ͍͍ͭ
Presentational Component ݟͨʹؔ৺Λͭ PropsΛΒ͍ɺstateΛͨͳ͍ɻ fluxͷґଘ͕ͳ͍ʢͳΔ͘ʣ࠶ར༻ੜͷߴ͍component Presentational and Container Components — Medium https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.qoyibvfno Container(root) ͱͦΕҎԼͷ$PNQPOFOUͷׂΛ໌֬ʹ͠ɺ ࠶ར༻ੜΛอͭ
7. REACTσβΠϯϑΣʔζ͔Β࢝·Δ ੜ࢈ੑͷͨΊʹ࠶ར༻ੜͷߴ͍Presentatonal ComponentΛͭ͘Δ νʔϜͰίϯϙʔωϯτࢦΛపఈ ࠶ར༻ੑͷίϯϙʔωϯτͰσβΠϯΛߏ CSSBEM, SMACSSͳͲίϯϙʔωϯτલఏ ͷCoding RuleΛऔΓೖΕΔඞཁ͋Γ
CSS:Component = 1:1
8. Flux͋͘·Ͱ ReactΛೖΕΔʹFluxΛೖΕΔͱͳΓ͕ͪ ͳʹΛղܾ͍ͨ͠ʁ SPA͢Δ͠ͱΓ͋͑ͣ.. ϗϯτʹSPA͢Δඞཁ͋Δʁ طଘProjectͷಋೖϋʔυϧ ϗϯτʹϖΠ͢Δʁ React“ϑϨʔϜϫʔΫ”Ͱͳ͘”ViewϥΠϒϥϦ”
Others.. React x i18n React on Railsͱ͍͏ҋʹ͍ͭͯ FluxxorɺAltͱ͍͏ࠇྺ࢙ʹ͍ͭͯ ڵຯ͋Δํผ్
·ͱΊ React/redux͕࠷ߴʂ͔Θ͔Βͳ͍͕ɺχʔζʹ͋͑ ͔ͳΓḿΔɻ ES2015ָ͍͠ɻ ֶशίετ࣮ͦΜͳʹͳ͍ɻfrontendͷϥΠϒϥϦ Ͱ͍ܰํɻ ࣮ફಋೖ࣌ɺsample codeͷԆͰπϥΠɻઌਓʹ ૬ஊ͢Δͷ͕Ұ൪!
We are hiring! https://www.wantedly.com/projects/63233