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

Transcript

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

2. ࣗݾ঺հ ෱Ҫ
   ྽
   c
   @fukuiretu w גࣜձࣾϐʔεΦϒέΠΫ
   • since 2015.3 ~ • Engineer

   w ϑϩϯτΤϯυ
   
   όοΫΤϯυ
   
   ΠϯϑϥͱͳΜͰ΋΍ΔϚϯ
   w ࠷ۙ͸΋ͬͺΒ(P
   w ੨৿ࡏॅ
   w ϦϞʔτϫʔΧʔ @fukuiretu @fukuiretu r82

3. ˞ଓฤͰ͢

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

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

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

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

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

   ϦΫϧʔςΟϯά

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

   /P
   ίϯϙʔωϯτઃܭϧʔϧ

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

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

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

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

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

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

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

17. w "OHVMBS+4൛ॏϝϯςͱͷਏ͍ઓ͍ʜ
    w 
    '&
    !OJDFEFSZೖࣾ
    ΤϯδχΞ໊ମ੍
    w ΞΫηγϏϦςΟ
    w ίʔυεϓϦοςΟϯά
 
    d
    
    63-୯ҐͰগͮͭ͠/VYUԽ

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

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

20. IUUQTHJUIVCDPNBXTMBCTBXTTFSWFSMFTTFYQSFTTJTTVFT

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    
    OVYU
    CVJME
    ŠBOBMZ[F
    ͰνΣοΫ

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

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

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

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

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

    w ݫີʹ΍Γ͗ͣ͢ɺνʔϜͰམͱ͠ॴΛܾΊΔ

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

49. ΞδΣϯμ $44ͷάϩʔόϧείʔϓ໰୊ͷղফ w 4DPQFE
    $44ͷԸܙ
    
    w ίϯϙʔωϯτ಺ʹTDPQF͸ด͡Δ͕ɺ
 '-0$44ϕʔεͰͷωʔϛϯάΛ࠾༻
    w (SFQBCJMJUZͷ؍఺

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

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

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

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

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

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

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

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

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

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

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

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

62. ΞδΣϯμ ϦΞΫγϣϯ JHOPSF
    আ֎ର৅ CVH
    ΞϓϦέʔγϣϯ ͷόά EJTDVT
    ཁٞ࿦ EVQMJDBUF
    

    Ҏલ࢓෼͚ͨ͠
    Τϥʔͱॏෳ Τϥʔͷ࢓෼͚Λޮ཰Խ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    ෛՙܰݮରࡦҊ

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

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

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

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

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

    PO&SSPS FSS
    w FUDʜ

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

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

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

86. 2
    7VFKT /VYUKT Λ࢝Ίɺ3FBDU΍"OHVMBS
    ͳͲ͍ΘΏΔେϑϨʔϜϫʔΫͷ͍ͣΕ͔Λ࢖ͬͯ
 ։ൃ͠ͳ͍ͱμϝ

87. "
    શવμϝ͡Όͳ͍ͱࢥ͍·͢ʂ w ղܾ͍ͨ͠՝୊ͷຊ࣭ΛݟۃΊͯɺ
 αʔϏε΍νʔϜʹ͋ͬͨબ୒Λ͢Δ͜ͱ͕େࣄɻ
    w ৗʹ࠷৽ͷτϨϯυΛ௥͏ඞཁ͸ͳ͍͕ɺ
 ΑΓ࠷ྑͷબ୒͕͋ΔͷͰ͸ʁ͸ৗʹࣗ໰͠ɺ
 ৘ใऩू͢΂͖ͩͱࢥ͍·͢ɻ

88. 2
    443͸࠾༻͢Δ΂͖

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

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

91. "
    443Λ࢖Θͣͱ΋े෼Ձ஋͕͋Δ͠ɺ
 ࢖Θͣͱ΋ར༻Ͱ͖ΔϞʔυ͕༻ҙ͞Ε͍ͯ·͢ʂ 41" OVYUDPOGJHKTʹNPEF
    TQBΛઃఆ͢Δ͚ͩ
    ੩తαΠτੜ੒ 
    OVYU
    HFOFSBUFΛ࣮ߦ͢Δ͚ͩ

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

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

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