「にゃーん」となくWebアプリを作った話 #ゆるWeb札幌

「にゃーん」となくWebアプリを作った話 #ゆるWeb札幌

Vue.js + Firebase で作った個人サービスの話。
https://nyan3.tacck.net/

13725f35541aa680ed5f85d16b85947a?s=128

Kihara, Takuya

May 17, 2019
Tweet

Transcript

  1. ΏΔ8FCษڧձ!ࡳຈ @tacck ʮʹΌʔΜʯͱͳ͘
 8FCΞϓϦΛ࡞ͬͨ࿩ 2019/05/11 7VFKT 'JSFCBTF

  2. ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL ୭ • ໊લ tacck • ࢓ࣄ Vue.jsΛʮ΍ͬͯͶʯͱ
 ؙ౤͛͢Δਓ

    • ޷͖ͳϑΟΪϡΞεέʔτͷٕ εϓϨουɾΠʔάϧ
  3. ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL /ZBO/ZBO/ZBO

  4. ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL /ZBO/ZBO/ZBO • ࡞ͬͨ΋ͷͷ঺հ • Firebaseͷͬ͘͟Γ֓ཁ • ίʔυͷ঺հ

  5. ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL /ZBO/ZBO/ZBOը໘

  6. ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL /ZBO/ZBO/ZBOը໘

  7. ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL 'JSFCBTFͱ͸

  8. ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL ͦ΋ͦ΋ • FirebaseΛฉ͍ͨ͜ͱ͋Δਓ? ✋

  9. ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL ͦ΋ͦ΋ • FirebaseΛ࢖ͬͨ͜ͱ͋Δਓ?

  10. ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL 'JSFCBTFͱ͸ • mBaaSͱݺ͹ΕΔαʔϏε • ϞόΠϧ޲͚ͷόοΫΤϯυػೳΛఏڙͯ͘͠ΕΔ΋ͷɻ
 ( Mobile Backend

    as a Service ) • ϞόΠϧ޲͚ͱ͋Δ͕ɺJavaScriptͰར༻Ͱ͖Δػೳ΋͍͔ͭ͋͘Δɻ • ແྉར༻࿮΋ͦͦ͜͜࢖͑Δɻ
 (ࠓճઆ໌͢ΔϑϩϯτΤϯυ޲͚ͷػೳ͸ɺແྉར༻࿮͕͋Δɻ)
  11. ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL N#BB4ͷΧόʔൣғ Πϯϑϥ όοΫΤϯυ ϑϩϯτΤϯυ ϞόΠϧΞϓϦ

  12. ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL Πϯϑϥ όοΫΤϯυ N#BB4ͷΧόʔൣғ ϑϩϯτΤϯυ ϞόΠϧΞϓϦ ͜ͷ͘Β͍໘౗Λݟͯ͘ΕΔ (όοΫΤϯυͷҰ෦͸
 ࣗ෼Ͱ࣮૷Մೳ)

  13. ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL 'JSFCBTFͰͰ͖Δ͜ͱ ओʹϑϩϯτΤϯυͰ

  14. ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL ओͳ'JSFCBTFͷػೳ • Πϯϑϥ • Hosting / WebαʔόͱσΟεΫྖҬ •

    HTMLɺCSSɺJSͳͲͷ੩తϑΝΠϧΛ͙͢ʹσϓϩΠՄೳɻ • Functions / όοΫΤϯυػೳ • Node.jsͰόοΫΤϯυػೳΛ࣮૷Մೳɻ • ࣗ෼Ͱ࣮૷͢ΔͷͰΠϯϑϥଆͷػೳͱͳΔɻ
  15. ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL ओͳ'JSFCBTFͷػೳ • όοΫΤϯυ • Authentication / ೝূ •

    EmailɺTwitterɺGoogle AccountɺͳͲ΋࢖͑Δೝূػೳɻ • Cloud Firestore / σʔλϕʔε • NoSQLܕͷσʔλϕʔεͱͯ͠ར༻Մೳɻ
  16. ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL Hosting Functions Firebase Local Hosting Functions Authentication Firestore

  17. ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL Hosting Functions Firebase Local Hosting Functions σϓϩΠ Authentication

    Firestore
  18. ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL Hosting Functions Firebase WebαΠτ API Authentication Firestore SDKͰར༻

    σϓϩΠ׬ྃͨ͠Β ͙͢ʹར༻Մೳ
  19. ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL /ZBO/ZBO/ZBOͷ৔߹ • FirebaseػೳͰ࢖͍ͬͯΔ͜ͱ • Hosting • Functions (GCPͷײ৘෼ੳͱͷ΍ΓͱΓ)

    • Cloud Firestore (෼ੳ݁ՌͷΈอ࣋) • ֎෦ • GCP Cloud Natural Language API (Functionsܦ༝ͷײ৘෼ੳ)
 ※ແྉ࿮ͷ৔߹Functions͸GoogleͷαʔϏεͱ͔͠௨৴Ͱ͖ͳ͍ • Google Analytics • Google AdSense
  20. ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL /ZBO/ZBO/ZBO
 ɹͷத਎

  21. ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL /ZBO/ZBO/ZBOͷ৔߹ • FirebaseػೳͰ࢖͍ͬͯΔ͜ͱ • Hosting • Functions (GCPͷײ৘෼ੳͱͷ΍ΓͱΓ)

    • Cloud Firestore (෼ੳ݁ՌͷΈอ࣋) • ֎෦ • GCP Cloud Natural Language API (Functionsܦ༝ͷײ৘෼ੳ) • Google Analytics • Google AdSense ※ແྉ࿮ͷ৔߹Functions͸GoogleͷαʔϏεͱ͔͠௨৴Ͱ͖ͳ͍ ͜ͷ͋ͨΓͷ࿩
  22. ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL )PTUJOH 7VFKT • ίʔυΛͬ͘͟Γ

  23. ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL 'VODUJPOT /PEFKT • ίʔυΛͬ͘͟Γ

  24. ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL ؀ڥ • ։ൃ൛
 →खݩͰಈ͔͠ͳ͕Βਵ࣌֬ೝ • εςʔδϯά൛
 →Firebase্Ͱ૝ఆ௨Γʹಈ͔͘ͷ֬ೝ •

    ϦϦʔε൛
 →ϦϦʔε!
  25. ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL )PTUJOH 7VFKT • ؀ڥΛ஍ຯʹ࢖͍෼͚ • “config/dev.env.js”, “build/webpack.dev.conf.js” /

    ։ൃ൛ • “config/stg.env.js”, “build/webpack.stg.conf.js” / εςʔδϯά൛ • “config/prod.env.js”, “build/webpack.prod.conf.js” / ϦϦʔε൛ • ։ൃ൛Λ࢖͏৔߹
 →ϩʔΧϧͰ “yarn dev” ࣮ߦ • εςʔδϯά൛Λ࢖͏৔߹
 →ϩʔΧϧͰ “yarn build && yarn deploy” ࣮ߦ • ϦϦʔε൛Λ࢖͏৔߹
 →ϩʔΧϧͰ “yarn rel-build && yarn rel-deploy” ࣮ߦ
  26. ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL 'VODUJPOT /PEFKT • ؀ڥม਺Λ஍ຯʹ࢖͍෼͚
 …͔͕ͨͬͨɺएׯ໘౗ɻ • ։ൃ൛Λ࢖͏৔߹
 →ϩʔΧϧͰ

    “npm run serve” ࣮ߦ • εςʔδϯά൛Λ࢖͏৔߹
 →Functionsͷ “config”ઃఆ && ϩʔΧϧͰ “yarn deploy” ࣮ߦ • ϦϦʔε൛Λ࢖͏৔߹
 →Functionsͷ “config”ઃఆ && ϩʔΧϧͰ “yarn rel-deploy” ࣮ߦ
  27. ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL ·ͱΊ

  28. ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL ·ͱΊ • Vue.js + Firebase Ͱ
 ʮʹΌʔΜʯͱͳ͘WebΞϓϦΛ࡞ͬͨɻ •

    Firebase Λ࢖͏ͱɺ
 ؆୯ʹϑϩϯτΤϯυத৺ͷαʔϏεΛ࡞ΕΔɻ • ؀ڥͷ࢖͍෼͚΋ Vue.js + Firebase ͰͰ͖Δɻ
  29. ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL ·ͱΊ • Vue.js ͷίϯϙʔωϯτͳͲͷߏ੒͸ɺ
 ϦϑΝΫλͷ༨஍͋Γɻ • ͦ΋ͦ΋ɺVue CLI

    3 Ͱ࡞Γ௚͍ͨ͠ɻ • ؀ڥͷઃఆ΍࢖͍෼͚͸ɺ
 ͪΌΜͱ੔ཧɾखॱԽ͓͖͍ͯͨ͠ɻ
  30. ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL 13

  31. ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL ΏΔ8FCษڧձ XJUI.POBDB6(JO4BQQPSP

  32. ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL ΏΔ8FCษڧձ XJUI.POBDB6(JO4BQQPSP 2019೥5݄30೔ (໦) ։࠵ܾఆ!!!

  33. ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL ΏΔ8FCษڧձ XJUI.POBDB6(JO4BQQPSP Monaca ͱ͸? → HTML/CSS/JavaScriptͰ
 ɹεϚϗΞϓϦΛ࡞ΕΔ
 ɹϓϥοτϑΥʔϜ

  34. ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL ΏΔ8FCษڧձ XJUI.POBDB6(JO4BQQPSP ڵຯͷ͋Δํ͸
 ӈͷQRίʔυΛνΣοΫ!!

  35. ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL ΏΔ8FCษڧձ XJUI.POBDB6(JO4BQQPSP ٸื:
 ɹ͜ͷษڧձͰ
 ɹൃදͯ͘͠ΕΔਓ! 20෼࿮ 1໊ /

    LT(5෼)࿮ 1໊
  36. ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL FOE