Nuxt.jsとFirebaseで爆速でPWA対応Webアプリを開発した話

/VYUKTͱ'JSFCBTFͰര଎Ͱ 18"ରԠ8FCΞϓϦΛ։ൃͨ͠࿩ גࣜձࣾEJ⒎FBTZ  औక໾$50 ੢෢࢙ GFD@GVLVPLB GFD@GVLVPLB@TBMMZ

੢෢࢙ גࣜձࣾEJ⒎FBTZ  औక໾$50 !@UBLFTIJ@ 'JSFCBTF 7VF (PMBOH 3VCZ ($1 ϒϩοΫνΣʔϯ
EPDLFS /VYU &MJYJS Թઘ ϥϯχϯά ಡॻ

NBLFEJ⒏DVMUUIJOHTFBTZ ੈքதͷzΉ͔͍ͣ͠zΛ؆୯ʹ

EJ⒎FBTZͷ ϑϩϯτΤϯυ࢙ EJ⒎FBTZ૑ۀΤϯδχΞ ੢δϣΠϯ 8FCΤϯδχΞਓ ϑϩϯτΤϯυ͸K2VFSZ 7VFKT࠾༻ "OHVMBS3FBDUͰ೰Ήɾɾ
ࣗࣾαʔϏεʹ/VYUKT࠾༻

18"ରԠ8FCΞϓϦ

wϦΞϧλΠϜνϟοτΞϓϦ w࿩͍ͨ͠ΩʔϫʔυͰܨ͕Δ wϝʔϧύεϫʔυೝূ wϓϩϑΟʔϧը૾Ξοϓϩʔυ w։ൃ޻਺ਓ೔ఔ౓ ˞/VYUKTɺ'JSFCBTFֶशࡁΈ ˞Ћ൛ͳͷͰࡉ͔͍ڍಈ͸ະରԠ ։ൃͨ͠18"ରԠ8FCΞϓϦ

18"ͱ͸Կ͔ʁ 1SPHSFTTJWF 8FC  "QQT ωΠςΟϒΞϓϦͷΑ͏ʹಈ࡞͢Δ 8FCΞϓϦ

18"ͰԿ͕Ͱ͖Δʁ ᶃΠϯετʔϧʢϗʔϜը໘ʹΞΠίϯઃஔʣՄೳ

18"ͰԿ͕Ͱ͖Δʁ 1$൛$ISPNFͰ΋࣮ݧత֦ுػೳΛ༗ޮʹ͢Δͱ 18"ΛΠϯετʔϧͰ͖Δɻ

18"ͰԿ͕Ͱ͖Δʁ ΞυϨεόʔͳͲඇදࣔ

18"ͰԿ͕Ͱ͖Δʁ ᶄΦϑϥΠϯͰ΋ಈ࡞Մೳ wΦϑϥΠϯͰ΋ΞϓϦ͸ಈ࡞ wαʔόʔͱͷ௨৴͸ෆՄ w௨৴࠶։࣌ʹαʔόʔૹ৴ड৴

18"ͰԿ͕Ͱ͖Δʁ ᶅϓογϡ௨஌Մೳ wϓογϡ௨஌Մೳ wϢʔβʔ͝ͱʹݸผͷ௨஌΋Մೳ w௨஌͕දࣔ͞ΕΔ w௨஌ΛΫϦοΫͯ͠ΞϓϦىಈ ˞J04൛4BGBSJ͸ඇରԠ ࣌఺ ˞ϓογϡ௨஌͸0OF4JHOBMΛར༻

18"ͰԿ͕Ͱ͖Δʁ ᶆϖʔδͷදࣔ଎౓վળ4FSWJDF8PSLFS w4FSWJDF8PSLFS͕ϓϩΩγͷ໾ׂ w$BDIF͔Βߴ଎ʹදࣔ wόοΫάϥ΢ϯυͰ࠷৽ͷίϯςϯ πΛऔಘ͠Ωϟογϡ wΦϑϥΠϯͰಈ͘ͷ΋ಉ͡࢓૊Έ wϓογϡ௨஌Λड͚औΔ 4FSWJDF 8PSLFS
18" $BDIF 8FC

