noteをNuxt.jsで再構築した話 -2nd-

2019-08-17 CaT vol.7 真夏のVue.js祭りにてお話してきました。

Transcript

1. OPUFΛ/VYUKTͰ
   ࠶ߏஙͨ͠࿩
   OE
   $B5WPMਅՆͷ7VFKTࡇΓ
   ෱Ҫ྽ |@GVLVJSFUV
   

   View Slide

2. ࣗݾ঺հ
   ෱Ҫ྽c@fukuiretu
   w גࣜձࣾϐʔεΦϒέΠΫ
   • since 2015.3 ~
   
   • Engineer
   
   w ϑϩϯτΤϯυόοΫΤϯυ
   ΠϯϑϥͱͳΜͰ΋΍ΔϚϯ
   w ࠷ۙ͸΋ͬͺΒ(P
   w ੨৿ࡏॅ
   w ϦϞʔτϫʔΧʔ
   @fukuiretu
   @fukuiretu
   r82
   

   View Slide

3. ˞ଓฤͰ͢
   

   View Slide

4. OPUFͷϑϩϯτΤϯυͷาΈ
   /VYUKT΁ͷ࡮৽ΛৼΓฦΔ
   /VYUKTݕ౼தPSಋೖͨͯ͠ͷํ΁
   ΞδΣϯμ
   

   View Slide

5. OPUFͷϑϩϯτΤϯυͷาΈ
   /VYUKT΁ͷ࡮৽ΛৼΓฦΔ
   /VYUKTݕ౼தPSಋೖͨͯ͠ͷํ΁
   ΞδΣϯμ
   

   View Slide

6. 50%0ޙೖΕ
   ΫϦΤΠλʔ͕จষ΍ϚϯΨɺࣸਅɺԻ੠Λ౤ߘ
   ͢Δ͜ͱ͕Ͱ͖ɺϢʔβʔ͸ͦͷίϯςϯπΛָ
   ͠ΜͰԠԉͰ͖ΔϝσΟΞϓϥοτϑΥʔϜ
   

   View Slide

7. ݄ؒΞΫςΟϒϢʔβʔ
   ໿
   1,000ສਓ
   ˞೥݄࣌఺
   

   View Slide

8. OPUFͷ։ൃ։࢝
   #BDLCPOFKT͕ओྲྀ͕ͩͬͨ"OHVMBS+4 ܥ
   Λ࠾༻
   ཧ༝
   w XBZCJOEJOH
   w αʔόʔαΠυΛ"1*ʹઐ೦ˠωΠςΟϒΞϓϦͱڞ༻
   w ϦΫϧʔςΟϯά
   

   View Slide

9. ϩʔϯνɻ͕ɺঃʑʹ՝୊఺͕ු͖ூΓʹ
   ٕज़త੒໿
   w /PU443ˠॳظද͕ࣔ஗͍
   w 3BJMTͷΤίγεςϜΛར༻ͨ͠ϑϩϯτΤϯυ
   ٕज़తෛ࠴
   w /PίʔσΟϯάن໿
   w /Pίϯϙʔωϯτઃܭϧʔϧ
   

   View Slide

10. θϩϕʔεͰ࡮৽Λݕ౼
    طଘͷٕज़ͷԆ௕Ͱ͸ղܾ͕ࠔ೉
    ࠾༻
    

    View Slide

11. /VYUKTͷ࠾༻ཧ༝
    ίϛϡχςΟͷ੝Γ্͕Γ
    ਌͠Έ΍͢͞
    ن໿
    Ϟμϯͳ։ൃ؀ڥ
    ΤΩεύʔτͷίϯαϧ
    

    View Slide

12. '&ઐ໳͕͍ͳͯ͘΋
    ϝϯςφϒϧʹ
    ίϛϡχςΟͷ੝Γ্͕Γ
    ਌͠Έ΍͢͞
    ن໿
    Ϟμϯͳ։ൃ؀ڥ
    ΤΩεύʔτͷίϯαϧ
    /VYUKTͷ࠾༻ཧ༝
    

    View Slide

13. )5.-೿͕
    গ͠༨ஊ
    

    View Slide

