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

by Retu Fukui

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

ࣗݾ঺հ ෱Ҫ྽c@fukuiretu w גࣜձࣾϐʔεΦϒέΠΫ • since 2015.3 ~ • Engineer w ϑϩϯτΤϯυόοΫΤϯυ ΠϯϑϥͱͳΜͰ΋΍ΔϚϯ w ࠷ۙ͸΋ͬͺΒ(P w ੨৿ࡏॅ w ϦϞʔτϫʔΧʔ @fukuiretu @fukuiretu r82

Slide 3

Slide 3 text

˞ଓฤͰ͢

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

OPUFͷ։ൃ։࢝ #BDLCPOFKT͕ओྲྀ͕ͩͬͨ"OHVMBS+4 ܥ Λ࠾༻ ཧ༝ w XBZCJOEJOH w αʔόʔαΠυΛ"1*ʹઐ೦ˠωΠςΟϒΞϓϦͱڞ༻ w ϦΫϧʔςΟϯά

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

)5.-೿͕ গ͠༨ஊ

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

-BNCEB͕ಥવམͪΔͷר

Slide 20

Slide 20 text

IUUQTHJUIVCDPNBXTMBCTBXTTFSWFSMFTTFYQSFTTJTTVFT

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

هࣄৄࡉϖʔδϦϦʔε

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

ΞδΣϯμ Ͳ͜ʹԿΛॻ͚͹͍͍͔໌֬ʹͳͬͨ w /VYUKTͷن໿ w ෦඼ຖͷ੹຿͕໌֬ w "UPNJD%FTJHOϕʔεͷίϯϙʔωϯτઃܭϧʔϧ w ཻ౓ʹ໊শ͕͋ΔͷͰٞ࿦͕͠΍͍͢ w ݫີʹ΍Γ͗ͣ͢ɺνʔϜͰམͱ͠ॴΛܾΊΔ

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

ΞδΣϯμ ϦΞΫγϣϯ JHOPSF আ֎ର৅ CVH ΞϓϦέʔγϣϯ ͷόά EJTDVT ཁٞ࿦ EVQMJDBUF Ҏલ࢓෼͚ͨ͠ Τϥʔͱॏෳ Τϥʔͷ࢓෼͚Λޮ཰Խ

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

9 performance secrets revealed ύϑΥʔϚϯε

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

2443͸࠾༻͢Δ΂͖

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

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