18"ͷࣄྫ 5XJUUFS-JUF wϒϥ΢β͔ΒϗʔϜը໘ʹΠϯετʔ ϧՄೳ wωΠςΟϒΞϓϦΑΓ΋ܰྔɻىಈ ͕଎͍ɻ wػೳ͸Ұ෦੍ݶ https://mobile.twitter.com

18"ͷࣄྫ ೔ܦిࢠ൛ w೥͝Ζ͔Β͍ͪૣ͘18"։ൃ ΛਐΊΔ wఔ౓ͷ଎౓վળ https://r.nikkei.com/

'JSFCBTFόοΫΤϯυ

'JSFCBTFͱ͸Կ͔ʁ Google͕ఏڙ͢ΔBaaS(Backend as a Service)

'JSFCBTFͱ͸Կ͔ʁ όοΫΤϯυ ϑϩϯτΤϯυ

/VYUKTϑϩϯτΤϯυ

/VYUKTͱ͸Կ͔ʁ Vue.jsΞϓϦέʔγϣϯ։ൃ ͷͨΊͷϑϨʔϜϫʔΫɻ wϧʔςΟϯά7VF3PVUFS wঢ়ଶ؅ཧ7VFY 7VF൛'MVY w443 ʜͳͲ

/VYUKTº'JSFCBTFͷ։ൃ

'JSFCBTFͷ༻ҙ

/VYUKTͱ'JSFCBTFͷ࿈ܞ ᶃϢʔβʔೝূ"VUIFOUJDBUJPO Firebase Authentication ʹϢʔβʔೝূͷ࢓૊Έ͕ఏڙ

/VYUKTͱ'JSFCBTFͷ࿈ܞ ᶃϢʔβʔೝূ"VUIFOUJDBUJPO firebase .auth() .createUserWithEmailAndPassword(email, password) firebase .auth() .signInWithEmailAndPassword(email, password)
ΞΧ΢ϯτొ࿥ ϩάΠϯ firebase.auth().currentUser ϩάΠϯதΞΧ΢ϯτऔಘ

/VYUKTͱ'JSFCBTFͷ࿈ܞ ᶄϦΞϧλΠϜσʔλϕʔε$MPVE'JSFTUPSF Vuex VuexFire Firestore

/VYUKTͱ'JSFCBTFͷ࿈ܞ ᶄϦΞϧλΠϜσʔλϕʔε ͭͷσʔλϕʔε͕ఏڙ͞Ε͍ͯΔ 3FBMUJNF%BUBCBTF $MPVE'JSFTUPSF Ќ ʻ ΫΤϦͷॊೈੑ ιʔτͷॊೈੑ কདྷੑ
બ୒

/VYUKTͱ'JSFCBTFͷ࿈ܞ ᶄϦΞϧλΠϜσʔλϕʔε$MPVE'JSFTUPSF const messagesRef = db.collection(‘messages’) await messagesRef.add({ pairUid: data.pairUid,
uid: data.uid, text: data.text, time: Date.now() }) σʔλొ࿥

/VYUKTͱ'JSFCBTFͷ࿈ܞ ᶄϦΞϧλΠϜσʔλϕʔε$MPVE'JSFTUPSF σʔλొ࿥ొ࿥͞ΕͨσʔλΛ֬ೝ

/VYUKTͱ'JSFCBTFͷ࿈ܞ ᶄϦΞϧλΠϜσʔλϕʔε$MPVE'JSFTUPSF const messagesRef = db.collection(‘messages’) export const state =
() => ({ messages: [], }) await bindFirebaseRef( 'messages', messagesRef .where('pairUid', '==', pairUid) .orderBy('time', 'desc') ) σʔλݕࡧ

/VYUKTͱ'JSFCBTFͷ࿈ܞ ᶄϦΞϧλΠϜσʔλϕʔε$MPVE'JSFTUPSF const messagesRef = db.collection(‘messages’) await messagesRef .doc(id) .update({
text: data.text }) σʔλߋ৽

/VYUKTͱ'JSFCBTFͷ࿈ܞ ᶅετϨʔδ$MPVE4UPSBHF const storage = firebase.storage() const storageRef = storage.ref()
const avatarRef = storageRef .child('avatar/' + data.name) await avatarRef.put(data.file) ετϨʔδʹϑΝΠϧΛอଘ

/VYUKTͱ'JSFCBTFͷ࿈ܞ ᶅετϨʔδ$MPVE4UPSBHF ετϨʔδʹϑΝΠϧΛอଘϑΝΠϧΛ֬ೝ