14. ! ! !
    ΤϯδχΞc໊
    ! !
    σβΠφʔc໊
    /VYUҠߦνʔϜͷര஀
    ˞'&ઐ໳͸໊
    /VYUҠߦνʔϜ
    

    View Slide

15. /VYUҠߦνʔϜͷϛογϣϯ
    OPUFܑఋͷҠߦ
    w هࣄৄࡉϖʔδ
    w ΫϦΤΠλʔ5PQϖʔδ
    w ϚΨδϯ5PQϖʔδ
    

    View Slide

16. ։ൃϑϩʔ
    िؒ4QSJOU
    λεΫ؅ཧ
    ZenHub
    ;Γ͔͑Γ
    KPT
    ϫʔΫϑϩʔ
    GitHubFlow
    

    View Slide

17. w "OHVMBS+4൛ॏϝϯςͱͷਏ͍ઓ͍ʜ
    w '&!OJDFEFSZೖࣾΤϯδχΞ໊ମ੍
    w ΞΫηγϏϦςΟ
    w ίʔυεϓϦοςΟϯά

    d63-୯ҐͰগͮͭ͠/VYUԽ
    

    View Slide

18. ࣌఺ͷOPUFͷΞʔΩςΫνϟ
    

    View Slide

19. -BNCEB͕ಥવམͪΔͷר
    

    View Slide

20. IUUQTHJUIVCDPNBXTMBCTBXTTFSWFSMFTTFYQSFTTJTTVFT
    

    View Slide

21. ΞδΣϯμ
    ͋Δ೔ಥવਖ਼ৗʹಈ࡞࢝͠Ί͕ͨʜ
    ෆ҆Λ১͑ͣΞʔΩςΫνϟมߋΛݕ౼
    -BNCEB͕ಥવམͪΔͷר
    

    View Slide

22. ΞʔΩςΫνϟͷมߋ
    w 43&!GVUPBTFೖࣾ
    w -BNCEBˠ&MBTUJD#FBOTUBMLʹ
    w บ͸͋Δ͚Ͳ҆ఆӡ༻ͯ͠Δʢͱࢥ͏ʣ
    

    View Slide

23. dݱࡏͷOPUFͷΞʔΩςΫνϟ
    

    View Slide

24. 5ZQF4DSJQUԽΛਐΊΔ
    w '&!NQೖࣾΤϯδχΞ໊ମ੍
    w ίʔυංେԽˠ*'ͷᐆດ͕͞ঃʑʹετϨεʹ
    w 54ͷ஌ݟ͕͋Δ!NQΛத৺ʹஈ֊తʹҠߦ
    

    View Slide

25. هࣄৄࡉϖʔδϦϦʔε
    

    View Slide

26. ϦϦʔεޙʹҰଉ͍͍ͭͯΔγʔϯ
    هࣄৄࡉϖʔδϦϦʔε
    

    View Slide

27. "1*ͷෛՙ෼ࢄͰ͖͓ͯΒͣߴෛՙʹ
    ੾Γ໭͠खॱΛޡΓɺαʔϏεશମ͕མͪΔ࣍ࡂ֐
    ͕ʜແࣄނͱ͸͍͔ͳ͔ͬͨʜ
    ਺೔ޙʹແࣄϦϦʔε
    هࣄৄࡉϖʔδϦϦʔε
    

    View Slide

28. ΫϦΤΠλʔ5PQϖʔδϦϦʔε
    

    View Slide

29. ͓͓Αͦ໨ॲཱ͕ͬͨͷͰ/VYUҠߦνʔϜ͸ղࢄ
    ΫϦΤΠλʔ5PQϖʔδϦϦʔε
    

    View Slide

30. ϚΨδϯ5PQϖʔδϦϦʔε
    

    View Slide

31. /VYUҠߦνʔϜղࢄޙ͸!TOBHBJ͕ҰਓͰॗʑͱ
    To Be Continued…
    ϚΨδϯ5PQϖʔδϦϦʔε
    

    View Slide

