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
410
エンジニアリングマネージャーと実行力 - 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
DDD集約とサービスコンテキスト境界との関係性
pandayumi
3
290
AWSで始める実践Dagster入門
kitagawaz
1
620
ハードウェアとソフトウェアをつなぐ全てを内製している企業の E2E テストの作り方 / How to create E2E tests for a company that builds everything connecting hardware and software in-house
bitkey
PRO
1
150
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
9
73k
テストを軸にした生き残り術
kworkdev
PRO
0
210
実践!カスタムインストラクション&スラッシュコマンド
puku0x
0
440
開発者を支える Internal Developer Portal のイマとコレカラ / To-day and To-morrow of Internal Developer Portals: Supporting Developers
aoto
PRO
1
460
5分でカオスエンジニアリングを分かった気になろう
pandayumi
0
250
企業の生成AIガバナンスにおけるエージェントとセキュリティ
lycorptech_jp
PRO
2
190
初めてAWSを使うときのセキュリティ覚書〜初心者支部編〜
cmusudakeisuke
1
260
新規プロダクトでプロトタイプから正式リリースまでNext.jsで開発したリアル
kawanoriku0
1
130
OCI Oracle Database Services新機能アップデート(2025/06-2025/08)
oracle4engineer
PRO
0
160
Featured
See All Featured
Bash Introduction
62gerente
615
210k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
BBQ
matthewcrist
89
9.8k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Practical Orchestrator
shlominoach
190
11k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
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