Nuxt.js + Firebase

Hamamatsu.rb #83にて、Nuxt.jsについて簡単に紹介したLT資料。

Transcript

1. Nuxt.js + Firebase Hamamatsu.rb @jacoyutorius
2. yuto ogi @jacoyutorius { language: [“ruby”, “javascript”], interested_in: [ “alexa skills”, “vuex” ] }
3. Nuxt.js + Firebase ؒʹ߹Θͳ͔ͬͨ
4. ࡞ͬͨ΋ͷ IUUQpSFLQUZVUPPHJDPN
5. Firekpt w7VFKT/VYUKT
   w ࠓ೔ओʹ࿩͢͜ͱ
   w7VFY
   w ҰԠࠓ೔࿩͢͜ͱ
   w'JSFCBTF
   w 'JSFCBTFͷ3FBMUJNF%BUBCBTFΛ ࢖͍ͬͯΔͷͰɺଞϢʔβʔͷೖྗ಺༰ ͕ϦΞϧλΠϜʹ൓ө͞ΕΔ
   w#VMNB
   w 6*
   w Ϩεϙϯγϒ
6. Stack w7VFKT/VYUKT
   w ࠓ೔ओʹ࿩͢͜ͱ
   w7VFY
   w ҰԠࠓ೔࿩͢͜ͱ
   w'JSFCBTF
   w 'JSFCBTFͷ3FBMUJNF%BUBCBTFΛ࢖͍ͬͯΔͷͰɺ ଞϢʔβʔͷೖྗ಺༰͕ϦΞϧλΠϜʹ൓ө͞ΕΔ
   w#VMNB
   w 6*
   w Ϩεϙϯγϒ
7. – Nuxt.js ͸͡Ίʹ (https:/ /ja.nuxtjs.org/guide/) “2016೥10݄25೔ zeit.co ͷνʔϜ͕ React ΞϓϦέʔγϣϯΛαʔόʔαΠυϨϯμϦϯά͢Δ ͨΊͷϑϨʔϜϫʔΫ Next.js Λൃද͠·ͨ͠ɻͦͯͦ͠ͷൃද͔ΒΘ͔ͣ਺࣌ؒޙɺNext.js ͱ ಉ͡΍ΓํͰɺ͔͠͠ࠓ౓͸ Vue.js ΛαʔόʔαΠυϨϯμϦϯά͢ΔΞϓϦέʔγϣϯΛߏங͢ ΔΞΠσΟΞ͕ੜ·Ε·ͨ͠ɻ͢ͳΘͪ Nuxt.js ͷ஀ੜͰ͢ɻ”
8. Nuxt.js w 7VFKT༻ͷαʔόʔαΠυϨϯμϦϯά 443 ༻ϑϨʔϜϫʔΫ
   w 443͸ඞਢͰ͸ͳ͘ɺΦϓγϣϯʹΑͬͯ41"ͷߏங΋Մೳ
   w ࠓճ࡞ͬͨΞϓϦέʔγϣϯͰ΋443͍ͯ͠ͳ͍
9. Nuxt.js w 7VFKT
   
   7VF3PVUFS
   
   7VFY
   
   8FCQBDL
   
   #BCFM
   ౳͕૊ΈࠐΈࡁ Έ
   w ໘౗ͳઃఆ͕ෆཁ
   w lWVF
   JOJUz
   ͔Β෼ఔ౓Ͱॳظը໘͕ىಈ͢Δ
   w ॳΊͯSBJMT৮ͬͨͱ͖ͷخ͠Έ
   w ։ൃ༻αʔόʔ͸ϗοτϦϩʔσΟϯάػೳ෇͖
   w &4ελΠϧͷKTͰίʔσΟϯάΛ࢝ΊΒΕΔ
10. Nuxt.js w ੩త)5.-Λੜ੒Ͱ͖ΔͷͰɺ4΍(JUIVC
    QBHFT΁σϓϩΠͰ͖Δ
    w )FSPLVͱ͔ʹ΋σϓϩΠͰ͖Δ
