Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Retu Fukui
August 17, 2019

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

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

Retu Fukui

August 17, 2019
Tweet

More Decks by Retu Fukui

Other Decks in Technology

Transcript

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

    View Slide

  2. ࣗݾ঺հ
    ෱Ҫ྽[email protected]
    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 ϥΠϒϥϦʢ[email protected]ʣͷܰྔԽ
    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