32. OPUFͷϑϩϯτΤϯυͷาΈ
    /VYUKT΁ͷ࡮৽ΛৼΓฦΔ
    /VYUKTݕ౼தPSಋೖͨͯ͠ͷํ΁
    ΞδΣϯμ
    

    View Slide

33. ྑ͔ͬͨ͜ͱ
    /VYUKT΁ͷ࡮৽ΛৼΓฦΔ
    

    View Slide

34. 69ͷ޲্
    %9ͷ޲্
    ϦϦʔε࣌ͷਫ਼ਆతΏͱΓ
    Τϥʔͷݕ஌ͱ࢓૊ΈԽ
    ྑ͔ͬͨ͜ͱc/VYUKT΁ͷ࡮৽ΛৼΓฦΔ
    

    View Slide

35. 69ͷ޲্
    ྑ͔ͬͨ͜ͱc/VYUKT΁ͷ࡮৽ΛৼΓฦΔ
    

    View Slide

36. ϖʔδͷॳظදࣔ
    69ͷ޲্
    

    View Slide

37. 443ͷ͓͔͛ͰΊͪΌ଎͘ͳͬͨ
    ϖʔδͷॳظදࣔ
    ಛʹ4UBSU3FOEFSͱ4QFFE*OEFY
    4UBSU3FOEFSϨϯμϦϯά͕։࢝͞ΕΔ·Ͱʹ͔͔Δ࣌ؒ
    4QFFE*OEFYίϯςϯπ͕໨ʹݟ͑Δঢ়ଶʹͳΔ·Ͱͷ࣌ؒ
    

    View Slide

38. "OHVMBS+4൛
    /VYUKT൛ ࣌఺
    
    8FC1BHF5FTUͷൺֱ
    

    View Slide

39. /VYUKT൛ ࣌఺
    
    /VYUKT൛ ࣌఺
    
    8FC1BHF5FTUͷൺֱ
    

    View Slide

40. "OHVMBS+4൛
    /VYUKT൛ ࣌఺
    
    -JHIUIPVTFͷൺֱ
    

    View Slide

41. /VYUKT൛ ࣌఺
    
    /VYUKT൛ ࣌఺
    
    -JHIUIPVTFͷൺֱ
    

    View Slide