11. $ vue init nuxt-community/starter-template my-first-nuxt-app $ cd my-first-nuxt-app $ yarn install $ yarn dev initialize
12. $ tree ~/Work/nuxt/my-first-nuxtjs-app -L 2 ᵓᴷᴷ README.md ᵓᴷᴷ assets ᴹ ᵋᴷᴷ README.md ᵓᴷᴷ components ᴹ ᵓᴷᴷ AppLogo.vue ᴹ ᵋᴷᴷ README.md ᵓᴷᴷ layouts ᴹ ᵓᴷᴷ README.md ᴹ ᵋᴷᴷ default.vue ᵓᴷᴷ middleware ᴹ ᵋᴷᴷ README.md ᵓᴷᴷ nuxt.config.js ᵓᴷᴷ package.json ᵓᴷᴷ pages ᴹ ᵓᴷᴷ README.md ᴹ ᵋᴷᴷ index.vue ᵓᴷᴷ plugins ᴹ ᵋᴷᴷ README.md ᵓᴷᴷ static ᴹ ᵓᴷᴷ README.md ᴹ ᵋᴷᴷ favicon.ico ᵋᴷᴷ store ᵋᴷᴷ README.md w TUBSUFSUFNQMBUFΛ࢖͏ͱ࠷௿ݶͷઃఆϑΝΠ ϧͱσΟϨΫτϦ͕ੜ੒͞ΕΔ
    w Ͳ͜ʹԿΛஔ͘΂͖͔ܾΊͯ͘Ε͍ͯΔͷ͸ҙ֎ ͱॿ͔Δ
    w ͋ͪͪ͜ʹ3&"%.&͕͋Δͷ͸΍΍अຐ͚ͩͲɺ ͦͷσΟϨΫτϦͷ༻్͕ॻ͍ͯ͋Δ
    w WVFSPVUFS͕ઃఆࡁΈͳͷͰɺQBHFT഑Լʹ
    
    σΟϨΫτϦϑΝΠϧΛஔ͚ͩ͘ͰϧʔςΟϯά ͕ఆٛ͞ΕΔ
13. Vuex w 7VFKT༻ͷঢ়ଶ؅ཧύλʔϯ
    
    ϥΠϒϥϦ
    w 'MVY΍3FEVY͔ΒӨڹΛड͚͍ͯΔ
    w ݫີʹ'MVYͱ͸ҧ͏ͬΆ͍
    w ʰ7VFKT͸.77.Ͱ͋Δʱʰ'MVY͸.77.Ͱ͸ͳ͍ʱʰ7VFKT͸'MVYͰ͸ͳ͍ʱతͳɻ ͍͔ͭʰ͓લͷ'MVY͸ਅͷ'MVY͡ΌͶ͐ʱతͳهࣄ͕ग़͖ͯͦ͏
    w ΞʔΩςΫνϟͷ͋Δ΂͖࿦͸ͱΓ͋͑ͣஔ͍͓͍ͯͯɺϑϨʔϜϫʔΫ͕ ਪ঑͢Δઃܭʹ৐ͬͯίʔυ͕៉ྷʹ࣮૷Ͱ͖Ε͹ͦΕͰྑ͍ͷͰ͸ͱ͍͏ ํ਑
14. w l4UBUFz͸άϩʔόϧͳσʔλετΞ
    w σʔλͷঢ়ଶΛ؅ཧ͢Δz4UBUFz͕͋Γɺ ঢ়ଶΛมߋ͢Δૢ࡞Λ͢Δz"DUJPOTz ΍z.VUBUJPOTzɺ7VF
    $PNQPOFOUT ͸"DUJPO΍.VUBUJPOΛݺͼग़͢͜ͱͰ ঢ়ଶͷૢ࡞Λ͢Δ
    w ˞ωοτͰݟ͔͚ΔαϯϓϧίʔυͰ͸ɺ .VUBUJPOTΛͬ͢ඈ͹ͯ͠"DUJPOT͔Β4UBUFΛ มߋ͍ͯ͠Δ΋ͷ΋͋Γɺࠞཚͯ͠Δ Vuex
15. ࡶͳײ૝ w &4ͷॻ͖ํΛ͖ͪΜͱ͍֮͑ͯͳ͍ʢλΠϙͰϋϚΔʣ
    w 7VFY͸Ͳ͏͍͏ઃܭʹ͢΂͖͔೉͍͠ ಛʹNVUBUJPOͱBDUJPOͷ࢖͍෼͚
    w ͍ͭͰʹɺBTZODBXBJU
    ͱ
    QSPNJTFʹ͍ͭͯ΋ཧղ͢Δඞཁ͋Γ
    w JOJU͢Δͱɺॳظϖʔδ QBHFTJOEFYWVF
    ͕ੜ੒͞ΕΔͷͰɺ͜ΕΛ͍͡Γͳ͕Βษڧ͢Δͱ͍ ͍ͧɻɻ
    w ͱΓ͋͑ͣɺQBHFTJOEFYWVFͰΰϦΰϦॻ͍͍ͯͬͯɺ͋ͱ͔ΒDPNQPOFOUʹ෼ׂͨ͠Γɺ 7VFYͰσʔλϑϩʔΛ៉ྷʹͨ͠Γ͢Ε͹͍͍ͱࢥ͏ɻɻɻ
    w ૒ํ޲σʔλόΠϯσΟϯάʹ׳ΕΔͱ΋͏ʮ
     lJEz WBM 
    ʯͱ͔ʹ໭Εͳ͍
    w $ISPNF'JSFGPYͷ7VF
    %FWFMPQQFS
    5PPMTΛೖΕΔͱ޾ͤ
    w 443ͱ͔΍Ζ͏ͱ͢Δͱ·ͨপʹϋϚΓͦ͏
16. DESIGN EVO IUUQTXXXEFTJHOFWPDPN