/VYUKTͱ'JSFCBTFͷ࿈ܞ ᶅετϨʔδ$MPVE4UPSBHF const storage = firebase.storage() const storageRef = storage.ref()
const avatarUrl = await storageRef .child('avatar/' + user.avatar) .getDownloadURL() ετϨʔδͷϑΝΠϧΛμ΢ϯϩʔυ

/VYUKTͱ'JSFCBTFͷ࿈ܞ ᶆϗεςΟϯά)PTUJOH pSFCBTFUPPMTΛΠϯετʔϧ $ yarn global add firebase-tools $
firebase init pSFCBTFϓϩδΣΫτͷॳظԽ

/VYUKTͱ'JSFCBTFͷ࿈ܞ ᶆϗεςΟϯά)PTUJOH )PTUJOHΛબ୒

/VYUKTͱ'JSFCBTFͷ࿈ܞ ᶆϗεςΟϯά)PTUJOH ࡞੒ͨ͠ϓϩδΣΫτΛબ୒ YYYYYYY YYYYYYY YYYYYYYYYYYYYYY YYYYYYY YYYYYYYYYYYYYYY YYYYYYY

/VYUKTͱ'JSFCBTFͷ࿈ܞ ᶆϗεςΟϯά)PTUJOH σϓϩΠ $ firebase deploy

/VYUKTͱ'JSFCBTFͷ࿈ܞ ᶆϗεςΟϯά)PTUJOH 'JSFCBTFͷϗεςΟϯάʹ  ɹσϓϩΠ͞ΕΔ

18"ରԠ

/VYUKTͰ18"ରԠ !OVYUKTQXBΛར༻͢Ε͹ ؆୯ʹ 18"ରԠʂ

