data_between_rails_and_javascript.pdf

Transcript

1. Rails ͱ JSͷσʔλڮ౉͠
   ʹ͍ͭͯߟ͑ͯΈͨ
   2019/09/12 ۜ࠲Rails#13
   ۚࢠܚࢠ @neko314
   

   View Slide

2. ɾ@neko314 / @neko314_
   ɾ࣌ʑNerima.rb΍ͬͯ·͢
   ɾAsakura.rb
   ͔ΒࢀΓ·ͨ͠
   ࣗݾ঺հ
   

   View Slide

3. ΞΫτΠϯσΟͰಇ͍ͯ·͢
   

   View Slide

4. چλΠτϧ
   ʮJS Lv.1͚ͩͲRailsΞϓϦ্Ͱͷ
   Vue.jsͷΑ͍ॻ͖ํΛௐ΂ͯΈͨʯ
   λΠτϧ࠮ٗʢະ਱ʣͰͨ͠!
   

   View Slide

5. ❌RailsͱVue.jsͷ࿩
   ⭕RailsͱJavaScriptͷ࿩
   ్தͰม͑ͨ
   มΘͬͯ͠·͍·ͨ͠
   

   View Slide

6. Rails ˱ JavaScript

   σʔλͷड͚౉͠ʹ͍ͭͯ
   ࿩͢͜ͱ
   

   View Slide

7. ʮͳͥ͜͏࣮૷͢Δͷ͔ʯ

   ͱ͍͏൑அཧ༝Λ໌֬ʹ͢Δ͜ͱ
   ํ๏࿦
   ΰʔϧ
   

   View Slide

8. ۀ຿ͰVue.jsΛ࢖͍ҰཡΛ࡞ͬͨ
   ʮ͜͏΍Ε͹Ͱ͖ΔʯͰ࣮૷ͨ͠
   ͜ͷ··Ͱ͍Δͷ͸͍΍ͩͬͨ
   ͳͥ͜ͷ࿩Λʁ
   

   View Slide

9. ᶃAPIΛ༻ҙ͢Δ
   ᶄDOMʹσʔλΛ΋ͨͤΔ
   ࣮૷ํ๏
   

   View Slide

10. ᶃAPIΛ༻ҙ͢Δ
    ᶄDOMʹσʔλΛ΋ͨͤΔ
    ࣮૷ํ๏
    ۀ຿Ͱॻ͍ͨ
    ͷ͸ͪ͜Β
    

    View Slide

11. API࢖͏ͷͬͯΉ͕ͩଟ͍ͷͰ͸ʁ
    ௨৴༨ܭʹൃੜ͢Δ͠
    HTMLͱJSONͱJSͬͯ༻ҙ͢Δͷ
    ΋໘౗ͳײ͡ͳΜ͔஗ͦ͏
    ๊͍ͨٙ໰
    

    View Slide

12. DOMͷํͰ΍ͬͨ΄͏͕
    Α͔ͬͨΓ͢ΔͷͰ͸ɾɾɾʁ
    ๊͍ͨٙ໰
    

    View Slide

13. Ͱ͸ɺܭଌͯ͠ΈΑ͏
    

    View Slide

14. ɾRails → JS
    - ࢀর
    ɾJS →Rails
    - ࡞੒ɾߋ৽ɾ࡟আ
    ݕূ಺༰
    

    View Slide

15. ɾRails → JS
    - ࢀর
    ɾJS →Rails
    - ࡞੒ɾߋ৽ɾ࡟আ
    ݕূ಺༰
    ٙ໰ʹج͖ͮ
    ࠓճ͸ͪ͜Β
    

    View Slide

16. ɾύϑΥʔϚϯε
    ɾσʔλͷ੔߹ੑ
    ɾ࣮૷΍ϝϯς͠΍͢͞
    ݕূج४
    

    View Slide

17. ɾύϑΥʔϚϯε
    ɾσʔλͷ੔߹ੑ
    ɾ࣮૷΍ϝϯς͠΍͢͞
    ݕূج४
    ಉ͘͡ࠓճ͸
    ͪ͜Β
    

    View Slide

18. αϯϓϧΞϓϦΛ࡞ͬͯ
    ҧ͍Λൺֱ
    ݕূํ๏
    

    View Slide

19. ࡞ͬͨ΋ͷ
    ɾϢʔβʔ1,000݅
    ɾJSଆͰϖʔδ
    ωʔγϣϯ
    

    View Slide

20. ؀ڥ
    ɾRuby 2.6.4
    ɾRails 6.0.0
    ɾWebpacker 4.0.7
    ɾVue.js 2.6.10
    ɾGoogle Chrome
    ※Production؀ڥͰىಈͨ͠localhost
    Ͱॾʑܭଌ͠·ͨ͠
    

    View Slide

21. Networkͷ஋Λൺֱ
    ॳճʴ 9ճϦϩʔυͷ10ճ෼
    ܭଌ
    

    View Slide

22. AuditsύωϧͰ
    First Meaningful Paint΋ൺֱ
    ܭଌ
    

    View Slide

23. ᶃAPIΛ༻ҙ͢Δ
    ᶄDOMʹσʔλΛ΋ͨͤΔ
    ࣮૷ํ๏
    

    View Slide

24. APIͷ࣮૷
    Controller
    HTML
    JS
    

    View Slide

25. ᶃAPIΛ༻ҙ͢Δ
    ᶄDOMʹσʔλΛ΋ͨͤΔˠgon
    ࣮૷ํ๏
    

    View Slide

26. gonʹ͍ͭͯ
    

    View Slide

27. View Slide

28. DOMʹ஋Λ΋ͨͤΔ࣮૷
    Controller
    HTML
    JS
    

    View Slide

