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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ʹΑΔ443

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

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

ʹΑΔ443

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

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

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

ʹΑΔ443

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

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

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

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

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

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

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

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

୭΋͕؆୯ʹ·Δ͹ͭΫΠζΛ࡞ΕͪΌ͏ /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ͰϨϯμϦϯά͠ͳ͍ͱઃఆͰ͖ͳ͍

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

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

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

୭΋͕؆୯ʹ·Δ͹ͭΫΠζΛ࡞ΕͪΌ͏ $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

୭΋͕؆୯ʹ·Δ͹ͭΫΠζΛ࡞ΕͪΌ͏ $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 w /VYU FYQSFTTΛ༻ҙ w SFRVFTUΛݩʹɺ/VYUͰ )5.-ΛϨϯμϦϯά w ϨϯμϦϯά͞Εͨ)5.- ΛFYQSFTT͕SFTQPOTFͱͯ͠ ฦ٫

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

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

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

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

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

More Decks by yusuke_yamashita

Other Decks in Technology

Featured

Transcript