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
スペースマーケットのアーキテクチャ変遷
Search
Haruhiko Kobayashi
February 26, 2018
Programming
0
2.3k
スペースマーケットのアーキテクチャ変遷
スペースマーケットのアーキテクチャ変遷
Haruhiko Kobayashi
February 26, 2018
Tweet
Share
More Decks by Haruhiko Kobayashi
See All by Haruhiko Kobayashi
GraphQL GatewayをNode.jsで作ってる話
hmatsuda
2
1.8k
Other Decks in Programming
See All in Programming
ゲームの物理
fadis
5
1.5k
Google I/O recap web編 大分Web祭り2025
kponda
0
2.9k
Nuances on Kubernetes - RubyConf Taiwan 2025
envek
0
190
画像コンペでのベースラインモデルの育て方
tattaka
3
1.9k
Laravel Boost 超入門
fire_arlo
1
120
Portapad紹介プレゼンテーション
gotoumakakeru
1
130
物語を動かす行動"量" #エンジニアニメ
konifar
14
5.5k
フロントエンドのmonorepo化と責務分離のリアーキテクト
kajitack
2
140
TROCCO×dbtで実現する人にもAIにもやさしいデータ基盤
nealle
0
330
ワープロって実は計算機で
pepepper
2
1.4k
あのころの iPod を どうにか再生させたい
orumin
2
2.5k
Flutter로 Gemini와 MCP를 활용한 Agentic App 만들기 - 박제창 2025 I/O Extended Seoul
itsmedreamwalker
0
150
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
780
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
A better future with KSS
kneath
239
17k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.6k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
183
54k
Balancing Empowerment & Direction
lara
2
590
A Tale of Four Properties
chriscoyier
160
23k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Mobile First: as difficult as doing things right
swwweet
223
9.9k
How to Ace a Technical Interview
jacobian
279
23k
The Language of Interfaces
destraynor
160
25k
Transcript
)BSVIJLP,PCBZBTIJ εϖʔεϚʔέοτͷ ΞʔΩςΫνϟมભ
Haruhiko Kobayashi Tech Lead εϖʔεϚʔέοτ 1ਓͷΤϯδχΞͱͯ͠ࢀՃ ࣗݾհ
εϖʔεΛିΓ͍ͨਓͱआ͍ͨ͠ਓΛϚονϯάͤ͞Δϓϥοτ ϑΥʔϜ αʔϏεհ आΓ͍ͨਓ ήετ आ͍ͨ͠ਓ ϗετ
1࣌ؒ୯ҐͰεϖʔεΛି͠आΓ(2014/4ʙ) SPACEMARKET
॓ധεϖʔεΛି͠आΓ(2017/9ʙ) SPACEMARKET STAY
ࣾһͷ༧ΛҰׅཧ(2017/11ʙ) ๏ਓཧαʔϏε
• ήετ͚ iOS(2015/6ʙ) Android(2017/2ʙ) • ϗετ͚ iOSɺAndroid(2017/11ʙ) ωΠςΟϒΞϓϦ
εϖʔεϚʔέοτͷٕज़ελοΫ ΞʔΩςΫνϟͷมભ ϩʔϯνॳظ(2014/8ʙ2016/1) React x Railsظ(2016/2ʙ2017/8) ݱࡏ(2017/9ʙ) ࠓޙʁ ࠓ͢͜ͱ Agenda
εϖʔεϚʔέοτͷٕज़ελοΫ
Rails React SPACEMARKET Node.js React/Redux Apollo Client SPACEMARKET STAY /
๏ਓཧαʔϏε webٕज़ελοΫ API Rails
Swift Kotlin ήετ͚ΞϓϦ ReactNative ϗετ͚ΞϓϦ ΞϓϦٕज़ελοΫ
֓ཁਤ React REST API/ GraphQL Apollo React/Redux 41"$&."3,&545": ๏ਓ͚ཧαʔϏε 41"$&."3,&5
Apollo React/Redux /PEFKT 3BJMT '& #& Swift Kotlin React/Redux ௨৴ͷྲྀΕ ϗετ͚ΞϓϦ ήετ͚ΞϓϦ KT non-js React 3FBDU/BUJWF
ΞʔΩςΫνϟͷมભ
ϩʔϯνॳظ
ΤϯδχΞ2ਓ ఏڙαʔϏεSPACEMARKETͷΈ ։ൃݱ RailsͷσϑΥϧτ ಠࣗFEϑϨʔϜϫʔΫ HTMLΛฦ͢ΤϯυϙΠϯτ ES5 ΞʔΩςΫνϟ ϩʔϯνॳظ(2014/8ʙ2016/1) લ
jQuery Rails )5.- )5.-
ΤϯδχΞ2ਓ -> 4ਓͱ૿͍͑ͯ͘ iOSΞϓϦ͕ϦϦʔε(2015/6) ઐ༻ͷREST APIΛ։ൃ มԽ ৫ɾαʔϏεͷͱͱʹFEͷόά͕૿͖͑ͯͨ ՝ ϩʔϯνॳظ(2014/8ʙ2016/1)
ޙ
jQuery͕DOM(globalม)Λ৮Δࣄ PRͷίʔυϨϏϡʔͰDOMͷঢ়ଶ·Ͱݟ͑ͳ͍ ຊ࣭తͳʁ globalมΛѻ͏ͷΛΊΔ ղܾҊ ϩʔϯνॳظ(2014/8ʙ2016/1) ޙ
jQuery͕DOM(globalม)Λ৮Δࣄ PRͷίʔυϨϏϡʔͰDOMͷঢ়ଶ·Ͱݟ͑ͳ͍ ຊ࣭తͳʁ globalมΛѻ͏ͷΛΊΔ => ReactͷVirtual DOM ղܾҊ ϩʔϯνॳظ(2014/8ʙ2016/1) ޙ
React x Railsظ
ΤϯδχΞ4ਓ ։ൃݱ React react-rails gem webpacker gem ES6 FlowType ΞʔΩςΫνϟ
React x Railsظ(2016/2ʙ2017/8) લ REST API React +40/ +40/ )5.- React 3BJMT
globalมʹ৮Βͳ͘ͳͬͨ SSR(ϩδοΫ/ςϯϓϨʔτͷ2ॏཧͷഉআ) όάͷݮ DOMͷશߋ৽͔Βࠩߋ৽ʹҠߦ ύϑΥʔϚϯεͷ্ React࠾༻ͷͶΒ͍
ΤϯδχΞ4ਓ -> 8ਓͱ૿͍͑ͯ͘ σόΠεͷ૿Ճ(ήετ͚AndroidΞϓϦ) ৽نαʔϏε͕ଓʑ૿Ճ༧ఆ(ϗετ͚ΞϓϦɺStayɺ๏ਓ͚) มԽ ৽ظαʔϏεͷFE։ൃʹ͕͔͔࣌ؒΔ FE։ൃͷཁٻʹREST API͕͍ͭͯ͜Εͳ͍ ՝
React x Railsظ(2016/2ʙ2017/8) ޙ
Viewίϯϙʔωϯτͷڞ༗͕Ͱ͖ͳ͍ RESTfulͳAPIʹॊೈੑ͕ͳ͍ ຊ࣭తͳʁ ViewϑϨʔϜϫʔΫΛ౷Ұ ॊೈͳAPIͷ࠾༻ ղܾҊ React x Railsظ(2016/2ʙ2017/8) ޙ
Viewίϯϙʔωϯτͷڞ༗͕Ͱ͖ͳ͍ RESTfulͳAPIʹॊೈੑ͕ͳ͍ ຊ࣭తͳʁ ViewϑϨʔϜϫʔΫΛ౷Ұ => Node(React)ɺReactNativeΛ࠾༻ ॊೈͳAPIͷ࠾༻ ղܾҊ React x
Railsظ(2016/2ʙ2017/8) ޙ
Viewίϯϙʔωϯτͷڞ༗͕Ͱ͖ͳ͍ RESTfulͳAPIʹॊೈੑ͕ͳ͍ ຊ࣭తͳʁ ViewϑϨʔϜϫʔΫΛ౷Ұ => Node(React)ɺReactNativeΛ࠾༻ ॊೈͳAPIͷ࠾༻ => ࢀরܥΫΤϦʹGraphQLΛ࠾༻ ղܾҊ
React x Railsظ(2016/2ʙ2017/8) ޙ
ݱࡏ
ΤϯδχΞ10ਓ FE(web+ΞϓϦ)ͱBEͰΤϯδχΞνʔϜΛ ։ൃݱ Node.js React/Redux Apollo Client ΞʔΩςΫνϟ ݱࡏ(2017/9ʙ) Apollo
React/ Redux Node.js REST API GraphQL )5.- +40/ +40/
ཧͲ͜Ͱ࠶ར༻Ͱ͖ΔView Ϣχόʔαϧͳίϯϙʔωϯτ Σϒ։ൃϦιʔε͕Γͳ͍࣌ʹΞϓϦΤϯδχΞΛΞαΠϯ ٯ·͔ͨ͠Γ ϦιʔεͷྲྀಈԽ ViewϑϨʔϜϫʔΫͷ౷Ұ αʔϏε1 web αʔϏε2 web
αʔϏε3 web αʔϏε1 iOS αʔϏε2 iOS αʔϏε3 iOS αʔϏε1 Android αʔϏε2 Android αʔϏε3 Android αʔϏεN web αʔϏεN iOS αʔϏεN Android
Partial Response Batch Request σϑΥϧτػೳ graphdoc GraphiQL ApolloͰͷ࣮ϫʔΫϑϩʔ ։ൃޮੑ GraphQLͷ͝հ
ࢦఆͨ͠σʔλͷΈऔಘ Partial Response
ҰͷAPIίʔϧͰෳͷϦιʔεΛऔಘ Batch Request
Partial Response Batch Request σϑΥϧτػೳ graphdoc GraphiQL ApolloͰͷ࣮ϫʔΫϑϩʔ ։ൃޮੑ GraphQLͷ͝հ
graphdoc graphqlAPIͷ࣮͔ΒυΩϡϝϯτΛੜ
graphdoc graphqlAPIͷ࣮͔ΒυΩϡϝϯτΛੜ
GraphiQL(άϥϑΟΫϧ) ϦΫΤετ Ϩεϙϯε GraphQLͷΫΤϦ࣮ߦڥ
1.graphdocͷυΩϡϝϯτݟΔ 2.GraphiQLͰΫΤϦςετ 3.jsxʹΫΤϦΛίϐϖ ApolloͰͷ࣮ϫʔΫϑϩʔ
ApolloͰͷ࣮ϫʔΫϑϩʔ
ࠓޙʁ
Rails/Swift/Kotlin෦ͷஔ͖͑ ViewϑϨʔϜϫʔΫͷ౷Ұ ͍͖͍ͬͯͨ͜ͱ
ݱࡏ React REST API/ GraphQL Apollo React/Redux 41"$&."3,&545": ๏ਓ͚ཧαʔϏε 41"$&."3,&5
Apollo React/Redux /PEFKT 3BJMT '& #& Swift Kotlin React/Redux ௨৴ͷྲྀΕ ϗετ͚ΞϓϦ ήετ͚ΞϓϦ KT non-js React 3FBDU/BUJWF
ະདྷ React REST API/ GraphQL Apollo React/Redux 41"$&."3,&545": ๏ਓ͚ཧαʔϏε 41"$&."3,&5
Apollo React/Redux /PEFKT /PEFKT '& #& Apollo React/Redux ௨৴ͷྲྀΕ ήετ͚ΞϓϦ ϗετ͚ΞϓϦ KT non-js Apollo React/Redux Apollo React/Redux 3FBDU/BUJWF 3FBDU/BUJWF
৫αʔϏεͷঢ়گ࣍ୈͰϕλʔͳબࢶΛબͿ ϩʔϯνʹRailsσϑΥϧτͰՃ͢Δ தنҎ্ͷ։ൃʹVirtul DOM αʔϏεԣల։ͳΒϢχόʔαϧJS͋Γ ·ͱΊ
React / JavaScript / iOS / Android UI / UX
ʹͩ͜ΘΓ͍ͨ ৽ٕज़ఏҊɾಋೖͳͲੵۃతͰ͢ िҰϦϞʔτϫʔΫ੍ʢਫ༵ʣ ΤϯδχΞ࠾༻தͰ͢ʂ