29. ݁Ռൃද
    

    View Slide

30. Request
    ϦΫΤετճ਺
    ʢճʣ
    ʢճ໨ʣ
    DOM API
    

    View Slide

31. Resources
    Ϧιʔεͷ༰ྔ
    ʢKBʣ DOM API
    

    View Slide

32. Transferred
    సૹྔ
    ʢKBʣ
    ʢճ໨ʣ
    DOM API
    

    View Slide

33. Finish
    ϖʔδ͕දࣔ͞ΕΔ·Ͱͷ࣌ؒ
    ʢKBʣ
    ʢճ໨ʣ
    DOM API
    

    View Slide

34. DOMContentLoaded
    HTMLͷಡΈࠐ·ΕΔ·Ͱͷ࣌ؒ
    ʢmsʣ
    ʢճ໨ʣ
    DOM API
    

    View Slide

35. Load
    ϖʔδͷಡΈࠐΈ͕ऴΘΔ·Ͱͷ࣌ؒ
    ʢmsʣ
    ʢճ໨ʣ
    DOM API
    

    View Slide

36. First Meaningful Paint
    ҙຯ͋Δ಺༰͕දࣔ͞ΕΔ࣌ؒ
    DOM API
    ʢmsʣ
    

    View Slide

37. ·ͱΊʢ̍ʗ̎ʣ
    DOM API
    Request ⭕
    Resources ⭕
    Transferred ⭕
    

    View Slide

38. ·ͱΊʢ̎ʗ̎ʣ
    DOM API
    Finish ⭕
    DOMContent
    Loaded
    ⭕
    Load ⭕
    First Meaningful
    Paint
    ⭕
    

    View Slide

39. ·ͱΊʢ̎ʗ̎ʣ
    DOM API
    Finish
    DOMContent
    Loaded
    ⭕
    Load ⭕
    First Meaningful
    Paint
    දࣔ࢝͠Ί͸API͕ૣ͍
    

    View Slide

40. ·ͱΊʢ̎ʗ̎ʣ
    DOM API
    Finish
    DOMContent
    Loaded
    Load
    First Meaningful
    Paint
    ⭕
    Auditsͷ൑ఆ΋API͕ૣ͍
    

    View Slide

41. ·ͱΊʢ̎ʗ̎ʣ
    DOM API
    Finish ⭕
    DOMContent
    Loaded
    Load
    First Meaningful
    Paint
    දࣔऴΘΓ͸DOM͕ૣ͍
    

    View Slide

42. APIͷԿ͕஗͍͔
    API෦෼ͷऴྃ଴ͪͷ͕࣌ؒ͋Δ
    HTML: 15ms
    JSON: 352ms
    

    View Slide

43. Ͱ͸DOM͸
    users(index.html)ʹ
    ͕͔͔͍࣌ؒͬͯΔ
    

    View Slide

44. HTMLͷେ͖͞ͱॲཧ࣌ؒ
    DOM API
    αΠζ 335KB 818B
    ࣌ؒ 230ms 15ms
    DOMʹ஋Λ΋ͨͤΔͱHTMLͷαΠ
    ζ͕େ͖͘ͳΓॲཧʹ͕͔͔࣌ؒΔ
    

    View Slide

45. ɾHTMLͷදࣔ͸ૣ͍
    ɾHTMLͷදࣔͱσʔλͷड͚౉
    ͠දࣔʹ͕࣌ؒࠩ͋Δ
    APIͰ࣮૷͢Δͱ
    

    View Slide

46. ɾHTMLͷදࣔ࢝͠Ί͸஗͍
    ɾશମ͕දࣔ͠ऴΘΔͷ͸ૣ͍
    ɾܭଌπʔϧͷධՁ͕͍͍ͷ͸͜
    ͪΒ
    DOMͷ৔߹
    

    View Slide

47. API࢖͏ͷͬͯΉ͕ͩଟ͍ͷͰ͸ʁ
    ௨৴༨ܭʹൃੜ͢Δ͠
    HTMLͱJSONͱJSͬͯ༻ҙ͢Δͷ
    ΋໘౗ͳײ͡ͳΜ͔஗ͦ͏
    ๊͍ͨٙ໰
    

    View Slide

48. ๊͍ͨٙ໰΁ͷ౴͑
    Α͘Θ͔Βͳ͍ʂ
    

    View Slide

49. ʮͳͥ͜͏࣮૷͢Δͷ͔ʯ

    ͱ͍͏൑அཧ༝Λ໌֬ʹ͢Δ͜ͱ
    ΰʔϧୡ੒ͨ͠ʁ
    

    View Slide

50. ΰʔϧୡ੒ͨ͠ʁ
    ҧ͍Λ஌Δ͜ͱ͕Ͱ͖ͨ
    ·ͩ෼͔Βͳ͍
    ΋ͬͱ஌Γ͍ͨ
    

    View Slide

51. ɾ͜ͷޡࠩ͸ϢʔβʔͷମײʹӨ
    ڹ͕͋Δ͔ɺ͋ΔͳΒͲͷఔ౓ʁ
    ΋ͬͱ͔֬Ί͍ͨٙ໰
    

    View Slide

52. ɾ݅਺͕มΘΔͱͲ͏ͳΔ͔ʁ
    ɾ΋ͬͱ៛ີʹܭଌ͢Δͱʁ
    ΋ͬͱ͔֬Ί͍ͨٙ໰
    

    View Slide

53. ɾܭଌָ͔ͬͨ͠
    ɾϑϩϯτʗαʔόʔͷશମΛΈ
    ͯ࠷దղͳ࣮૷Λ౎౓ߟ͑ΒΑ͏
    ʹͳΓ͍ͨ
    ײ૝
    

    View Slide

54. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠☺
    

    View Slide