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

107ba69ff7888cacdb4307a28adf5527?s=47 Retu Fukui
August 17, 2019

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

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

107ba69ff7888cacdb4307a28adf5527?s=128

Retu Fukui

August 17, 2019
Tweet

Transcript

  1. OPUFΛ/VYUKTͰ ࠶ߏஙͨ͠࿩ OE $B5WPMਅՆͷ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 XBZCJOEJOH w αʔόʔαΠυΛ"1*ʹઐ೦ˠωΠςΟϒΞϓϦͱڞ༻ w

    ϦΫϧʔςΟϯά
  9. ϩʔϯνɻ͕ɺঃʑʹ՝୊఺͕ු͖ூΓʹ ٕज़త੒໿ w /PU443ˠॳظද͕ࣔ஗͍ 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 ίʔυεϓϦοςΟϯά
 d63-୯ҐͰগͮͭ͠/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ͷ͓͔͛ͰΊͪΌ଎͘ͳͬͨ ϖʔδͷॳظදࣔ ಛʹ4UBSU3FOEFSͱ4QFFE*OEFY 4UBSU3FOEFSϨϯμϦϯά͕։࢝͞ΕΔ·Ͱʹ͔͔Δ࣌ؒ 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

    OVYUCVJMEŠ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. 27VFKT /VYUKT Λ࢝Ίɺ3FBDU΍"OHVMBS ͳͲ͍ΘΏΔେϑϨʔϜϫʔΫͷ͍ͣΕ͔Λ࢖ͬͯ
 ։ൃ͠ͳ͍ͱμϝ

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

  88. 2443͸࠾༻͢Δ΂͖

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

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

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

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

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

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