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
RoRoRoRoR
Search
bakunyo
October 27, 2016
Programming
0
840
RoRoRoRoR
React on Redux on Relay on Ruby on Rails を試みて失敗した話をしました
bakunyo
October 27, 2016
Tweet
Share
More Decks by bakunyo
See All by bakunyo
合宿成果@日本色
bakunyo
0
120
GitHub Actions CI/CD Update
bakunyo
0
160
AMP 完全に理解した
bakunyo
0
290
NNにふれてみて
bakunyo
0
950
Other Decks in Programming
See All in Programming
オープンセミナー2025@広島LT技術ブログを続けるには
satoshi256kbyte
0
160
1から理解するWeb Push
dora1998
7
1.7k
複雑なドメインに挑む.pdf
yukisakai1225
5
980
Improving my own Ruby thereafter
sisshiki1969
1
150
print("Hello, World")
eddie
1
490
KessokuでDIでもgoroutineを活用する / Go Connect #6
mazrean
0
140
Namespace and Its Future
tagomoris
6
690
Honoアップデート 2025年夏
yusukebe
1
920
CJK and Unicode From a PHP Committer
youkidearitai
PRO
0
110
モバイルアプリからWebへの横展開を加速した話_Claude_Code_実践術.pdf
kazuyasakamoto
0
310
さようなら Date。 ようこそTemporal! 3年間先行利用して得られた知見の共有
8beeeaaat
2
1.3k
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
temoki
0
250
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
How GitHub (no longer) Works
holman
315
140k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Producing Creativity
orderedlist
PRO
347
40k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
A better future with KSS
kneath
239
17k
Documentation Writing (for coders)
carmenintech
74
5k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Docker and Python
trallard
45
3.5k
Making Projects Easy
brettharned
117
6.4k
Transcript
RoRoRoRoR 2016.10.27 Cloud x HR ߹ಉϏΞόογϡ Izuta Hiroyuki
ࣗݾհ • ҏ౾ా യ • 2013/01 ೖࣾ
ࣗݾհ • ҏ౾ా യ • 2013/01 ೖࣾ
• ࠓϑϩϯτΤϯυؔ࿈ͷ
React on Redux on Relay on Ruby on Rails ͱ͍͏ࢼΈ
Ruby / Rails ͷ͜͜·Ͱ dev-server
ࠓͷΰʔϧ • ReactपลͷϥΠϒϥϦΛཧͯ͠ɺ ͋Ε͜Ε໎Θͳ͍Α͏શମ؍Λ࣋ͭ ʢϨʔϧΛෑ͘ʣ
React on Redux on Relay on Ruby on Rails
React ͬͯʁ • Facebook UI ίϯϙʔωϯτϥΠϒϥϦ - https://facebook.github.io/react/ •
Google Trends
എܠ
jQuery ࠷ߴ • େલఏͱͯ͠ • Selector, Event, Ajax, Effect …
• ϥΠϒϥϦॆ࣮ • DOMૢ࡞Ͱ͖Δ͠
jQuery ࠷ߴʁ • DOMૢ࡞ • <ul>ͯ͠loopͯ͠<li>ͯ͠ଐੑ͚ͭͯ… • खଓ͖త • DOMͷঢ়ଶΛิ͢Δ
Virtual DOM
Virtual DOM • ԾతͳDOMπϦʔΛ͓͍ͬͯͯɺࠩߋ৽ • ޮత
Virtual DOM ࣮ • Vue.js - https://vuejs.org/ • Riot.js -
http://riotjs.com/ • React.js
React Concepts • Declarative • Component-Based • Learn Once, Write
Anywhere
Sample Code (component)
React ·ͱΊ • jQuery ΄΅࠷ߴ • React UI ίϯϙʔωϯτ
• Virtual DOMͷࠩߋ৽Ͱɺޮత
React on Redux on Relay on Ruby on Rails
Redux ͬͯʁ • ༧Մೳͳঢ়ଶίϯςφ • React Component props ͱ
state Λ࣋ͪɺ state ߋ৽Մೳ • ͨͩɺཧ͕େมͳͷͰͦ͜Λαϙʔτ͢Δ • ReactҎ֎Ͱ͑Δ
എܠ
ϑϩϯτΤϯυͷׂ૿େ • SPA ͦͷଞϥΠϒϥϦʹΑΔෳࡶԽ • σʔλϑϩʔͷͨΊͷΞʔΩςΫνϟ͕ඞཁ • React ʹ͓͍ͯ state
ͷཧ
Flux
Flux ͬͯʁ • σʔλϑϩʔͷ୯ํԽΛଅ͢ΞʔΩςΫνϟ • Facebook ͷ Flux ࣮ “Flux”
͋Δ… - http://facebook.github.io/flux/
Flux Architecture
Redux ͷ߹ ɾAction͕DispatcherʹΔ ɾDispatcherStateͱͱʹ ActionΛReducerʹ͢ ɾReducer৽ͨͳStateΛ Viewʹ͢
Sample Code (Reducer)
Sample Code (react-redux)
Redux ͷ ҋ(?)
Before Proceeding Further ʢઌʹਐΊΔલʹʣ • “You Might Not Need Redux”
- Dan Abramov, creator of Redux - https://medium.com/@dan_abramov/you-might-not-need-redux- be46360cf367#.k02221rdc • redux ʹྑ͍ middleware ͕ඞਢ - http://togetter.com/li/979237 • mizchi ͷ Redux ߟ - http://togetter.com/li/911228
Redux ·ͱΊ • Redux Flux ࣮ͷ1ͭͰɺঢ়ଶΛཧ͢Δ ͨΊͷͷ • React
Ͱ͑Δ͕ɺͦΕʹݶΒͳ͍ • “You Might Not Need Redux.” - ಋೖ͢ΔલʹҰ୴མͪண͜͏
React on Redux on Relay on Ruby on Rails
Relay ͬͯʁ • A Javascript framework for building Data-Driven React
Apps. • Facebook - https://facebook.github.io/relay/
എܠ
• ϢʔβʔใΛऔಘ͢Δ "1*4FSWFS ɾࢯ໊ ɾྸ ɾ݂ӷܕ GET /users/:id REST API
๊͕͑Δ
• ΫϥΠΞϯτ͕૿͑ͨ "1*4FSWFS ɾࢯ໊ ɾྸ ɾ݂ӷܕ ɾࢯ໊ͱ ɾग़ GET /users/:id
REST API ๊͕͑Δ
"1*4FSWFS GET /users/:id ͦΜͳʹཁΒͳ͍ ɾࢯ໊ ɾྸ ɾ݂ӷܕ ɾग़ REST API
๊͕͑Δ • ·ͱΊͯฦͨ͠
• ΫϥΠΞϯτͷཁٻ༷ʑ • UA / QueryParams Ͱஅͯ͠ذ͢Δʁ • ඞཁͳ͚ͩϦΫΤετͯ͠ɺ ඞཁͳฦ͍ͨ͠
REST API ๊͕͑Δ
GraphQL
GraphQL ͬͯʁ • άϥϑ : Graph ϊʔυʢʣ܈ͱϊʔυؒͷ࿈݁ؔΛද͢ Τοδʢࢬʣ܈Ͱߏ͞ΕΔநσʔλܕ(wikipedia)
• ΦϒδΣΫτಉ࢜ͷؔੑΛද͢ΫΤϦݴޠ
GraphQL ͷ߹ • ϢʔβʔใΛऔಘ͢Δ "1*4FSWFS VTFS\ OBNF BHF
CMPPE@UZQF ^ VTFS\ OBNF MPDBUJPO ^ ඞཁͳ͚ͩ
Sample Code (Object Type)
GraphiQL
GraphiQL • An in-browser IDE for exploring GraphQL. - https://github.com/graphql/graphiql
• ಡΈํͨͿΜʮ͙Β;͔͌Δʯ • GUIͰखܰʹGraphQL͕ୟ͚Δ - ܕใ͋Γ - ύϥϝʔλࢦఆՄ
Demo
Redux on or Relay ? • Comparing Redux and Relay
- https://www.reindex.io/blog/redux-and-relay/ • Redux Relay state ΛࣗͰཧ͢ΔͨΊɺซ ༻Ͱ͖ͳ͍
Relay ·ͱΊ • Relay React ͚JSϑϨʔϜϫʔΫ • GraphQL Λͬͯඞཁͳ͚ͩϦΫΤετ
• ঢ়ଶΛཧ͢Δ Redux ͱซ༻Ͱ͖ͳ͍
શମ·ͱΊ
എܠͱͯ͋͠Δ֓೦Λཧ શମ૾Λཧͯ͠ɺࡉ෦ʹߦ͘લʹಓےΛཱ͓ͯͯ͜͏ ϥΠϒϥϦ എܠ 3FBDU 7JSUVBM%0. 3FEVY 'MVY 3FMBZ (SBQI2-
ऴ
͓·͚ • ؾʹͳΔN+1ճආ
ࢀߟURL • React - https://facebook.github.io/react/ • Redux - http://redux.js.org/ •
GraphQL - http://graphql.org/ • Relay - https://facebook.github.io/relay/
ࢀߟURL • ͳͥԾDOMͱ͍͏֓೦͕ԶୡͷࠢΛ͑ͤ͞Δͷ͔ - Qiita - http://qiita.com/mizchi/items/4d25bc26def1719d52e6 • redux ʹྑ͍
middleware ͕ඞਢ - http://togetter.com/li/979237 • mizchi ͷ Redux ߟ - http://togetter.com/li/911228 • GraphQLͷ͡Ί͔ͨ - Write and Run - http://diary.hatenablog.jp/entry/2016/10/23/224206