Rails ͱ JSͷσʔλڮ͠ʹ͍ͭͯߟ͑ͯΈͨ2019/09/12 ۜ࠲Rails#13ۚࢠܚࢠ @neko314
View Slide
ɾ@neko314 / @neko314_ɾ࣌ʑNerima.rbͬͯ·͢ɾAsakura.rb͔ΒࢀΓ·ͨࣗ͠ݾհ
ΞΫτΠϯσΟͰಇ͍ͯ·͢
چλΠτϧʮJS Lv.1͚ͩͲRailsΞϓϦ্ͰͷVue.jsͷΑ͍ॻ͖ํΛௐͯΈͨʯλΠτϧٗʢະʣͰͨ͠!
❌RailsͱVue.jsͷ⭕RailsͱJavaScriptͷ్தͰม͑ͨมΘͬͯ͠·͍·ͨ͠
Rails ˱ JavaScript σʔλͷड͚͠ʹ͍ͭͯ͢͜ͱ
ʮͳͥ͜͏࣮͢Δͷ͔ʯ ͱ͍͏அཧ༝Λ໌֬ʹ͢Δ͜ͱํ๏ΰʔϧ
ۀͰVue.jsΛ͍ҰཡΛ࡞ͬͨʮ͜͏ΕͰ͖ΔʯͰ࣮ͨ͜͠ͷ··Ͱ͍Δͷ͍ͩͬͨͳͥ͜ͷΛʁ
ᶃAPIΛ༻ҙ͢ΔᶄDOMʹσʔλΛͨͤΔ࣮ํ๏
ᶃAPIΛ༻ҙ͢ΔᶄDOMʹσʔλΛͨͤΔ࣮ํ๏ۀͰॻ͍ͨͷͪ͜Β
API͏ͷͬͯΉ͕ͩଟ͍ͷͰʁ௨৴༨ܭʹൃੜ͢Δ͠HTMLͱJSONͱJSͬͯ༻ҙ͢Δͷ໘ͳײ͡ͳΜ͔ͦ͏๊͍ͨٙ
DOMͷํͰͬͨ΄͏͕Α͔ͬͨΓ͢ΔͷͰɾɾɾʁ๊͍ͨٙ
Ͱɺܭଌͯ͠ΈΑ͏
ɾRails → JS- ࢀরɾJS →Rails- ࡞ɾߋ৽ɾআݕূ༰
ɾRails → JS- ࢀরɾJS →Rails- ࡞ɾߋ৽ɾআݕূ༰ٙʹج͖ͮࠓճͪ͜Β
ɾύϑΥʔϚϯεɾσʔλͷ߹ੑɾ࣮ϝϯς͢͠͞ݕূج४
ɾύϑΥʔϚϯεɾσʔλͷ߹ੑɾ࣮ϝϯς͢͠͞ݕূج४ಉ͘͡ࠓճͪ͜Β
αϯϓϧΞϓϦΛ࡞ͬͯҧ͍Λൺֱݕূํ๏
࡞ͬͨͷɾϢʔβʔ1,000݅ɾJSଆͰϖʔδωʔγϣϯ
ڥɾRuby 2.6.4ɾRails 6.0.0ɾWebpacker 4.0.7ɾVue.js 2.6.10ɾGoogle Chrome※ProductionڥͰىಈͨ͠localhostͰॾʑܭଌ͠·ͨ͠
NetworkͷΛൺֱॳճʴ 9ճϦϩʔυͷ10ճܭଌ
AuditsύωϧͰFirst Meaningful Paintൺֱܭଌ
APIͷ࣮ControllerHTMLJS
ᶃAPIΛ༻ҙ͢ΔᶄDOMʹσʔλΛͨͤΔˠgon࣮ํ๏
gonʹ͍ͭͯ
DOMʹΛͨͤΔ࣮ControllerHTMLJS
݁Ռൃද
RequestϦΫΤετճʢճʣʢճʣDOM API
ResourcesϦιʔεͷ༰ྔʢKBʣ DOM API
TransferredసૹྔʢKBʣʢճʣDOM API
Finishϖʔδ͕දࣔ͞ΕΔ·Ͱͷ࣌ؒʢKBʣʢճʣDOM API
DOMContentLoadedHTMLͷಡΈࠐ·ΕΔ·Ͱͷ࣌ؒʢmsʣʢճʣDOM API
LoadϖʔδͷಡΈࠐΈ͕ऴΘΔ·Ͱͷ࣌ؒʢmsʣʢճʣDOM API
First Meaningful Paintҙຯ͋Δ༰͕දࣔ͞ΕΔ࣌ؒDOM APIʢmsʣ
·ͱΊʢ̍ʗ̎ʣDOM APIRequest ⭕Resources ⭕Transferred ⭕
·ͱΊʢ̎ʗ̎ʣDOM APIFinish ⭕DOMContentLoaded⭕Load ⭕First MeaningfulPaint⭕
·ͱΊʢ̎ʗ̎ʣDOM APIFinishDOMContentLoaded⭕Load ⭕First MeaningfulPaintදࣔ࢝͠ΊAPI͕ૣ͍
·ͱΊʢ̎ʗ̎ʣDOM APIFinishDOMContentLoadedLoadFirst MeaningfulPaint⭕AuditsͷఆAPI͕ૣ͍
·ͱΊʢ̎ʗ̎ʣDOM APIFinish ⭕DOMContentLoadedLoadFirst MeaningfulPaintදࣔऴΘΓDOM͕ૣ͍
APIͷԿ͕͍͔API෦ͷऴྃͪͷ͕࣌ؒ͋ΔHTML: 15msJSON: 352ms
ͰDOMusers(index.html)ʹ͕͔͔͍࣌ؒͬͯΔ
HTMLͷେ͖͞ͱॲཧ࣌ؒDOM APIαΠζ 335KB 818B࣌ؒ 230ms 15msDOMʹΛͨͤΔͱHTMLͷαΠζ͕େ͖͘ͳΓॲཧʹ͕͔͔࣌ؒΔ
ɾHTMLͷදࣔૣ͍ɾHTMLͷදࣔͱσʔλͷड͚͠දࣔʹ͕࣌ؒࠩ͋ΔAPIͰ࣮͢Δͱ
ɾHTMLͷදࣔ࢝͠Ί͍ɾશମ͕දࣔ͠ऴΘΔͷૣ͍ɾܭଌπʔϧͷධՁ͕͍͍ͷͪ͜ΒDOMͷ߹
๊͍ͨٙͷ͑Α͘Θ͔Βͳ͍ʂ
ʮͳͥ͜͏࣮͢Δͷ͔ʯ ͱ͍͏அཧ༝Λ໌֬ʹ͢Δ͜ͱΰʔϧୡͨ͠ʁ
ΰʔϧୡͨ͠ʁҧ͍ΛΔ͜ͱ͕Ͱ͖ͨ·͔ͩΒͳ͍ͬͱΓ͍ͨ
ɾ͜ͷޡࠩϢʔβʔͷମײʹӨڹ͕͋Δ͔ɺ͋ΔͳΒͲͷఔʁͬͱ͔֬Ί͍ͨٙ
ɾ͕݅มΘΔͱͲ͏ͳΔ͔ʁɾͬͱ៛ີʹܭଌ͢Δͱʁͬͱ͔֬Ί͍ͨٙ
ɾܭଌָ͔ͬͨ͠ɾϑϩϯτʗαʔόʔͷશମΛΈͯ࠷దղͳ࣮Λߟ͑ΒΑ͏ʹͳΓ͍ͨײ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠☺