Nuxt.js + Firebase Hamamatsu.rb @jacoyutorius 

yuto ogi @jacoyutorius { language: [“ruby”, “javascript”], interested_in: [ “alexa skills”, “vuex” ] } 

Nuxt.js + Firebase ؒʹ߹Θͳ͔ͬͨ 

࡞ͬͨ΋ͷ IUUQpSFLQUZVUPPHJDPN 

Firekpt w7VFKT/VYUKT
w ࠓ೔ओʹ࿩͢͜ͱ
w7VFY
w ҰԠࠓ೔࿩͢͜ͱ
w'JSFCBTF
w 'JSFCBTFͷ3FBMUJNF%BUBCBTFΛ ࢖͍ͬͯΔͷͰɺଞϢʔβʔͷೖྗ಺༰ ͕ϦΞϧλΠϜʹ൓ө͞ΕΔ
w#VMNB
w 6*
w Ϩεϙϯγϒ 

Stack w7VFKT/VYUKT
w ࠓ೔ओʹ࿩͢͜ͱ
w7VFY
w ҰԠࠓ೔࿩͢͜ͱ
w'JSFCBTF
w 'JSFCBTFͷ3FBMUJNF%BUBCBTFΛ࢖͍ͬͯΔͷͰɺ ଞϢʔβʔͷೖྗ಺༰͕ϦΞϧλΠϜʹ൓ө͞ΕΔ
w#VMNB
w 6*
w Ϩεϙϯγϒ 

– Nuxt.js ͸͡Ίʹ (https:/ /ja.nuxtjs.org/guide/) “2016೥10݄25೔ zeit.co ͷνʔϜ͕ React ΞϓϦέʔγϣϯΛαʔόʔαΠυϨϯμϦϯά͢Δ ͨΊͷϑϨʔϜϫʔΫ Next.js Λൃද͠·ͨ͠ɻͦͯͦ͠ͷൃද͔ΒΘ͔ͣ਺࣌ؒޙɺNext.js ͱ ಉ͡΍ΓํͰɺ͔͠͠ࠓ౓͸ Vue.js ΛαʔόʔαΠυϨϯμϦϯά͢ΔΞϓϦέʔγϣϯΛߏங͢ ΔΞΠσΟΞ͕ੜ·Ε·ͨ͠ɻ͢ͳΘͪ Nuxt.js ͷ஀ੜͰ͢ɻ” 

Nuxt.js w 7VFKT༻ͷαʔόʔαΠυϨϯμϦϯά 443 ༻ϑϨʔϜϫʔΫ
w 443͸ඞਢͰ͸ͳ͘ɺΦϓγϣϯʹΑͬͯ41"ͷߏங΋Մೳ
w ࠓճ࡞ͬͨΞϓϦέʔγϣϯͰ΋443͍ͯ͠ͳ͍ 

Nuxt.js w 7VFKT

7VF3PVUFS

7VFY

8FCQBDL

#BCFM
౳͕૊ΈࠐΈࡁ Έ
w ໘౗ͳઃఆ͕ෆཁ
w lWVF
JOJUz
͔Β෼ఔ౓Ͱॳظը໘͕ىಈ͢Δ
w ॳΊͯSBJMT৮ͬͨͱ͖ͷخ͠Έ
w ։ൃ༻αʔόʔ͸ϗοτϦϩʔσΟϯάػೳ෇͖
w &4ελΠϧͷKTͰίʔσΟϯάΛ࢝ΊΒΕΔ 

Nuxt.js w ੩త)5.-Λੜ੒Ͱ͖ΔͷͰɺ4΍(JUIVC
QBHFT΁σϓϩΠͰ͖Δ
w )FSPLVͱ͔ʹ΋σϓϩΠͰ͖Δ 

$ vue init nuxt-community/starter-template my-first-nuxt-app $ cd my-first-nuxt-app $ yarn install $ yarn dev initialize 

$ 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഑Լʹ

σΟϨΫτϦϑΝΠϧΛஔ͚ͩ͘ͰϧʔςΟϯά ͕ఆٛ͞ΕΔ 

Vuex w 7VFKT༻ͷঢ়ଶ؅ཧύλʔϯ

ϥΠϒϥϦ
w 'MVY΍3FEVY͔ΒӨڹΛड͚͍ͯΔ
w ݫີʹ'MVYͱ͸ҧ͏ͬΆ͍
w ʰ7VFKT͸.77.Ͱ͋Δʱʰ'MVY͸.77.Ͱ͸ͳ͍ʱʰ7VFKT͸'MVYͰ͸ͳ͍ʱతͳɻ ͍͔ͭʰ͓લͷ'MVY͸ਅͷ'MVY͡ΌͶ͐ʱతͳهࣄ͕ग़͖ͯͦ͏
w ΞʔΩςΫνϟͷ͋Δ΂͖࿦͸ͱΓ͋͑ͣஔ͍͓͍ͯͯɺϑϨʔϜϫʔΫ͕ ਪ঑͢Δઃܭʹ৐ͬͯίʔυ͕៉ྷʹ࣮૷Ͱ͖Ε͹ͦΕͰྑ͍ͷͰ͸ͱ͍͏ ํ਑ 

w l4UBUFz͸άϩʔόϧͳσʔλετΞ
w σʔλͷঢ়ଶΛ؅ཧ͢Δz4UBUFz͕͋Γɺ ঢ়ଶΛมߋ͢Δૢ࡞Λ͢Δz"DUJPOTz ΍z.VUBUJPOTzɺ7VF
$PNQPOFOUT ͸"DUJPO΍.VUBUJPOΛݺͼग़͢͜ͱͰ ঢ়ଶͷૢ࡞Λ͢Δ
w ˞ωοτͰݟ͔͚ΔαϯϓϧίʔυͰ͸ɺ .VUBUJPOTΛͬ͢ඈ͹ͯ͠"DUJPOT͔Β4UBUFΛ มߋ͍ͯ͠Δ΋ͷ΋͋Γɺࠞཚͯ͠Δ Vuex 

ࡶͳײ૝ 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ͱ͔΍Ζ͏ͱ͢Δͱ·ͨপʹϋϚΓͦ͏ 

DESIGN EVO IUUQTXXXEFTJHOFWPDPN