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

Transcript

1. 1.

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

2. 2.

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

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

   ˞ଓฤͰ͢

4. 4.

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

5. 5.

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

6. 6.

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

7. 7.

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

8. 8.

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

   ϦΫϧʔςΟϯά
9. 9.

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

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

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

11. 11.

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

12. 12.

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

13. 13.

    )5.-೿͕ গ͠༨ஊ

14. 14.

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

15. 15.

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

16. 16.

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

17. 17.

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

18. 18.

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

19. 19.

    
    -BNCEB͕ಥવམͪΔͷר

20. 20.

    IUUQTHJUIVCDPNBXTMBCTBXTTFSWFSMFTTFYQSFTTJTTVFT

21. 21.

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

22. 22.

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

23. 23.

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

24. 24.

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

25. 25.

    
    هࣄৄࡉϖʔδϦϦʔε

26. 26.

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

27. 27.

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

28. 28.

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

29. 29.

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

30. 30.

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

31. 31.

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

32. 32.

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

33. 33.

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

34. 34.

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

35. 35.

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

36. 36.

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

37. 37.

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

38. 38.

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

39. 39.

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

40. 40.

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

41. 41.

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

42. 42.

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

    
    OVYU
    CVJME
    ŠBOBMZ[F
    ͰνΣοΫ
43. 43.

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

44. 44.

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

45. 45.

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

46. 46.

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

47. 47.

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

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

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

49. 49.

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

50. 50.

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

51. 51.

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

52. 52.

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

53. 53.

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

54. 54.

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

55. 55.

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

56. 56.

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

57. 57.

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

58. 58.

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

59. 59.

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

60. 60.

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

61. 61.

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

62. 62.

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

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

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

64. 64.

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

65. 65.

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

66. 66.

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

67. 67.

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

68. 68.

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

69. 69.

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

70. 70.

    9 performance secrets revealed 
    ύϑΥʔϚϯε

71. 71.

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

72. 72.

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

73. 73.

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

74. 74.

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

75. 75.

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

76. 76.

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

77. 77.

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

    ෛՙܰݮରࡦҊ
78. 78.

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

79. 79.

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

80. 80.

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

81. 81.

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

82. 82.

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

    PO&SSPS FSS
    w FUDʜ
83. 83.

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

84. 84.

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

85. 85.

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

86. 86.

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

87. 87.

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

88. 88.

    2
    443͸࠾༻͢Δ΂͖

89. 89.

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

90. 90.

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

91. 91.

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

92. 92.

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

93. 93.

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

94. 94.

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