/VYUKTͰ18"ରԠ $ yarn add @nuxtjs/pwa --save !OVYUKTQXBΛΠϯετʔϧ modules: [
'@nuxtjs/dotenv', '@nuxtjs/pwa' ], manifest: { name: 'wacha', short_name: 'wacha', title: 'wacha', lang: 'ja', gcm_sender_id: '103953800507' //ݻఆ஋ }, OVYUDPOpHKTʹΞϓϦͷ৘ใΛ௥Ճ

/VYUKTͰ18"ରԠ TUBUJDJDPOQOHʹΞΠίϯը૾Λ༻ҙ Ҏ্ʂʂ

0OF4JHOBMͰϓογϡ௨஌

0OF4JHOBMͱ͸ʁ wແྉͷϓογϡ௨஌αʔϏε w"1*ΛݺͿ͜ͱͰϓογϡ௨஌Մೳ wಛఆͷλʔήοτ͚ͩʹ௨஌Մೳ w/VYUKTͷ18"Ϟδϡʔϧʹ 0OF4JHOBMରԠͷϞδϡʔϧ΋  ༻ҙ͞Ε͍ͯΔ

0OF4JHOBMͷઃఆ

0OF4JHOBMͰϓογϡ௨஌ !OVYUKTPOFTJHOBMΛΠϯετʔϧ $ yarn add @nuxtjs/onesignal --save

0OF4JHOBMͰϓογϡ௨஌ modules: [ '@nuxtjs/dotenv', '@nuxtjs/onesignal', '@nuxtjs/pwa' ], oneSignal: { init:
{ appId: 'xxx-xxx-xxx-xxx-xxx', allowLocalhostAsSecureOrigin: true, welcomeNotification: { disable: true } } }, OVYUDPOpHKTʹ0OF4JHOBMͷ৘ใΛ௥Ճ

0OF4JHOBMͰϓογϡ௨஌ await this.$OneSignal.push([ 'sendTag', 'id', this.currentUser.uid, function(tagsSent) {} ])
UBHΛઃఆʢಛఆͷϢʔβʔͷΈʹ௨஌͢ΔͨΊʣ bJE`ͱ͍͏໊લͷλάͰɺ ϩάΠϯதͷϢʔβʔͷVJEͷ஋Λઃఆ

0OF4JHOBMͰϓογϡ௨஌ const params = { method: 'post', url: 'https://onesignal.com/api/v1/notifications', headers:
{ 'Content-Type': 'application/json', Authorization: 'Basic zzzzzzzzzzzzzzzzzzzzzzzzz’ }, data: { app_id: 'xxx-xxx-xxx-xxx-xxx', headings: { ja: requestData.title }, contents: { ja: requestData.body }, tags: [{ key: 'id', relation: '=', value: requestData.uid }] } } axios(params) UBHΛࢦఆͯ͠ಛఆͷϢʔβʔͷΈʹ௨஌ ˞ݕূ༻ΞϓϦͷͨΊɺΫϥΠΞϯτͰ"1*ݺग़࣮͠૷

ৼΓฦΓ

'JSFCBTF࣮ࡍͲ͏ͳͷʁ wϑϩϯτΤϯυͷ։ൃͷΈͰɺϢʔβʔೝূɺϦΞϧ λΠϜσʔλϕʔεɺετϨʔδ΁ͷϑΝΠϧอଘͳ ͲΞϓϦʹඞཁͳػೳʂ w؆୯ͳνϟοτΞϓϦ΍50%0ΞϓϦϨϕϧͰ͋Ε͹ े෼ͳػೳɻ

'JSFCBTF࣮ࡍͲ͏ͳͷʁ wΫΤϦ͕ශऑ ✴03ݕࡧෆՄɻΞϓϦͰΫΤϦ݁ՌΛ݁߹ɻ ✴લํҰகݕࡧ͸Մೳɻ෦෼ҰகɺޙํҰகෆՄɻ ✴ൣғൺֱϑΟϧλ ౳ ͕͋Δ৔߹ɺ࠷ॳͷฒ΂ ସ͑͸ಉ͡ϑΟʔϧυͰߦ͏ɻ citiesRef
.where("population", ">", 100000) .orderBy(“population")

'JSFCBTF࣮ࡍͲ͏ͳͷʁ wσʔλͷઃܭ͕େࣄ ϚΠάϨʔγϣϯେม ઌ΄ͲͷΞϓϦͷྫ "͞Μͱ#͞ΜͷϖΞͷτʔΫΛ Ұཡදࣔ͢ΔͨΊɺ ɾ"͞ΜͷҰཡදࣔ༻σʔλ ɾ#͞ΜͷҰཡදࣔ༻σʔλ Λ༻ҙɻ JOEFYFE1BJS\ 
\VJE" UBSHFU# QBJS*E^ \VJE# UBSHFU" QBJS*E^ \VJE" UBSHFU$ QBJS*E^ \VJE$ UBSHFU" QBJS*E^ \VJE# UBSHFU$ QBJS*E^ ɾɾɾ

'JSFCBTF࣮ࡍͲ͏ͳͷʁ w'JSFCBTFͷઃఆΛؒҧ͑ͯ࣌ؒͰສԁҎ্੥ٻ  ͞Εͨྫ΋ɾɾɾ

18"࣮ࡍͲ͏ͳͷʁ w"OESPJEͰ͸ωΠςΟϒΞϓϦʹ͍ۙ͜ͱ͕Մೳ wJ04ͷ͔Β18"ରԠ wJ04Ͱ͸ϓογϡ௨஌ະରԠ wΞΠίϯͷόοδදࣔͰ͖ͳ͍ wϒϥ΢βͷઃఆͰ௨஌0''ʹͰ͖Δ w·ͩ·ͩωΠςΟϒΞϓϦ͕ඞཁͦ͏ wݸਓతʹ͸ࠓޙʹେ͍ʹظ଴ʂʂ

ൃද಺༰͸ΞυϕϯτΧϨϯμʔͰ Nuxt.js Advent Calendar 2018 Vue.js Advent Calendar 2018 ˞಺༰͸มߋͷՄೳੑ͋Γ

EJ⒎FBTZͰ͸ ҎԼͷΑ͏ͳਓࡒΛaେืूதʂʂ ϑϩϯτΤϯυΤϯδχΞ ᶃ ٕज़ྗͰੈքதͷΉ͔͍ͣ͠Λ؆୯ʹ͢Δ σβΠφʔ ᶄ σβΠϯྗͰੈքதͷΉ͔͍ͣ͠Λ؆୯ʹ͢Δ

͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠

Nuxt.jsとFirebaseで爆速でPWA対応Webアプリを開発した話

Nuxt.jsとFirebaseで爆速でPWA対応Webアプリを開発した話

More Decks by TakeshiNishi

Other Decks in Programming

Featured

Transcript