Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Nuxt.js + Firebase
Search
jacoyutorius
February 14, 2018
Technology
0
250
Nuxt.js + Firebase
Hamamatsu.rb #83にて、Nuxt.jsについて簡単に紹介したLT資料。
jacoyutorius
February 14, 2018
Tweet
Share
More Decks by jacoyutorius
See All by jacoyutorius
kamalでRailsアプリを Amazon Lightsailにデプロイするぞ!
jacoyutorius
0
77
オープンデータとAWSで作っている 浜松市イベントカレンダー
jacoyutorius
0
240
浜松市オープンデータを使ってイベントカレンダーアプリを作りました
jacoyutorius
0
77
Amplifyアプリを 任意のタイミングでデプロイするぞ!
jacoyutorius
1
410
AWS Amplify で翻訳アプリを作った話とAmplifyからカジュアルにCloudWatchLogsにログを送る方法について
jacoyutorius
1
1.3k
AWS App Runner + copilot cli
jacoyutorius
1
1.1k
AWS App Runner + Copilot CLI
jacoyutorius
0
56
covid19対策サイトを通してコミュニティとシビックテックのあり方について思うこと
jacoyutorius
0
380
Getting Started Amazon Location Service with Vue.js
jacoyutorius
0
130
Other Decks in Technology
See All in Technology
30→150人のエンジニア組織拡大に伴うアジャイル文化を醸成する役割と取り組みの変化
nagata03
0
350
どちらかだけじゃもったいないかも? ECSとEKSを適材適所で併用するメリット、運用課題とそれらの対応について
tk3fftk
2
280
LayerXにおけるAI活用事例とその裏側(2025年2月) バクラクの目指す “業務の自動運転” の例 / layerx-ai-deim2025
yuya4
1
530
開発者のための FinOps/FinOps for Engineers
oracle4engineer
PRO
2
250
Cracking the Coding Interview 6th Edition
gdplabs
14
28k
Log Analytics を使った実際の運用 - Sansan Data Hub での取り組み
sansantech
PRO
0
110
4th place solution Eedi - Mining Misconceptions in Mathematics
rist
0
150
AWSではじめる Web APIテスト実践ガイド / A practical guide to testing Web APIs on AWS
yokawasa
8
780
x86-64 Assembly Essentials
latte72
3
390
OPENLOGI Company Profile
hr01
0
60k
AI自体のOps 〜LLMアプリの運用、AWSサービスとOSSの使い分け〜
minorun365
PRO
9
990
マルチアカウント環境における組織ポリシーについて まとめてみる
nrinetcom
PRO
2
110
Featured
See All Featured
Adopting Sorbet at Scale
ufuk
75
9.2k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
For a Future-Friendly Web
brad_frost
176
9.6k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.5k
Writing Fast Ruby
sferik
628
61k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
The Cult of Friendly URLs
andyhume
78
6.2k
4 Signs Your Business is Dying
shpigford
183
22k
Being A Developer After 40
akosma
89
590k
We Have a Design System, Now What?
morganepeng
51
7.4k
Transcript
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/) “201610݄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 7VFKT7VF3PVUFS7VFY8FCQBDL#BCFM͕ΈࠐΈࡁ Έ w ໘ͳઃఆ͕ෆཁ w lWVFJOJUz͔ΒఔͰॳظը໘͕ىಈ͢Δ w ॳΊͯSBJMT৮ͬͨͱ͖ͷخ͠Έ
w ։ൃ༻αʔόʔϗοτϦϩʔσΟϯάػೳ͖ w &4ελΠϧͷKTͰίʔσΟϯάΛ࢝ΊΒΕΔ
Nuxt.js w ੩త)5.-ΛੜͰ͖ΔͷͰɺ4(JUIVCQBHFTσϓϩΠͰ͖Δ 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 'MVY3FEVY͔ΒӨڹΛड͚͍ͯΔ 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%FWFMPQQFS5PPMTΛೖΕΔͱͤ w 443ͱ͔Ζ͏ͱ͢Δͱ·ͨপʹϋϚΓͦ͏
DESIGN EVO IUUQTXXXEFTJHOFWPDPN