Nuxt.jsとFirebaseで爆速でPWA対応Webアプリを開発した話

フロントエンドカンファレンス福岡の発表スライドです。
NuxtとFirebaseを使って、PWA対応のリアルタイムWebチャットアプリケーションを開発した話をします。

Transcript

1. /VYUKTͱ'JSFCBTFͰര଎Ͱ
   18"ରԠ8FCΞϓϦΛ։ൃͨ͠࿩ גࣜձࣾEJ⒎FBTZ
 औక໾$50
   ੢
   ෢࢙ GFD@GVLVPLB
   GFD@GVLVPLB@TBMMZ
3. ੢
   ෢࢙ גࣜձࣾEJ⒎FBTZ
 औక໾$50 !@UBLFTIJ@ 'JSFCBTF 7VF (PMBOH 3VCZ ($1 ϒϩοΫνΣʔϯ EPDLFS /VYU &MJYJS Թઘ ϥϯχϯά ಡॻ
4. NBLF
   EJ⒏DVMU
   UIJOHT
   FBTZ ੈքதͷzΉ͔͍ͣ͠zΛ؆୯ʹ
5. EJ⒎FBTZͷ
   ϑϩϯτΤϯυ࢙ EJ⒎FBTZ૑ۀ
   ΤϯδχΞ  
    ੢δϣΠϯ
   
   8FCΤϯδχΞਓ
   ϑϩϯτΤϯυ͸K2VFSZ 7VFKT࠾༻
   "OHVMBS3FBDUͰ೰Ήɾɾ 
    ࣗࣾαʔϏεʹ/VYUKT࠾༻ 
6. 18"ରԠ8FCΞϓϦ
7. wϦΞϧλΠϜνϟοτΞϓϦ
   w࿩͍ͨ͠ΩʔϫʔυͰܨ͕Δ
   wϝʔϧύεϫʔυೝূ
   wϓϩϑΟʔϧը૾Ξοϓϩʔυ
   w։ൃ޻਺ਓ೔ఔ౓ ˞/VYUKTɺ'JSFCBTFֶशࡁΈ
   ˞Ћ൛ͳͷͰࡉ͔͍ڍಈ͸ະରԠ ։ൃͨ͠18"ରԠ8FCΞϓϦ
8. 18"ͱ͸Կ͔ʁ 1
   SPHSFTTJWF
   8FC
 "
   QQT ωΠςΟϒΞϓϦͷΑ͏ʹಈ࡞͢Δ 8FCΞϓϦ
9. 18"ͰԿ͕Ͱ͖Δʁ ᶃΠϯετʔϧʢϗʔϜը໘ʹΞΠίϯઃஔʣՄೳ
10. 18"ͰԿ͕Ͱ͖Δʁ 1$൛$ISPNFͰ΋࣮ݧత֦ுػೳΛ༗ޮʹ͢Δͱ
    18"ΛΠϯετʔϧͰ͖Δɻ
11. 18"ͰԿ͕Ͱ͖Δʁ ΞυϨεόʔͳͲඇදࣔ
12. 18"ͰԿ͕Ͱ͖Δʁ ᶄΦϑϥΠϯͰ΋ಈ࡞Մೳ wΦϑϥΠϯͰ΋ΞϓϦ͸ಈ࡞
    wαʔόʔͱͷ௨৴͸ෆՄ
    w௨৴࠶։࣌ʹαʔόʔૹ৴ड৴
13. 18"ͰԿ͕Ͱ͖Δʁ ᶅϓογϡ௨஌Մೳ wϓογϡ௨஌Մೳ
    wϢʔβʔ͝ͱʹݸผͷ௨஌΋Մೳ
    w௨஌͕දࣔ͞ΕΔ
    w௨஌ΛΫϦοΫͯ͠ΞϓϦىಈ ˞J04൛4BGBSJ͸ඇରԠ ࣌఺
    ˞ϓογϡ௨஌͸0OF4JHOBMΛར༻
14. 18"ͰԿ͕Ͱ͖Δʁ ᶆϖʔδͷදࣔ଎౓վળ
    
    4FSWJDF
    8PSLFS w4FSWJDF8PSLFS͕ϓϩΩγͷ໾ׂ
    w$BDIF͔Βߴ଎ʹදࣔ
    wόοΫάϥ΢ϯυͰ࠷৽ͷίϯςϯ πΛऔಘ͠Ωϟογϡ
    wΦϑϥΠϯͰಈ͘ͷ΋ಉ͡࢓૊Έ
    wϓογϡ௨஌Λड͚औΔ 4FSWJDF
    8PSLFS 18" $BDIF 8FC