42. ࣌఺͔ΒͷύϑΥʔϚϯε޲্ཁҼ
    w -BNCEBˠ&MBTUJD#FBOTUBML
    w /VYUKTͷόʔδϣϯΞοϓ
    w ίʔυεϓϦοςΟϯά
    w ϥΠϒϥϦʢOPEF@NPEVMFTʣͷܰྔԽ
    w OVYUCVJMEŠBOBMZ[FͰνΣοΫ
    

    View Slide

43. ϒϥ΢βόοΫ࣌ͷεΫϩʔϧҐஔ
    69ͷ޲্
    

    View Slide

44. 
    "OHVMBS+4൛͸ผ΢Πϯυ΢Ͱ։͍͍ͯͨ
    εΫϩʔϧҐஔ͕อ࣋͞ΕΔΑ͏ʹͳͬͨ
    ϒϥ΢βόοΫ࣌ͷεΫϩʔϧҐஔ
    

    View Slide

45. %9ͷ޲্
    ྑ͔ͬͨ͜ͱc/VYUKT΁ͷ࡮৽ΛৼΓฦΔ
    

    View Slide

46. Ͳ͜ʹԿΛॻ͚͹͍͍͔໌֬ʹͳͬͨ
    %9ͷ޲্
    

    View Slide

47. ΞδΣϯμ
    Ͳ͜ʹԿΛॻ͚͹͍͍͔໌֬ʹͳͬͨ
    w /VYUKTͷن໿
    w ෦඼ຖͷ੹຿͕໌֬
    w "UPNJD%FTJHOϕʔεͷίϯϙʔωϯτઃܭϧʔϧ
    w ཻ౓ʹ໊শ͕͋ΔͷͰٞ࿦͕͠΍͍͢
    w ݫີʹ΍Γ͗ͣ͢ɺνʔϜͰམͱ͠ॴΛܾΊΔ
    

    View Slide

48. $44ͷάϩʔόϧείʔϓ໰୊ͷղফ
    %9ͷ޲্
    

    View Slide

49. ΞδΣϯμ
    $44ͷάϩʔόϧείʔϓ໰୊ͷղফ
    w 4DPQFE$44ͷԸܙ
    w ίϯϙʔωϯτ಺ʹTDPQF͸ด͡Δ͕ɺ

    '-0$44ϕʔεͰͷωʔϛϯάΛ࠾༻
    w (SFQBCJMJUZͷ؍఺
    

    View Slide

50. ΞδΣϯμ
    FH
    "UPNJD%FTJHOͷཻ౓ͷ಄จࣈlzίϯϙʔωϯτ໊
    $44ͷάϩʔόϧείʔϓ໰୊ͷղফ
    

    View Slide

51. ϦϦʔε࣌ͷਫ਼ਆతΏͱΓ
    ྑ͔ͬͨ͜ͱc/VYUKT΁ͷ࡮৽ΛৼΓฦΔ
    

    View Slide

52. 63-୯ҐͰͷҠߦ
    ϦϦʔε࣌ͷਫ਼ਆతΏͱΓ
    

    View Slide

53. ΞδΣϯμ
    63-୯ҐͰͷҠߦ
    ϏοΫόϯϦϦʔεΛආ͚Δͷ͸ఆੴ͕ͩʜ
    63-୯ҐΑΓখ͞ͳϦϦʔεʹ͸Ͱ͖ͳ͍
    

    View Slide

54. ΞδΣϯμ
    63-୯ҐͰͷҠߦ
    ࣄނͬͯ΋"OHVMBS+4൛ʹ͙͢ʹ੾Γସ͑ΕΔ҆৺ײ
    ੾Γସ͑࡞ۀ͸$MPVE'SPOUͷઃఆมߋͷΈ
    ਫ਼ਆతΏͱΓ
    

    View Slide

55. Τϥʔͷݕ஌ͱ࢓૊ΈԽ
    ྑ͔ͬͨ͜ͱc/VYUKT΁ͷ࡮৽ΛৼΓฦΔ
    

    View Slide

56. ΞδΣϯμ
    Τϥʔͷݕ஌
    &MBTUJD#FBOTUBML
    αʔόʔαΠυͷΤϥʔΛૹ৴
    ΫϥΠΞϯταΠυͷΤϥʔΛૹ৴
    Τϥʔ༻ͷνϟϯωϧʹ௨஌
    

    View Slide

57. ΞδΣϯμ
    ΫϦςΟΧϧͳΤϥʔҎ֎͸์ஔ͞Ε͕ͪʜ
    ౰൪੍ͰεϓϨουγʔτʹΤϥʔϩάΛ
    ϓʔϧ͠ɺఆظతʹ୨Է͠
    Τϥʔͷݕ஌
    

    View Slide

58. ΞδΣϯμ
    ౰൪੍
    ͰࣗಈԽ
    εϓϨουγʔτ
    ΁ͷॻ͖ࠐΈ
    Ͱޮ཰Խ
    ࣗಈԽɾޮ཰Խ
    

    View Slide

59. ΞδΣϯμ
    ౰൪ͷϩʔςγϣϯΛࣗಈԽ
    

    View Slide

60. ΞδΣϯμ
    ".ʹىಈ
    લճͷ౰൪ऀͷ
    ΠϯσοΫεΛऔಘ
    ࠓճͷ౰൪ऀͷ
    4MBDL*%Λऔಘ
    ࠓճͷ౰൪ऀͷ
    ΠϯσοΫεΛอଘ
    4MBDLʹ౰൪Λ௨஌
    ౰൪ͷϩʔςγϣϯΛࣗಈԽ
    

    View Slide

61. ΞδΣϯμ
    Τϥʔͷ࢓෼͚Λޮ཰Խ
    ಛఆͷϦΞΫγϣϯΛϑοΫͯ͠
    εϓϨουγʔτʹॻ͖ࠐΈ
    

    View Slide

62. ΞδΣϯμ
    ϦΞΫγϣϯ
    JHOPSF
    আ֎ର৅
    CVH
    ΞϓϦέʔγϣϯ
    ͷόά
    EJTDVT
    ཁٞ࿦
    EVQMJDBUF
    Ҏલ࢓෼͚ͨ͠
    Τϥʔͱॏෳ
    Τϥʔͷ࢓෼͚Λޮ཰Խ
    

    View Slide

63. ΞδΣϯμ
    Τϥʔϩάਫ਼ࠪͷ࢓૊ΈԽ
    ࡁͱඋߟҎ֎͸ࣗಈೖྗ͞ΕΔ
    

    View Slide

64. ΞδΣϯμ
    ࠓޙͷ՝୊
    /VYUKT΁ͷ࡮৽ΛৼΓฦΔ
    

    View Slide

65. ύϑΥʔϚϯε
    εέʔϥϏϦςΟ
    ϝϯςφϏϦςΟ
    ࠓޙͷ՝୊c/VYUKT΁ͷ࡮৽ΛৼΓฦΔ
    

    View Slide

66. ύϑΥʔϚϯε
    ࠓޙͷ՝୊c/VYUKT΁ͷ࡮৽ΛৼΓฦΔ
    

    View Slide

67. ը૾͕ॏ͍
    ύϑΥʔϚϯε
    

    View Slide

68. 1BHF4QFFE*OTJHIUTͰͷղੳ݁Ռ
    ը૾͕ॏ͍
    Ϩεϙϯγϒʹը૾Λ࠷దԽ͢Δػӡ
    

    View Slide

69. Ұ෦Ͱ Λݕূத
    ը૾͕ॏ͍
    

    View Slide

70. 9 performance secrets revealed
    ύϑΥʔϚϯε
    

    View Slide

71. ݩωλ
    https://slides.com/akryum/vueconfus-2019#/
    

    View Slide

72. Functional components
    GVODUJPOBMΛ෇͚Δ͚ͩ
    https://slides.com/akryum/vueconfus-2019#/3
    

    View Slide

73. εςʔτϨεͰϥΠϑαΠΫϧෆཁͳ
    ίϯϙʔωϯτ͸શͯஔ͖׵͑ΒΕΔʢϋζʣ
    Functional components
    

    View Slide

74. εέʔϥϏϦςΟ
    ࠓޙͷ՝୊c/VYUKT΁ͷ࡮৽ΛৼΓฦΔ
    

    View Slide

75. /PEFKTαʔόʔͷෛՙܰݮ
    εέʔϥϏϦςΟ
    

    View Slide

76. /PEFKTαʔόʔͷෛՙܰݮ
    هࣄ͕όζΔ
    Φʔτεέʔϧ͕௥͍͔ͭͣʹαʔϏεఀࢭ
    ઈରʹආ͚͍ͨʂʂ
    

    View Slide

77. w $%/ͷ&EHFͰ͍͍ײ͡ʹ
    w 4FSWJDF8PSLFS 8PSLCPY
    Ͱ͍͍ײ͡ʹ
    w ίϯϙʔωϯτͷΩϟογϡΛ͍͍ײ͡ʹ
    w هࣄ୯ҐͰΞΫηε੍ݶʢΛฦ͢ʣ
    ෛՙܰݮରࡦҊ
    

    View Slide

78. ϝϯςφϏϦςΟ
    ࠓޙͷ՝୊c/VYUKT΁ͷ࡮৽ΛৼΓฦΔ
    

    View Slide

79. "1*ϦΫΤετॲཧͷந৅Խ
    ϝϯςφϏϦςΟ
    

    View Slide

80. ݩωλ
    https://slides.com/nakajmg/replace-axios-module#/
    

    View Slide

81. ݱঢ়
    OVYUDPNNVOJUZBYJPTNPEVMFΛར༻
    FHετΞ͔Βͷར༻ྫ
    

    View Slide

82. nuxt-community/axios-module
    w ίϯϙʔωϯτ΍ετΞ͔ΒUIJTͰࢀরͰ͖͓ͯखܰ
    w Πϯλʔηϓλʔ͕༻ҙ͞Εͯͯศར
    w PO3FRVFTU DPOGJH
    
    w PO&SSPS FSS
    
    w FUDʜ
    

    View Slide

83. Կ͕໰୊͔
    w ΤϯυϙΠϯτ΍ύϥϝʔλมߋ
    w IUUQΫϥΠΞϯτมߋ
    "1*ϦΫΤετॲཧ͕ࢄࡒ͠มߋʹऑ͘Մಡੑ͕௿͍
    

    View Slide

84. Ͳ͏͍͔ͨ͠
    "1*௨৴༻ͷήʔτ΢ΣΠΛڬΉ
    ΤϯυϙΠϯτຖʹؔ਺Խ
    มߋՕॴΛ࠷খݶʹ཈͑ΒΕ͔ͭՄಡੑ্͕͕Δ
    

    View Slide

85. OPUFͷϑϩϯτΤϯυͷาΈ
    /VYUKT΁ͷ࡮৽ΛৼΓฦΔ
    /VYUKTݕ౼தPSಋೖͨͯ͠ͷํ΁
    ΞδΣϯμ
    

    View Slide

86. 27VFKT /VYUKT
    Λ࢝Ίɺ3FBDU΍"OHVMBS
    ͳͲ͍ΘΏΔେϑϨʔϜϫʔΫͷ͍ͣΕ͔Λ࢖ͬͯ

    ։ൃ͠ͳ͍ͱμϝ
    

    View Slide

87. "શવμϝ͡Όͳ͍ͱࢥ͍·͢ʂ
    w ղܾ͍ͨ͠՝୊ͷຊ࣭ΛݟۃΊͯɺ

    αʔϏε΍νʔϜʹ͋ͬͨબ୒Λ͢Δ͜ͱ͕େࣄɻ
    w ৗʹ࠷৽ͷτϨϯυΛ௥͏ඞཁ͸ͳ͍͕ɺ

    ΑΓ࠷ྑͷબ୒͕͋ΔͷͰ͸ʁ͸ৗʹࣗ໰͠ɺ

    ৘ใऩू͢΂͖ͩͱࢥ͍·͢ɻ
    

    View Slide

88. 2443͸࠾༻͢Δ΂͖
    

    View Slide

89. w ϢχόʔαϧରԠͰ։ൃίετ
    w /PEFKTαʔόʔͷӡ༻Ͱӡ༻ίετ
    "αʔϏεͷಛੑ্ɺຊ౰ʹඞཁ͔Ͳ͏͔ۛຯ͠ɺ
    ۃྗ࠾༻͠ͳ͍΂͖ͩͱࢥ͍·͢ʂ
    ࠾༻͢Δ৔߹ͷτϨʔυΦϑ
    

    View Slide

90. 2443Λ࠾༻͠ͳ͍৔߹͸
    /VYUKT͸࢖Θͳ͍΂͖
    

    View Slide

91. "443Λ࢖Θͣͱ΋े෼Ձ஋͕͋Δ͠ɺ

    ࢖Θͣͱ΋ར༻Ͱ͖ΔϞʔυ͕༻ҙ͞Ε͍ͯ·͢ʂ
    41"
    OVYUDPOGJHKTʹNPEFTQBΛઃఆ͢Δ͚ͩ
    ੩తαΠτੜ੒
    OVYUHFOFSBUFΛ࣮ߦ͢Δ͚ͩ
    

    View Slide

92. $44/JUF"PNPSJWPM
    ૣׂ͋Γ·͢ʂ
    http://cssnite-aomori.net/vol12/
    

    View Slide

93. 7VF'FT
    اۀϒʔεͰ͓଴͓ͪͯ͠Γ·͢
    https://vuefes.jp/2019/
    

    View Slide

94. ͋Γ͕ͱ͏͍͟͝·ͨ͠
    ΤϯδχΞશํҐͰืूத
    https://www.wantedly.com/companies/pieceofcake/projects
    

    View Slide