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
850
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
170
AMP 完全に理解した
bakunyo
0
300
NNにふれてみて
bakunyo
0
960
Other Decks in Programming
See All in Programming
What's new in Spring Modulith?
olivergierke
1
140
SpecKitでどこまでできる? コストはどれくらい?
leveragestech
0
670
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
140
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
970
overlayPreferenceValue で実現する ピュア SwiftUI な AdMob ネイティブ広告
uhucream
0
180
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
1.9k
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
hollycummins
0
210
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
120
Le côté obscur des IA génératives
pascallemerrer
0
140
複雑化したリポジトリをなんとかした話 pipenvからuvによるモノレポ構成への移行
satoshi256kbyte
1
1k
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
690
Cloudflare AgentsとAI SDKでAIエージェントを作ってみた
briete
0
140
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Docker and Python
trallard
46
3.6k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
4 Signs Your Business is Dying
shpigford
185
22k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
19
1.2k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Music & Morning Musume
bryan
46
6.8k
RailsConf 2023
tenderlove
30
1.2k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
GraphQLとの向き合い方2022年版
quramy
49
14k
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