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
250
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
380
エンジニアリングマネージャーと実行力 - 13ヶ月の組織改善から学ぶ3つのアンチパターンとチェックリスト - / Engineering Manager and Execution
takayukishmz
8
4.4k
エンジニアリングマネージャーと戦略 / Engineering Manager and Strategy
takayukishmz
2
3.3k
カイカクジャーニー ~ スタートアップが必ずぶつかる課題と開発チームのメジャーバージョンアップ ~/ Rails Developer Meetup 2018-12-08
takayukishmz
5
3.5k
React/Reduxで半年くらい真面目にSPAするとわかること
takayukishmz
6
4.9k
Other Decks in Technology
See All in Technology
プログラム検証入門
riru
6
860
Envoy External AuthZとgRPC Extensionを利用した「頑張らない」Microservices認証認可基盤
andoshin11
0
240
社内の学びの場・コミュニティ形成とエンジニア同士のリレーションシップ構築/devreljapan2024
nishiuma
3
280
突撃! 隣のAmazon Bedrockユーザー 〜YouはどうしてAWSで?〜
minorun365
PRO
3
380
不動産tech Product Night#2_AIことはじめ_GA橋本
takehikohashimoto
0
180
やってやろうじゃないかメカアジャイル! / Let's do it, mechanical agile!
psj59129
1
600
AI でアップデートする既存テクノロジーと、クラウドエンジニアの生きる道
soracom
PRO
2
550
『GRANBLUE FANTASY: Relink』最高の「没入感」を実現するカットシーン制作手法とそれを支える技術
cygames
0
100
AIを活用した柔軟かつ効率的な社内リソース検索への取り組み
cygames
0
110
スタッフエンジニアの道: The Staff Engineer’s Path
snoozer05
PRO
44
14k
App Router を実プロダクトで採用して見えてきた勘所をちょっとだけ紹介
marokanatani
1
920
『GRANBLUE FANTASY Relink』ソフトウェアラスタライザによる実践的なオクルージョンカリング
cygames
0
140
Featured
See All Featured
Facilitating Awesome Meetings
lara
49
5.9k
Atom: Resistance is Futile
akmur
261
25k
Making the Leap to Tech Lead
cromwellryan
128
8.8k
[RailsConf 2023] Rails as a piece of cake
palkan
48
4.6k
Into the Great Unknown - MozCon
thekraken
29
1.4k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
45
4.8k
The Mythical Team-Month
searls
218
43k
WebSockets: Embracing the real-time Web
robhawkes
59
7.3k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
36
1.7k
GraphQLとの向き合い方2022年版
quramy
43
13k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
190
16k
Pencils Down: Stop Designing & Start Developing
hursman
119
11k
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