NuxtとFirebaseでSSRのWebアプリを作ってみた

by yusuke_yamashita

Slide 1

Slide 1 text

୭΋͕؆୯ʹ·Δ͹ͭΫΠζΛ࡞ΕͪΌ͏ /VYUʷpSFCBTFͰ443ͷ XFCΞϓϦΛ࡞ͬͯݟͨ גࣜձࣾ-JWFTFOTFࢁԼ༔հ!IBOE@L

Slide 2

Slide 2 text

୭΋͕؆୯ʹ·Δ͹ͭΫΠζΛ࡞ΕͪΌ͏ ࢁԼ༔հ!IBOE@L גࣜձࣾ-JWFTFOTFͷαʔόʔαΠυΤϯδχΞ XFCαʔϏε͕޷͖ͰɺݸਓͰ΋XFCαʔϏεΛ ։ൃɾӡӦ͍ͯ͠Δ

Slide 3

Slide 3 text

୭΋͕؆୯ʹ·Δ͹ͭΫΠζΛ࡞ΕͪΌ͏ IUUQTXJUISVJUDPN

Slide 4

Slide 4 text

୭΋͕؆୯ʹ·Δ͹ͭΫΠζΛ࡞ΕͪΌ͏ IUUQTNBSVCBUTVRVJ[HFOFSBUPSXFCBQQ

Slide 5

Slide 5 text

୭΋͕؆୯ʹ·Δ͹ͭΫΠζΛ࡞ΕͪΌ͏ IUUQTNBSVCBUTVRVJ[HFOFSBUPSXFCBQQ

Slide 6

Slide 6 text

୭΋͕؆୯ʹ·Δ͹ͭΫΠζΛ࡞ΕͪΌ͏ ࿩͢͜ͱ ֓ཁ ػೳ ࣮૷ ·ͱΊ

Slide 7

Slide 7 text

୭΋͕؆୯ʹ·Δ͹ͭΫΠζΛ࡞ΕͪΌ͏ ࿩͢͜ͱ ֓ཁ ػೳ ࣮૷ ·ͱΊ ֓ཁ

Slide 8

Slide 8 text

୭΋͕؆୯ʹ·Δ͹ͭΫΠζΛ࡞ΕͪΌ͏ ֓ཁ ؆୯ʹ·Δ͹ͭ ΫΠζΛ࡞੒ εϫΠϓૢ࡞Ͱ ճ౴ 0(1Λಈతʹ ࡞੒

Slide 9

Slide 9 text

୭΋͕؆୯ʹ·Δ͹ͭΫΠζΛ࡞ΕͪΌ͏ ࿩͢͜ͱ ֓ཁ ػೳ ࣮૷ ·ͱΊ ػೳ

Slide 10

Slide 10 text

୭΋͕؆୯ʹ·Δ͹ͭΫΠζΛ࡞ΕͪΌ͏ ػೳ ΫΠζɾճ౴ͷอଘػೳ $MPVE'JSFTUPSF ΫΠζͷը૾ͷอଘػೳ $MPVE4UPSBHF 0(1༻ͷը૾ੜ੒ػೳ IUNMDBOWBT 0(1λάͷಈత੾Γସ͑ػೳ $MPVE'VODUJPOTʷ/VYU ʹΑΔ443

Slide 11

Slide 11 text

Slide 12

Slide 12 text

୭΋͕؆୯ʹ·Δ͹ͭΫΠζΛ࡞ΕͪΌ͏ $MPVE'JSFTUPSF (PPHMFͷॊೈͰεέʔϥϒϧͳ/P42-Ϋϥ΢υσʔλϕʔ εΛ࢖༻ͯ͠ɺΫϥΠΞϯτଆ։ൃͱαʔόʔଆ։ൃͷσʔ λΛอଘɺಉظ͠·͢ɻ IUUQTpSFCBTFHPPHMFDPNEPDTpSFTUPSF IMKB

Slide 13

Slide 13 text

୭΋͕؆୯ʹ·Δ͹ͭΫΠζΛ࡞ΕͪΌ͏ $MPVE'JSFTUPSF

Slide 14

Slide 14 text

୭΋͕؆୯ʹ·Δ͹ͭΫΠζΛ࡞ΕͪΌ͏ $MPVE'JSFTUPSF VTFST\ ZVTVLF\ BHF BEESFTT5PLZP ^ UBLVZB\ BHF BEESFTT*CBSBLJ ^ ^ DPMMFDUJPOʢVTFSTʣ EPDVNFOUʢZVTVLFʣ EBUBʢBESFTT5PLZPʣ

Slide 15

Slide 15 text

୭΋͕؆୯ʹ·Δ͹ͭΫΠζΛ࡞ΕͪΌ͏ $MPVE'JSFTUPSF JNQPSUpSFCBTFGSPNbpSFCBTF` DPOTUECpSFCBTFpSFTUPSF DPOTUTOBQTIPUECDPMMFDUJPO bVTFST` EPD bZVTVLF` HFU DPOTUVTFSTOBQTIPUEBUB DPOTPMFMPH VTFS \BHF BEESFTT5PLZP^

Slide 16

Slide 16 text

୭΋͕؆୯ʹ·Δ͹ͭΫΠζΛ࡞ΕͪΌ͏ $MPVE'JSFTUPSF JNQPSUpSFCBTFGSPNbpSFCBTF` DPOTUVTFS\BHF BEESFTT$IJCB^ DPOTUECpSFCBTFpSFTUPSF ECDPMMFDUJPO bVTFST` EPD bUBSP` TFU VTFS ଞʹ΋ɺUSBOTBDUJPO΍Ұׅॻ͖ࠐΈͷػೳ΋උ͍͑ͯ·͢ɻ ৄ͘͠͸ެࣜυΩϡϝϯτΛࢀর͍ͯͩ͘͠͞ɻ IUUQTpSFCBTFHPPHMFDPNEPDTpSFTUPSF IMKB

Slide 17

Slide 17 text

Slide 18

Slide 18 text

୭΋͕؆୯ʹ·Δ͹ͭΫΠζΛ࡞ΕͪΌ͏ $MPVE4UPSBHF $MPVE4UPSBHF͸ɺࣸਅ΍ಈըͳͲɺϢʔβʔ͕࡞੒ͨ͠ί ϯςϯπΛอ؅ɺఏڙ͢Δඞཁͷ͋ΔΞϓϦσϕϩούʔ޲ ͚ʹߏங͞Ε͍ͯ·͢ɻ IUUQTpSFCBTFHPPHMFDPNEPDTTUPSBHF IMKB

Slide 19

Slide 19 text

୭΋͕؆୯ʹ·Δ͹ͭΫΠζΛ࡞ΕͪΌ͏ JNQPSUpSFCBTFGSPNbpSFCBTF` pMF'JMF"1*PS#MPC"1*Ͱऔಘͨ͠ΦϒδΣΫτ DPOTUTUPSBHF3FGpSFCBTFTUPSBHF SFG DIJME bVQMPBET`pMFOBNF BXBJUTUPSBHF3FGQVU pMF DPOTUVQMPBE6SMTUPSBHF3FGHFU%PXOMPBE DPOTPMFMPH VQMPBE6SM lIUUQTVQMPBE͞ΕͨpMF͕อଘ͞Ε͍Δύεz $MPVE4UPSBHF

Slide 20

Slide 20 text

Slide 21

Slide 21 text

୭΋͕؆୯ʹ·Δ͹ͭΫΠζΛ࡞ΕͪΌ͏ IUNMDBOWBT 4DSFFOTIPUTXJUI+BWB4DSJQU IUUQTIUNMDBOWBTIFSU[FODPN IUNMʢ%0.ΦϒδΣΫτʣ͔ΒεΫϦʔϯγϣοτΛੜ੒͢ ΔϥΠϒϥϦ %0.ΦϒδΣΫτΛ)5.-ͷDBOWBTཁૉʹม׵͢Δ͜ͱʹΑͬ ͯɺεΫϦʔϯγϣοτΛੜ੒Ͱ͖ΔΑ͏ʹ͢Δ

Slide 22

Slide 22 text

୭΋͕؆୯ʹ·Δ͹ͭΫΠζΛ࡞ΕͪΌ͏ DBOWBTཁૉ DBOWBTλά͸ɺਤܗΛඳ͘ࡍʹ࢖༻͠·͢ɻ IUUQXXXIUNRDPNIUNMDBOWBTTIUNM DBOWBTཁૉʹ͸ɺUP#MPC ϝιου͕ఆٛ͞Ε͓ͯΓɺDBOWBT ཁૉͰඳࣸ͞Εͨ಺༰Λ#MPCʢը૾ͳͲͷόΠφϦσʔλΛ +BWB4DSJQUͰѻ͍΍ͨ͘͢͠΋ͷʣʹม׵͢Δ͜ͱ͕Ͱ͖Δ IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC"1* )5.-$BOWBT&MFNFOUUP#MPC

Slide 23

Slide 23 text

୭΋͕؆୯ʹ·Δ͹ͭΫΠζΛ࡞ΕͪΌ͏ UFNQMBUF EJWSFGlUBSHFUz \\UJUMF^^ EJW UFNQMBUF TUZMF ͍͍ײ͡ͷσβΠϯ TUZMF TDSJQU JNQPSUIUNMDBOWBTGSPNbIUNMDBOWBT` ͍͍ײ͡ͷॲཧͷதʹೖΕΔ DPOTUEPNUIJTSFGTUBSHFU IUNMDBOWBT EPN UIFO DBOWBT\ DBOWBTUP#MPC CMPC\ VQMPBECMPC ^ ^ TDSJQU IUNMDBOWBT

Slide 24

Slide 24 text

Slide 25

Slide 25 text

୭΋͕؆୯ʹ·Δ͹ͭΫΠζΛ࡞ΕͪΌ͏ /VYU /VYUKT͸7VFΞϓϦέʔγϣϯΛ࡞੒͢ΔϑϨʔϜϫʔΫ Ͱ͢ɻdলུ αʔόαΠυͱΫϥΠΞϯταΠυͷσΟετϦϏϡʔγϣϯ Λந৅Խͭͭ͠6*ϨϯμϦϯά͢Δ͜ͱʹয఺Λ౰͍ͯͯ· ͢ɻ IUUQTKBOVYUKTPSHHVJEF

Slide 26

Slide 26 text

୭΋͕؆୯ʹ·Δ͹ͭΫΠζΛ࡞ΕͪΌ͏ $MPVE'VODUJPOT 'JSFCBTFػೳ΍)5514ϦΫΤετʹΑͬͯτϦΨʔ͞Εͨ ΠϕϯτʹԠͯ͡ɺόοΫΤϯυίʔυΛࣗಈతʹ࣮ߦͰ͖ ·͢ɻ ίʔυ͸(PPHMFͷΫϥ΢υʹอଘ͞ΕɺϚωʔδυ؀ڥͰ ࣮ߦ͞Ε·͢ɻಠࣗͷαʔόʔΛ؅ཧ͓ΑͼεέʔϦϯά͢ Δඞཁ͸͋Γ·ͤΜɻ IUUQTpSFCBTFHPPHMFDPNEPDTGVODUJPOT IMKB

Slide 27

Slide 27 text

୭΋͕؆୯ʹ·Δ͹ͭΫΠζΛ࡞ΕͪΌ͏ 'JSFCBTF)PTUJOH 'JSFCBTF)PTUJOH͸ɺ΢ΣϒΞϓϦɺ੩తίϯςϯπɺಈత ίϯςϯπ޲͚ͷߴ଎Ͱ҆શੑͷߴ͍ϗεςΟϯάΛఏڙ͠ ·͢ɻ IUUQTpSFCBTFHPPHMFDPNEPDTIPTUJOH IMKB

Slide 28

Slide 28 text

୭΋͕؆୯ʹ·Δ͹ͭΫΠζΛ࡞ΕͪΌ͏ /VYUʷ$MPVE'VODUJPOTͷ443ͷྲྀΕ ϦΫΤετ IUUQTIPHFIPHFDPN Ϩεϙϯε w GVHBGVHBKQH w IUNM w ʜ ੩తϑΝΠϧͷ৔߹ pSFCBTFKTPOͰ ҎԼͷ༻ʹఆٛ 'JSFCBTF)PTUJOH +1( )5.- ϦΫΤετʹ߹க͢Δ ϑΝΠϧ͕ଘࡏ͢Δ

Slide 29

Slide 29 text

୭΋͕؆୯ʹ·Δ͹ͭΫΠζΛ࡞ΕͪΌ͏ ϦΫΤετ Ϩεϙϯε ಈతϑΝΠϧͷ৔߹ pSFCBTFKTPOͰ ҎԼͷ༻ʹఆٛ 'JSFCBTF)PTUJOH ϦΫΤετʹ߹க͢Δ ϑΝΠϧ͕ͳ͔ͬͨΒɺ $MPVE'VODUJPOTͷ ࢦఆͨؔ͠਺Λ࣮ߦ͢Δ ϦΫΤετΛݩʹ )5.-Λੜ੒ $MPVE'VODUJPOT /VYUʷ$MPVE'VODUJPOTͷ443ͷྲྀΕ

Slide 30

Slide 30 text

୭΋͕؆୯ʹ·Δ͹ͭΫΠζΛ࡞ΕͪΌ͏ 443͢Δ͜ͱʹΑͬͯ΍Γ͔ͨͬͨ͜ͱ ϖʔδ୯ҐͰ0(1Λಈతʹมߋ͢Δ /VYUʷ$MPVE'VODUJPOTͷ443ͷྲྀΕ

Slide 31

Slide 31 text

୭΋͕؆୯ʹ·Δ͹ͭΫΠζΛ࡞ΕͪΌ͏ 443Λ΍Βͳ͔ͬͨ৔߹ w ϦΫΤετʹର͠ɺIPTUJOH͞ΕͨJOEFYIUNMΛϨεϙϯε ͱͯ͠ฦ٫ w ฦ٫͞ΕͨJOEFYIUNM͕ϒϥ΢βͰ+BWB4DSJQUΛಡΈࠐΜͰ %0.ΛϨϯμϦϯά /VYUʷ$MPVE'VODUJPOTͷ443ͷྲྀΕ

Slide 32

Slide 32 text

୭΋͕؆୯ʹ·Δ͹ͭΫΠζΛ࡞ΕͪΌ͏ 443Λ΍Βͳ͔ͬͨ৔߹ w ϦΫΤετʹର͠ɺIPTUJOH͞ΕͨJOEFYIUNMΛϨεϙϯε ͱͯ͠ฦ٫ w ฦ٫͞ΕͨJOEFYIUNM͕ϒϥ΢βͰ+BWB4DSJQUΛಡΈࠐΜͰ %0.ΛϨϯμϦϯά w +BWB4DSJQUΛಡΈࠐ·ͳ͖Όҙਤͨ͠)5.-͸ϨϯμϦϯ ά͞Εͳ͍ w 5XJUUFS΍GBDFCPPLͷCPU͸+BWB4DSJPUΛಡΜͰ͘Εͳ͍ʂ /VYUʷ$MPVE'VODUJPOTͷ443ͷྲྀΕ

Slide 33

Slide 33 text

୭΋͕؆୯ʹ·Δ͹ͭΫΠζΛ࡞ΕͪΌ͏ /VYU$MPVE'VODUJPOTͷ443ͷྲྀΕ 443Λ΍Βͳ͔ͬͨ৔߹ w ϦΫΤετʹର͠ɺIPTUJOH͞ΕͨJOEFYIUNMΛϨεϙϯε ͱͯ͠ฦ٫ w ฦ٫͞ΕͨJOEFYIUNM͕ϒϥ΢βͰ+BWB4DSJQUΛಡΈࠐΜͰ %0.ΛϨϯμϦϯά w +BWB4DSJQUΛಡΈࠐ·ͳ͖Όҙਤͨ͠)5.-͸ϨϯμϦϯ ά͞Εͳ͍ w 5XJUUFS΍GBDFCPPLͷCPU͸+BWB4DSJPUΛಡΜͰ͘Εͳ͍ʂ w 0(1λάʢNFUBλάʣΛࢦఆͯ͠΋ɺ5XJUUFS΍GBDFCPPL ͷCPU͸ҙਤ௨Γʹղऍͯ͘͠Εͳ͍ʂ w /VYUͷ৔߹ɺશϖʔδڞ௨ͰNFUBλάΛઃఆͰ͖Δ͕ɺݸ ผͰ͸+BWB4DSJQUͰϨϯμϦϯά͠ͳ͍ͱઃఆͰ͖ͳ͍

Slide 34

Slide 34 text

୭΋͕؆୯ʹ·Δ͹ͭΫΠζΛ࡞ΕͪΌ͏ 443ͨ͠৔߹ w ϦΫΤετʹର͠ɺಈతʹ)5.-Λߏங w ϖʔδ୯ҐͰઃఆͨ͠NFUBλά͕൓ө͞Εͨ)5.-Λϒϥ ΢β΍ɺ5XJUUFSɺGBDFCPPLͷCPUʹ౉͢͜ͱ͕Ͱ͖Δ /VYUʷ$MPVE'VODUJPOTͷ443ͷྲྀΕ

Slide 35

Slide 35 text

୭΋͕؆୯ʹ·Δ͹ͭΫΠζΛ࡞ΕͪΌ͏ 443ͨ͠৔߹ w ϦΫΤετʹର͠ɺಈతʹ)5.-Λߏங w ϖʔδ୯ҐͰઃఆͨ͠NFUBλά͕൓ө͞Εͨ)5.-Λϒϥ ΢β΍ɺ5XJUUFSɺGBDFCPPLͷCPUʹ౉͢͜ͱ͕Ͱ͖Δ ϖʔδ୯ҐͰ0(1Λॻ͖׵͑Δ͜ͱ͕Ͱ͖Δʂ /VYUʷ$MPVE'VODUJPOTͷ443ͷྲྀΕ

Slide 36

Slide 36 text

୭΋͕؆୯ʹ·Δ͹ͭΫΠζΛ࡞ΕͪΌ͏ 'JSFCBTF)PTUJOH pSFCBTFKTPOʢ֘౰ՕॴͷΈൈਮʣ \ IPTUJOH\ SFXSJUFT< \ TPVSDF GVODUJPOOVYU"QQ ^ > ^ ^ શͯͷϦΫΤετʹରͯ͠ɺ $MPVE'VODUJPOTͷOVYU"QQ Λ࣮ߦ͢Δɻ ͨͩ͠ɺϦΫΤετΛॲཧ͢ Δʹ͸༏ઌ౓͕͋ΓɺϦΫΤ ετ͍ͯ͠ΔϑΝΠϧ͕ IPTUJOHαʔόʔ಺ʹଘࡏ͢Δ ৔߹͸ɺͦͪΒΛ༏ઌ͠ OVYU"QQ͸࣮ߦ͞Εͳ͍ɻ ৄ͘͠͸ެࣜυΩϡϝϯτΛ ࢀর͍ͯͩ͘͠͞ɻ

Slide 37

Slide 37 text

୭΋͕؆୯ʹ·Δ͹ͭΫΠζΛ࡞ΕͪΌ͏ $MPVE'VODUJPOT DPOTUGVODUJPOTSFRVJSF lpSFCBTFGVODUJPOTz DPOTUFYQSFTTSFRVJSF lFYQSFTTz DPOTU\/VYU^SFRVJSF lOVYUz DPOTUBQQFYQPSFTT DPOTUOVYUOFX/VYU DPOpH /VYUͷDPOpHΛ༻ҙ BTZODGVODUJPOTIBOEMF3FRVFTU SFR SFT \ SFTTFU b$BDIF$POUSPM` bQVCMJD NBYBHF TNBYBHF` BXBJUOVYUSFBEZ SFUVSOBXBJUOVYUSFOEFS SFR SFT ^ BQQVTF IBOEMF3FRVFTU FYQPSUTOVYU"QQGVODUJPOTIUUQTPO3FRVFTU BQQ

Slide 38

Slide 38 text

Slide 39

Slide 39 text

୭΋͕؆୯ʹ·Δ͹ͭΫΠζΛ࡞ΕͪΌ͏ ࿩͢͜ͱ ֓ཁ ػೳ ࣮૷ ·ͱΊ ·ͱΊ

Slide 40

Slide 40 text

୭΋͕؆୯ʹ·Δ͹ͭΫΠζΛ࡞ΕͪΌ͏ w XFCαʔϏεͮ͘Γ͸ָ͍͠ʂ w pSFCBTFʹΑͬͯɺXFCαʔϏε։ൃ΁ͷϋʔυϧ ͕Լ͕ͬͨʂ w 443΋pSFCBTFΛ࢖ͬͨΒ؆୯ʹͰ͖ͨʂ ·ͱΊ

Slide 41

Slide 41 text

୭΋͕؆୯ʹ·Δ͹ͭΫΠζΛ࡞ΕͪΌ͏ w XFCαʔϏεͮ͘Γ͸ָ͍͠ʂ w pSFCBTFʹΑͬͯɺXFCαʔϏε։ൃ΁ͷϋʔυϧ ͕Լ͕ͬͨʂ w 443΋pSFCBTFΛ࢖ͬͨΒ؆୯ʹͰ͖ͨʂ w ϦΫΤετͷྲྀΕ΍ɺ/VYUͷCVJMEͷڍಈͳͲɺͬ͠ ͔Γ೺Ѳ͍ͯ͠ͳ͍ͱ443͸೉͍͠ͳͱײͨ͡ɻ  ʢ443Ͱ٧·ͬͯ೔௵ͨ͠ɺɺɺɻʣ ·ͱΊ