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
690
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
98
GitHub Actions CI/CD Update
bakunyo
0
110
AMP 完全に理解した
bakunyo
0
200
NNにふれてみて
bakunyo
0
900
Other Decks in Programming
See All in Programming
使ってみよう Azure AI Document Intelligence
kosmosebi
2
330
初心者のためのRubyKaigi入門/RubyKaigi Introduction
a_matsuda
7
990
CDKコントリビュートの最初の壁を越えよう! -簡単issueの見つけ方-
badmintoncryer
1
100
禅の心を手に入れよ
eltociear
1
120
Milestoner
bkuhlmann
1
410
Let's learn code review
riofujimon
2
490
Elm Form Validation
bkuhlmann
0
510
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
4
970
Apache Hive 4 on Treasure Data
ryukobayashi
0
350
PostmanでAPIの動作確認が楽になった話
h455h1
0
170
ONE WEDGE_company_guide
1wedge_one
0
500
ゆるい個人開発のススメ
kuroppe1819
10
990
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
243
12k
Build your cross-platform service in a week with App Engine
jlugia
225
17k
10 Git Anti Patterns You Should be Aware of
lemiorhan
648
58k
Visualization
eitanlees
136
14k
A Philosophy of Restraint
colly
197
16k
RailsConf 2023
tenderlove
4
540
Rebuilding a faster, lazier Slack
samanthasiow
73
8.2k
Docker and Python
trallard
34
2.7k
The Illustrated Children's Guide to Kubernetes
chrisshort
31
46k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.9k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
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