15. 18"ͷࣄྫ 5XJUUFS
    -JUF wϒϥ΢β͔ΒϗʔϜը໘ʹΠϯετʔ ϧՄೳ
    wωΠςΟϒΞϓϦΑΓ΋ܰྔɻىಈ ͕଎͍ɻ
    wػೳ͸Ұ෦੍ݶ https://mobile.twitter.com
16. 18"ͷࣄྫ ೔ܦిࢠ൛ w೥͝Ζ͔Β͍ͪૣ͘18"։ൃ ΛਐΊΔ
    wఔ౓ͷ଎౓վળ https://r.nikkei.com/
17. 'JSFCBTF
    
    όοΫΤϯυ
18. 'JSFCBTFͱ͸Կ͔ʁ Google͕ఏڙ͢ΔBaaS(Backend as a Service)
19. 'JSFCBTFͱ͸Կ͔ʁ όοΫΤϯυ ϑϩϯτΤϯυ
20. /VYUKT
    
    ϑϩϯτΤϯυ
21. /VYUKTͱ͸Կ͔ʁ Vue.jsΞϓϦέʔγϣϯ։ൃ ͷͨΊͷϑϨʔϜϫʔΫɻ wϧʔςΟϯά
    
    7VF3PVUFS
    wঢ়ଶ؅ཧ
    
    7VFY
    7VF൛'MVY
    w443
    ʜͳͲ
22. /VYUKT
    º
    'JSFCBTFͷ։ൃ
23. 'JSFCBTFͷ༻ҙ
24. /VYUKTͱ'JSFCBTFͷ࿈ܞ ᶃϢʔβʔೝূ
    
    "VUIFOUJDBUJPO Firebase Authentication ʹϢʔβʔೝূͷ࢓૊Έ͕ఏڙ
25. /VYUKTͱ'JSFCBTFͷ࿈ܞ ᶃϢʔβʔೝূ
    
    "VUIFOUJDBUJPO firebase .auth() .createUserWithEmailAndPassword(email, password) firebase .auth() .signInWithEmailAndPassword(email, password) 
    ΞΧ΢ϯτొ࿥ 
    ϩάΠϯ firebase.auth().currentUser 
    ϩάΠϯதΞΧ΢ϯτऔಘ
26. /VYUKTͱ'JSFCBTFͷ࿈ܞ ᶄϦΞϧλΠϜσʔλϕʔε
    
    $MPVE
    'JSFTUPSF Vuex VuexFire Firestore
27. /VYUKTͱ'JSFCBTFͷ࿈ܞ ᶄϦΞϧλΠϜσʔλϕʔε ͭͷσʔλϕʔε͕ఏڙ͞Ε͍ͯΔ 3FBMUJNF
    %BUBCBTF $MPVE
    'JSFTUPSF Ќ ʻ ΫΤϦͷॊೈੑ
    ιʔτͷॊೈੑ
    কདྷੑ બ୒
28. /VYUKTͱ'JSFCBTFͷ࿈ܞ ᶄϦΞϧλΠϜσʔλϕʔε
    
    $MPVE
    'JSFTUPSF const messagesRef = db.collection(‘messages’) await messagesRef.add({ pairUid: data.pairUid, uid: data.uid, text: data.text, time: Date.now() }) 
    σʔλొ࿥
29. /VYUKTͱ'JSFCBTFͷ࿈ܞ ᶄϦΞϧλΠϜσʔλϕʔε
    
    $MPVE
    'JSFTUPSF 
    σʔλొ࿥
    
    ొ࿥͞ΕͨσʔλΛ֬ೝ
30. /VYUKTͱ'JSFCBTFͷ࿈ܞ ᶄϦΞϧλΠϜσʔλϕʔε
    
    $MPVE
    'JSFTUPSF const messagesRef = db.collection(‘messages’) export const state = () => ({ messages: [], }) await bindFirebaseRef( 'messages', messagesRef .where('pairUid', '==', pairUid) .orderBy('time', 'desc') ) 
    σʔλݕࡧ
