data_between_rails_and_javascript.pdf

Transcript

1. Rails ͱ JSͷσʔλڮ౉͠ ʹ͍ͭͯߟ͑ͯΈͨ 2019/09/12 ۜ࠲Rails#13 ۚࢠܚࢠ @neko314
2. ɾ@neko314 / @neko314_ ɾ࣌ʑNerima.rb΍ͬͯ·͢ ɾAsakura.rb ͔ΒࢀΓ·ͨ͠ ࣗݾ঺հ
3. ΞΫτΠϯσΟͰಇ͍ͯ·͢
4. چλΠτϧ ʮJS Lv.1͚ͩͲRailsΞϓϦ্Ͱͷ Vue.jsͷΑ͍ॻ͖ํΛௐ΂ͯΈͨʯ λΠτϧ࠮ٗʢະ਱ʣͰͨ͠!
5. ❌RailsͱVue.jsͷ࿩ ⭕RailsͱJavaScriptͷ࿩ ్தͰม͑ͨ มΘͬͯ͠·͍·ͨ͠
6. Rails ˱ JavaScript
 σʔλͷड͚౉͠ʹ͍ͭͯ ࿩͢͜ͱ
7. ʮͳͥ͜͏࣮૷͢Δͷ͔ʯ
 ͱ͍͏൑அཧ༝Λ໌֬ʹ͢Δ͜ͱ ํ๏࿦ ΰʔϧ
