Railsアップグレード / UIリニューアル 「レガシーコード改善」の道のり

スタディストで実施しました、Railsアップグレード、UIリニューアルを通じてどのように「レガシーコード改善」に立ち向かったかについてまとめています

Transcript

1. 3 ) 12 3 / 2 ) 9 0( 10 3 ( ( /
2. 2 0.*( 
    !0. +/)
   $
   -1
   & , ' %#" 0.  1200 kcal
3. 3 
    R 4 /
4. 4 l l l / 
   
5. 5 studist
   
6. 6 $  
   !  # !   " 
   
7. 7 %( l, 
    !) l*
   #
   $'" *+ - &  
   
8. 8 
    7JTVBM
   401
   NBOBHFNFOU
   1MBUGPSN ϏδϡΞϧϕʔεͷखॱॻΛɺ ΋ͬͱ؆୯ʹ 
   
9. 9 SOP
   
10. 10 $PQZSJHIU
    $
     4UVEJTU
    $PSQPSBUJPO
    "MM
    3JHIUT
    3FTFSWFE $POGJEFOUJBM 401͕͋ͬͨͱͯ͠΋ɺ จࣈͩΒ͚Ͱ͸ػೳෆશɺखॱ͕ਖ਼͘͠఻ΘΒͳ͍ ֎ࠃਓ ಡΊͳ͍ ಡΉͷ ͍ͨ΁Μ ·͕ͪ͑ ΍͍͢ ཧղ ͠ʹ͍͘ Θ͔Γʹ͍͘΋ͷ͸ɺ࡞ۀΛਖ਼͘͠࠶ݱͰ͖ͳ͍ɻ7JTVBMϕʔε͕ඞਢ 
11. 11 $PQZSJHIU
    $
     4UVEJTU
    $PSQPSBUJPO
    "MM
    3JHIUT
    3FTFSWFE $POGJEFOUJBM 401Λ࠶ൃ໌͢Δ  จࣈϕʔε401ʢඪ४࡞ۀखॱॻʣΛ࠶ൃ໌ɺ7JTVBM
    401Λ૑Γग़͢ 7JTVBM
    401 จࣈΛಡ·ͣͱ΋खॱ͕఻ΘΔ ैདྷͷ 401
12. 12 
     $PQZSJHIU
    $
     4UVEJTU
    $PSQPSBUJPO
    "MM
    3JHIUT
    3FTFSWFE $POGJEFOUJBM 5FBDINF
    #J[
    
    7JTVBM
    401
    NBOBHFNFOU
    1MBUGPSN  ύιίϯΛҰ੾࢖ΘͣɺεϚʔτϑΥϯ͚ͩͰ ϏδϡΞϧϕʔεͷखॱॻΛ ࡞੒ɺ഑৴ ɺ Ӿཡ؅ཧ ·ͰՄೳ λϒϨοτ εϚϗ͚ͩ΋ ࡞੒͕Մೳ ΋ͪΖΜ ύιίϯ΋ 0,
13. 13 $PQZSJHIU
    $
     4UVEJTU
    $PSQPSBUJPO
    "MM
    3JHIUT
    3FTFSWFE $POGJEFOUJBM 5FBDINF
    #J[ͷλʔήοτۀछʢΦϖϨʔγϣϯΛ࿑ಇू໿ܕͰӡӦ͍ͯ͠Δۀछʣ  ੡଄ۀ ं྆੡଄ɺݐઃػցɺ෦඼Ճ޻ ͔ΒԽֶϓϥϯτ౳ͷاۀ༷ ॅ༑Խֶ༷ɺੴҪ޻࡞ݚڀॴ༷ ͳͲ খചۀ ஍৔εʔύʔɺυϥοάɺඦ՟ళ ઐ໳ళΛӡӦ͍ͯ͠Δاۀ༷ ϕΠγΞ༷ɺ෋࢜ༀ඼༷ɺ খాٸඦ՟ళ༷ɺจ໌ಊ༷ͳͲ ҿ৯ۀ νΣʔϯల։͍ͯ͠Δҿ৯ۀɺ ΧϑΣ౳ΛӡӦ͍ͯ͠Δاۀ༷ ͔͍͢Βʔ༷͘ɺ+3౦೔ຊϑʔυ༷ ໦ી࿏༷ɺΩϦϯγςΟ༷ͳͲ ॓ധۀ νΣʔϯల։͍ͯ͠Δ॓ധࢪઃ ࢪઃӡӦΛडୗ͍ͯ͠Δاۀ༷ ੕໺Ϧκʔτ༷ɺϫγϯτϯϗςϧϓ ϥβ༷ɺϑΥϧπΞ༷ͳͲ ෺ྲྀۀ τϥοΫ౳ͷ෺ྲྀ͔Βྲྀ௨ ηϯλʔΛӡӦ͍ͯ͠Δاۀ༷ ϠϚτάϧʔϓ֤༷ࣾɺ҆ా૔ݿ༷ ϫίʔϧྲྀ௨༷ͳͲ Ϗϧϝϯςφϯε ࢪઃͷਗ਼૟ɺϏϧઃඋػցͷอक ఺ݕۀ຿Λडୗ͍ͯ͠Δاۀ༷ ΠΦϯσΟϥΠτ༷ɺେ੒גࣜձ༷ࣾ ΞΠϯά༷ͳͲ Ξϛϡʔζϝϯτ εϙʔπɾޘָࢪઃήʔϜ ηϯλʔ౳ΛӡӦ͍ͯ͠Δاۀ༷ ηΨ༷ɺϥ΢ϯυϫϯ༷ ϧωαϯε༷ͳͲ
14. 14 2% !,. ? :;>8  76@
    *' 0- 5  76@ )1  ( + +/"$ 3<&#=49 )1 
    
15. 15    
    
16. 16 !, 15/6 *+4)  &7"  ' $( 02
    #  %.783-- 
    
17. 17  
    
18. 18 ఻͑Δ͜ͱΛɺ΋ͬͱ؆୯ʹɻ IUUQTTUVEJTUKQ
19. 19    l  
    
     l  
    
       l    l
      l   
20. 20 
    
    
21. 21 
    
     
       
               ͟Θɾɾ͟Θɾɾ͟Θɾɾ  
    
      
     
22. 22   
         
           !
23. 23 
    
         
    
    
24. 24 *(+&,0&,   823  > 
    #-'"%+75
    !$.)/1 23 *(+
    49 &,= :; ?6  *(+ 
    &,A  0 @< 
    
    
25. 25     
    
    
    
26. 26 
    
      
27. 27   
    
       
    
      1
28. 28
    
        http://bit.ly/2TyH542
29. 29 
     
    
       
30. 30 
    
    
       
31. 31 
     
    
      2
32. 32 l 2 A 2 7 l - l I 0 1 l 8 8 
    
33. 33 
      
    
34. 34 Controller view model Javascript css Rails Ruby U HTML I javascript css JQuery DOM 
    
35. 35 
      Controller view model component Rails    
      Vue.js action state mutation     
36. 36    l 
    
    l ) l  ( )- K I V I U M P
37. 37 
      
    
    
38. 38 l 8 0 l ( l % )  
    
    
39. 39 ! l   l I - - l - l # " l - l - d l i e l  
     l U U -
40. 40  
    
      
      http://bit.ly/2F5sq6u
41. 41  
    
    
     http://bit.ly/2F4efhF
42. 42 
      
    
43. 43 U Controller model Rails 
     I API ver1 API I UI (
    ) I UI I API
    • -API • http status
44. 44   
    
    
    -
45. 45 I Controller model Rails I 
      I API ver1 UI V2 API ver2 blueprint U -
46. 46 
      -
47. 47 
     -
48. 48 l l - l -
49. 49 - l l -
50. 50 - l I - IA P -
51. 51 
     -
52. 52 - 1 - Controller API ver1 API ver2 model
53. 53 -
    - U DB Controller API ver1 API ver2 model front I
54. 54 - / model controller concern concern service service single multi I -
55. 55 
       -
56. 56 -
57. 57 -
58. 58 l 6 l 10 31.. 36 % 1 .6 ) l 35 1 12 6) l 8% 6 % 6( -
59. 59 ) ( - 95-90th - 0.2 99th - 1
60. 60 
     -
61. 61 
     I U Controller API ver1 - API ver2 V2 model blueprint
62. 62 / )(
    5#3.$'6 l 0+ 47 l 5# $'  l -!*2%, 
    1 "&47   -
63. 63  
    
     l %#   " l    !$& -
64. 64 
    
65. 65 &! %*1#"$3. l #"$
    %8  ' 6 %025(  l #"$
    ,/  %4   7-    7)+  
    
66. 66 
    
67. 67 
     B