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

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

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