31. /VYUKTͱ'JSFCBTFͷ࿈ܞ ᶄϦΞϧλΠϜσʔλϕʔε
    
    $MPVE
    'JSFTUPSF const messagesRef = db.collection(‘messages’) await messagesRef .doc(id) .update({ text: data.text }) 
    σʔλߋ৽
32. /VYUKTͱ'JSFCBTFͷ࿈ܞ ᶅετϨʔδ
    
    $MPVE
    4UPSBHF const storage = firebase.storage() const storageRef = storage.ref() const avatarRef = storageRef .child('avatar/' + data.name) await avatarRef.put(data.file) 
    ετϨʔδʹϑΝΠϧΛอଘ
33. /VYUKTͱ'JSFCBTFͷ࿈ܞ ᶅετϨʔδ
    
    $MPVE
    4UPSBHF 
    ετϨʔδʹϑΝΠϧΛอଘ
    
    ϑΝΠϧΛ֬ೝ
34. /VYUKTͱ'JSFCBTFͷ࿈ܞ ᶅετϨʔδ
    
    $MPVE
    4UPSBHF const storage = firebase.storage() const storageRef = storage.ref() const avatarUrl = await storageRef .child('avatar/' + user.avatar) .getDownloadURL() 
    ετϨʔδͷϑΝΠϧΛμ΢ϯϩʔυ
35. /VYUKTͱ'JSFCBTFͷ࿈ܞ ᶆϗεςΟϯά
    
    )PTUJOH  pSFCBTFUPPMTΛΠϯετʔϧ $ yarn global add firebase-tools $ firebase init  pSFCBTFϓϩδΣΫτͷॳظԽ
36. /VYUKTͱ'JSFCBTFͷ࿈ܞ ᶆϗεςΟϯά
    
    )PTUJOH  )PTUJOHΛબ୒
37. /VYUKTͱ'JSFCBTFͷ࿈ܞ ᶆϗεςΟϯά
    
    )PTUJOH  ࡞੒ͨ͠ϓϩδΣΫτΛબ୒ YYYYYYY YYYYYYY YYYYYYYYYYYYYYY YYYYYYY YYYYYYYYYYYYYYY YYYYYYY
38. /VYUKTͱ'JSFCBTFͷ࿈ܞ ᶆϗεςΟϯά
    
    )PTUJOH  σϓϩΠ $ firebase deploy
39. /VYUKTͱ'JSFCBTFͷ࿈ܞ ᶆϗεςΟϯά
    
    )PTUJOH  'JSFCBTFͷϗεςΟϯάʹ
 ɹσϓϩΠ͞ΕΔ
40. 18"ରԠ
41. /VYUKTͰ18"ରԠ !OVYUKTQXBΛར༻͢Ε͹
    ؆୯ʹ 18"ରԠʂ
42. /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ʹΞϓϦͷ৘ใΛ௥Ճ
43. /VYUKTͰ18"ରԠ  TUBUJDJDPOQOHʹΞΠίϯը૾Λ༻ҙ Ҏ্ʂʂ
44. 0OF4JHOBMͰϓογϡ௨஌
45. 0OF4JHOBMͱ͸ʁ wແྉͷϓογϡ௨஌αʔϏε
    w"1*ΛݺͿ͜ͱͰϓογϡ௨஌Մೳ
    wಛఆͷλʔήοτ͚ͩʹ௨஌Մೳ
    w/VYUKTͷ18"Ϟδϡʔϧʹ 0OF4JHOBMରԠͷϞδϡʔϧ΋
 ༻ҙ͞Ε͍ͯΔ