8. ۀ຿ͰVue.jsΛ࢖͍ҰཡΛ࡞ͬͨ ʮ͜͏΍Ε͹Ͱ͖ΔʯͰ࣮૷ͨ͠ ͜ͷ··Ͱ͍Δͷ͸͍΍ͩͬͨ ͳͥ͜ͷ࿩Λʁ
9. ᶃAPIΛ༻ҙ͢Δ ᶄDOMʹσʔλΛ΋ͨͤΔ ࣮૷ํ๏
10. ᶃAPIΛ༻ҙ͢Δ ᶄDOMʹσʔλΛ΋ͨͤΔ ࣮૷ํ๏ ۀ຿Ͱॻ͍ͨ ͷ͸ͪ͜Β
11. API࢖͏ͷͬͯΉ͕ͩଟ͍ͷͰ͸ʁ ௨৴༨ܭʹൃੜ͢Δ͠ HTMLͱJSONͱJSͬͯ༻ҙ͢Δͷ ΋໘౗ͳײ͡ͳΜ͔஗ͦ͏ ๊͍ͨٙ໰
12. DOMͷํͰ΍ͬͨ΄͏͕ Α͔ͬͨΓ͢ΔͷͰ͸ɾɾɾʁ ๊͍ͨٙ໰
13. Ͱ͸ɺܭଌͯ͠ΈΑ͏
14. ɾRails → JS - ࢀর ɾJS →Rails - ࡞੒ɾߋ৽ɾ࡟আ ݕূ಺༰
15. ɾRails → JS - ࢀর ɾJS →Rails - ࡞੒ɾߋ৽ɾ࡟আ ݕূ಺༰ ٙ໰ʹج͖ͮ ࠓճ͸ͪ͜Β
16. ɾύϑΥʔϚϯε ɾσʔλͷ੔߹ੑ ɾ࣮૷΍ϝϯς͠΍͢͞ ݕূج४
17. ɾύϑΥʔϚϯε ɾσʔλͷ੔߹ੑ ɾ࣮૷΍ϝϯς͠΍͢͞ ݕূج४ ಉ͘͡ࠓճ͸ ͪ͜Β
18. αϯϓϧΞϓϦΛ࡞ͬͯ ҧ͍Λൺֱ ݕূํ๏
19. ࡞ͬͨ΋ͷ ɾϢʔβʔ1,000݅ ɾJSଆͰϖʔδ ωʔγϣϯ
20. ؀ڥ ɾRuby 2.6.4 ɾRails 6.0.0 ɾWebpacker 4.0.7 ɾVue.js 2.6.10 ɾGoogle Chrome ※Production؀ڥͰىಈͨ͠localhost Ͱॾʑܭଌ͠·ͨ͠
21. Networkͷ஋Λൺֱ ॳճʴ 9ճϦϩʔυͷ10ճ෼ ܭଌ
22. AuditsύωϧͰ First Meaningful Paint΋ൺֱ ܭଌ
23. ᶃAPIΛ༻ҙ͢Δ ᶄDOMʹσʔλΛ΋ͨͤΔ ࣮૷ํ๏
24. APIͷ࣮૷ Controller HTML JS
25. ᶃAPIΛ༻ҙ͢Δ ᶄDOMʹσʔλΛ΋ͨͤΔˠgon ࣮૷ํ๏
26. gonʹ͍ͭͯ
28. DOMʹ஋Λ΋ͨͤΔ࣮૷ Controller HTML JS
29. ݁Ռൃද
30. Request ϦΫΤετճ਺ ʢճʣ ʢճ໨ʣ DOM API
31. Resources Ϧιʔεͷ༰ྔ ʢKBʣ DOM API
32. Transferred సૹྔ ʢKBʣ ʢճ໨ʣ DOM API
33. Finish ϖʔδ͕දࣔ͞ΕΔ·Ͱͷ࣌ؒ ʢKBʣ ʢճ໨ʣ DOM API
34. DOMContentLoaded HTMLͷಡΈࠐ·ΕΔ·Ͱͷ࣌ؒ ʢmsʣ ʢճ໨ʣ DOM API
35. Load ϖʔδͷಡΈࠐΈ͕ऴΘΔ·Ͱͷ࣌ؒ ʢmsʣ ʢճ໨ʣ DOM API
36. First Meaningful Paint ҙຯ͋Δ಺༰͕දࣔ͞ΕΔ࣌ؒ DOM API ʢmsʣ
37. ·ͱΊʢ̍ʗ̎ʣ DOM API Request ⭕ Resources ⭕ Transferred ⭕
38. ·ͱΊʢ̎ʗ̎ʣ DOM API Finish ⭕ DOMContent Loaded ⭕ Load ⭕ First Meaningful Paint ⭕
39. ·ͱΊʢ̎ʗ̎ʣ DOM API Finish DOMContent Loaded ⭕ Load ⭕ First Meaningful Paint දࣔ࢝͠Ί͸API͕ૣ͍
40. ·ͱΊʢ̎ʗ̎ʣ DOM API Finish DOMContent Loaded Load First Meaningful Paint ⭕ Auditsͷ൑ఆ΋API͕ૣ͍
41. ·ͱΊʢ̎ʗ̎ʣ DOM API Finish ⭕ DOMContent Loaded Load First Meaningful Paint දࣔऴΘΓ͸DOM͕ૣ͍
42. APIͷԿ͕஗͍͔ API෦෼ͷऴྃ଴ͪͷ͕࣌ؒ͋Δ HTML: 15ms JSON: 352ms
43. Ͱ͸DOM͸ users(index.html)ʹ ͕͔͔͍࣌ؒͬͯΔ
44. HTMLͷେ͖͞ͱॲཧ࣌ؒ DOM API αΠζ 335KB 818B ࣌ؒ 230ms 15ms DOMʹ஋Λ΋ͨͤΔͱHTMLͷαΠ ζ͕େ͖͘ͳΓॲཧʹ͕͔͔࣌ؒΔ
45. ɾHTMLͷදࣔ͸ૣ͍ ɾHTMLͷදࣔͱσʔλͷड͚౉ ͠දࣔʹ͕࣌ؒࠩ͋Δ APIͰ࣮૷͢Δͱ
46. ɾHTMLͷදࣔ࢝͠Ί͸஗͍ ɾશମ͕දࣔ͠ऴΘΔͷ͸ૣ͍ ɾܭଌπʔϧͷධՁ͕͍͍ͷ͸͜ ͪΒ DOMͷ৔߹
47. API࢖͏ͷͬͯΉ͕ͩଟ͍ͷͰ͸ʁ ௨৴༨ܭʹൃੜ͢Δ͠ HTMLͱJSONͱJSͬͯ༻ҙ͢Δͷ ΋໘౗ͳײ͡ͳΜ͔஗ͦ͏ ๊͍ͨٙ໰
48. ๊͍ͨٙ໰΁ͷ౴͑ Α͘Θ͔Βͳ͍ʂ
49. ʮͳͥ͜͏࣮૷͢Δͷ͔ʯ
 ͱ͍͏൑அཧ༝Λ໌֬ʹ͢Δ͜ͱ ΰʔϧୡ੒ͨ͠ʁ
50. ΰʔϧୡ੒ͨ͠ʁ ҧ͍Λ஌Δ͜ͱ͕Ͱ͖ͨ ·ͩ෼͔Βͳ͍ ΋ͬͱ஌Γ͍ͨ
51. ɾ͜ͷޡࠩ͸ϢʔβʔͷମײʹӨ ڹ͕͋Δ͔ɺ͋ΔͳΒͲͷఔ౓ʁ ΋ͬͱ͔֬Ί͍ͨٙ໰
52. ɾ݅਺͕มΘΔͱͲ͏ͳΔ͔ʁ ɾ΋ͬͱ៛ີʹܭଌ͢Δͱʁ ΋ͬͱ͔֬Ί͍ͨٙ໰
53. ɾܭଌָ͔ͬͨ͠ ɾϑϩϯτʗαʔόʔͷશମΛΈ ͯ࠷దղͳ࣮૷Λ౎౓ߟ͑ΒΑ͏ ʹͳΓ͍ͨ ײ૝
54. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠☺