Slide 1
Slide 1 text
ίϯϙʔωϯτࢦ࣌ͷ
JSΤϥʔτϥοΩϯά
EDWARD FOX
@Rails Developers Meetup 2017/05/18
Slide 2
Slide 2 text
λΠτϧ͔͚ͬͭͯ͜·͕͢
RailsͰϑϩϯτΛ࡞͖ͬͯͨ
தͰΤϥʔऩूʹ͍ͭͯ
ߟ͑ͨ͜ͱΛ͠·͢
Slide 3
Slide 3 text
Edward Fox
- Developer @ Repro Inc.
- RoR, JavaScript, AWS
- Vue.js, HTTP/2, Browsers
Slide 4
Slide 4 text
Rails × ϑϩϯτΤϯυ Ͱ
०ͳ
Slide 5
Slide 5 text
webpacker
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
ReactVue.jsͳͲͷ
ίϯϙʔωϯτࢦͳ
ϥΠϒϥϦ͕͙͢ಈ͘
Slide 9
Slide 9 text
ΫϥΠΞϯτͷ͕
େ͖͘ͳΔҰํɺ
ΤϥʔτϥοΩϯά
σόοάपΓ͕εΩͩΒ͚
Slide 10
Slide 10 text
ϑϩϯτͷΤϥʔΛ
ૄ͔ʹ͍͚ͯ͠ͳ͍
Slide 11
Slide 11 text
ࠓͷ݁:
Sentry ͍·͠ΐ͏
Slide 12
Slide 12 text
Sentry is Կ
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
1. Τϥʔʹؾ͘
2. ΤϥʔΛཧղ͢Δ
3. ΤϥʔΛ࠶ݱ͢Δ
Slide 15
Slide 15 text
1. Τϥʔʹؾ͘
2. ΤϥʔΛཧղ͢Δ
3. ΤϥʔΛ࠶ݱ͢Δ
Slide 16
Slide 16 text
RailsͰ༻ҙͨ͠
APIΤϯυϙΠϯτʹ
JS͔Βඇಉظ௨৴ͯ͠
σʔλΛऔಘ
Slide 17
Slide 17 text
RailsͰఆ௨Γͷ
JSONΛฦ͍ͯͯ͠ɺ
࣮σʔλΛड͚औͬͨ
ΫϥΠΞϯτ͏·͘
ॲཧͰ͖͍ͯͳ͍͔
Slide 18
Slide 18 text
ΫϥΠΞϯτͰͷ
Τϥʔൃੜ࣌ʹ
- ϦΫΤετύϥϝʔλ
- ελοΫτϨʔε
- Τϥʔͷߦɾྻ൪߸
ͱ͍ͬͨใ͕औಘՄೳ
Slide 19
Slide 19 text
1. Τϥʔʹؾ͘
2. ΤϥʔΛཧղ͢Δ
3. ΤϥʔΛ࠶ݱ͢Δ
Slide 20
Slide 20 text
֊ߏΛ࣋ͭ
ίϯϙʔωϯτ͔Β
Τϥʔ͕ൃੜ
Slide 21
Slide 21 text
Τϥʔͷൃੜࣗମʹ
ؾ͚ͯɺΤϥʔΛ
ىͨ͜͠ίϯϙʔωϯτ͕
Ͳ͏͍͏ঢ়ଶ͔Θ͔Βͳ͍
Slide 22
Slide 22 text
- component name
- lifecycle hook
- state, data, props
- localStorage
ͱ͍ͬͨใ͕औಘՄೳ
Slide 23
Slide 23 text
Τϥʔ͕ൃੜͨ͠ͱ͖ͷ
ίϯϙʔωϯτͷঢ়ଶΛ
Ѳ͠ɺΤϥʔͷৄࡉΛ
ཧղͰ͖Δ
Slide 24
Slide 24 text
1. Τϥʔʹؾ͘
2. ΤϥʔΛཧղ͢Δ
3. ΤϥʔΛ࠶ݱ͢Δ
Slide 25
Slide 25 text
ΤϥʔࣗମΛཧղͰ͖ͯ
ͦͷΤϥʔʹࢸΔ·Ͱͷ
ྲྀΕ͕͔Βͣ
࠶ݱͰ͖ͳ͍
Slide 26
Slide 26 text
SentryͷBreadcrumbsΛݟΔ
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
Ϣʔβʔͷը໘ૢ࡞͕
͑ΔͨΊ
Τϥʔͷ࠶ݱ͕༰қ
Slide 29
Slide 29 text
Ϧιʔεͷঢ়ଶ͕URLͰදݱ
Ͱ͖ͳ͍SPAͰ͋ͬͯɺ
SentryʹૹΔใΛ
؆୯ʹՃͰ͖Δ
Slide 30
Slide 30 text
·ͱΊ
Slide 31
Slide 31 text
Sentry ͍·͠ΐ͏
Slide 32
Slide 32 text
1. Τϥʔʹؾ͘
2. ΤϥʔΛཧղ͢Δ
3. ΤϥʔΛ࠶ݱ͢Δ
Slide 33
Slide 33 text
ϦονͳUIɺSPAΛ࡞ΔͳΒ
ΫϥΠΞϯτͷΤϥʔΛ
ͪΌΜͱऩू͠
ݎ࿚ͳRailsΞϓϦΛ࡞Ζ͏
Slide 34
Slide 34 text
edwardkenfox.com