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
830
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
150
AMP 完全に理解した
bakunyo
0
280
NNにふれてみて
bakunyo
0
950
Other Decks in Programming
See All in Programming
[SRE NEXT] 複雑なシステムにおけるUser Journey SLOの導入
yakenji
0
150
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
99
37k
20250708_JAWS_opscdk
takuyay0ne
2
130
Claude Code派?Gemini CLI派? みんなで比較LT会!_20250716
junholee
1
530
マッチングアプリにおけるフリックUIで苦労したこと
yuheiito
0
190
AIともっと楽するE2Eテスト
myohei
8
3k
Porting a visionOS App to Android XR
akkeylab
0
680
Deep Dive into ~/.claude/projects
hiragram
14
14k
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
180
ふつうの技術スタックでアート作品を作ってみる
akira888
1
1.3k
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
360
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
2
12k
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Designing for humans not robots
tammielis
253
25k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
A better future with KSS
kneath
238
17k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Producing Creativity
orderedlist
PRO
346
40k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Automating Front-end Workflow
addyosmani
1370
200k
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