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
解析の定理証明実践@Lean 4
dec9ue
0
180
フィンテック養成勉強会#54
finengine
0
180
「Chatwork」の認証基盤の移行とログ活用によるプロダクト改善
kubell_hr
1
200
GeminiとNotebookLMによる金融実務の業務革新
abenben
0
240
「良さそう」と「とても良い」の間には 「良さそうだがホンマか」がたくさんある / 2025.07.01 LLM品質Night
smiyawaki0820
1
280
Wasm元年
askua
0
150
第9回情シス転職ミートアップ_テックタッチ株式会社
forester3003
0
250
セキュリティの民主化は何故必要なのか_AWS WAF 運用の 10 の苦悩から学ぶ
yoh
1
190
AIの最新技術&テーマをつまんで紹介&フリートークするシリーズ #1 量子機械学習の入門
tkhresk
0
140
Абьюзим random_bytes(). Фёдор Кулаков, разработчик Lamoda Tech
lamodatech
0
350
Node-RED × MCP 勉強会 vol.1
1ftseabass
PRO
0
160
データプラットフォーム技術におけるメダリオンアーキテクチャという考え方/DataPlatformWithMedallionArchitecture
smdmts
5
640
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Speed Design
sergeychernyshev
32
1k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Statistics for Hackers
jakevdp
799
220k
How to Ace a Technical Interview
jacobian
277
23k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Designing Experiences People Love
moore
142
24k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Building Applications with DynamoDB
mza
95
6.5k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
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