46. 0OF4JHOBMͷઃఆ
47. 0OF4JHOBMͰϓογϡ௨஌  !OVYUKTPOFTJHOBMΛΠϯετʔϧ $ yarn add @nuxtjs/onesignal --save
48. 0OF4JHOBMͰϓογϡ௨஌ modules: [ '@nuxtjs/dotenv', '@nuxtjs/onesignal', '@nuxtjs/pwa' ], oneSignal: { init: { appId: 'xxx-xxx-xxx-xxx-xxx', allowLocalhostAsSecureOrigin: true, welcomeNotification: { disable: true } } },  OVYUDPOpHKTʹ0OF4JHOBMͷ৘ใΛ௥Ճ
49. 0OF4JHOBMͰϓογϡ௨஌ await this.$OneSignal.push([ 'sendTag', 'id', this.currentUser.uid, function(tagsSent) {} ])  UBHΛઃఆʢಛఆͷϢʔβʔͷΈʹ௨஌͢ΔͨΊʣ bJE`ͱ͍͏໊લͷλάͰɺ
    ϩάΠϯதͷϢʔβʔͷVJEͷ஋Λઃఆ
50. 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*ݺग़࣮͠૷
51. ৼΓฦΓ
52. 'JSFCBTF࣮ࡍͲ͏ͳͷʁ wϑϩϯτΤϯυͷ։ൃͷΈͰɺϢʔβʔೝূɺϦΞϧ λΠϜσʔλϕʔεɺετϨʔδ΁ͷϑΝΠϧอଘͳ ͲΞϓϦʹඞཁͳػೳʂ
    w؆୯ͳνϟοτΞϓϦ΍50%0ΞϓϦϨϕϧͰ͋Ε͹ े෼ͳػೳɻ
53. 'JSFCBTF࣮ࡍͲ͏ͳͷʁ wΫΤϦ͕ශऑ
    ✴03ݕࡧෆՄɻΞϓϦͰΫΤϦ݁ՌΛ݁߹ɻ
    ✴લํҰகݕࡧ͸Մೳɻ෦෼ҰகɺޙํҰகෆՄɻ
    ✴ൣғൺֱϑΟϧλ  ౳ ͕͋Δ৔߹ɺ࠷ॳͷฒ΂ ସ͑͸ಉ͡ϑΟʔϧυͰߦ͏ɻ citiesRef .where("population", ">", 100000) .orderBy(“population")
54. 'JSFCBTF࣮ࡍͲ͏ͳͷʁ wσʔλͷઃܭ͕େࣄ
    ϚΠάϨʔγϣϯେม ઌ΄ͲͷΞϓϦͷྫ "͞Μͱ#͞ΜͷϖΞͷτʔΫΛ Ұཡදࣔ͢ΔͨΊɺ
    ɾ"͞ΜͷҰཡදࣔ༻σʔλ
    ɾ#͞ΜͷҰཡදࣔ༻σʔλ
    Λ༻ҙɻ
    JOEFYFE1BJS
    \

    
    
    \VJE
    "
    UBSHFU
    #
    QBJS*E
    ^
    
    
    
    \VJE
    #
    UBSHFU
    "
    QBJS*E
    ^
    
    
    
    \VJE
    "
    UBSHFU
    $
    QBJS*E
    ^
    
    
    
    \VJE
    $
    UBSHFU
    "
    QBJS*E
    ^
    
    
    
    \VJE
    #
    UBSHFU
    $
    QBJS*E
    ^
    
    
    ɾɾɾ
55. 'JSFCBTF࣮ࡍͲ͏ͳͷʁ w'JSFCBTFͷઃఆΛؒҧ͑ͯ࣌ؒͰສԁҎ্੥ٻ
 ͞Εͨྫ΋ɾɾɾ
56. 18"࣮ࡍͲ͏ͳͷʁ w"OESPJEͰ͸ωΠςΟϒΞϓϦʹ͍ۙ͜ͱ͕Մೳ
    wJ04ͷ͔Β18"ରԠ
    wJ04Ͱ͸ϓογϡ௨஌ະରԠ
    wΞΠίϯͷόοδදࣔͰ͖ͳ͍
    wϒϥ΢βͷઃఆͰ௨஌0''ʹͰ͖Δ
    w·ͩ·ͩωΠςΟϒΞϓϦ͕ඞཁͦ͏
    wݸਓతʹ͸ࠓޙʹେ͍ʹظ଴ʂʂ
57. ൃද಺༰͸ΞυϕϯτΧϨϯμʔͰ Nuxt.js Advent Calendar 2018 Vue.js Advent Calendar 2018 ˞಺༰͸มߋͷՄೳੑ͋Γ
58. EJ⒎FBTZͰ͸
    ҎԼͷΑ͏ͳਓࡒΛaେืूதʂʂ ϑϩϯτΤϯυΤϯδχΞ ᶃ ٕज़ྗͰੈքதͷΉ͔͍ͣ͠Λ؆୯ʹ͢Δ σβΠφʔ ᶄ σβΠϯྗͰੈքதͷΉ͔͍ͣ͠Λ؆୯ʹ͢Δ
59. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