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ʹ͍ͭͯ

27. None

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. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠☺