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
Supabase + Nuxt3 の実装素振りで チャットアプリを作ってみた
Search
redamoon
October 12, 2023
1
170
Supabase + Nuxt3 の実装素振りで チャットアプリを作ってみた
SupabaseとNuxt3で実装したチャットアプリの資料
redamoon
October 12, 2023
Tweet
Share
More Decks by redamoon
See All by redamoon
MTDDCMeetupTokyo_2023_LT.pdf
redamoon
0
53
Movable Type を Headless CMS として活用した Jamstack開発手法
redamoon
0
110
Data APIを活用したWEBサイト構築手法
redamoon
1
48
sacss110_pdf.pdf
redamoon
1
81
Vue meet up sapporo Vue + Storybook導入について
redamoon
0
52
Movable Type 7を触ってみた
redamoon
0
200
HTML・CMSから考えるコンポーネント化について
redamoon
1
280
おれの使うさいきょうえでぃた
redamoon
0
160
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
22
1.6k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
123
39k
Statistics for Hackers
jakevdp
790
220k
A Philosophy of Restraint
colly
197
16k
The Language of Interfaces
destraynor
151
23k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
41
4.4k
Building Your Own Lightsaber
phodgson
100
5.7k
Into the Great Unknown - MozCon
thekraken
14
1k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
Being A Developer After 40
akosma
66
580k
Designing the Hi-DPI Web
ddemaree
276
33k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k
Transcript
ʢʣ 4VQBCBTF /VYUͷ࣮ૉৼΓͰ νϟοτΞϓϦΛ࡞ͬͯΈͨ 4B$444FBTPO7PM
Whoami גࣜձࣾHAMWORKS ϑϩϯτΤϯυΤϯδχΞ ؔޱ ༐थ / @redamoon Website : https://www.redamoon.net/
झຯɿԂܳɾDIY ϋογϡλάɿ#ԂδχΞ #ԂܳΤϯδχΞ ԻָɿSIAM SHADE ஶॻɿϓϩϑΣογϣφϧWebϓϩάϥϛϯά Vue.js ɹɹɹVue.jsͷશମ૾
"HFOEB • Supabaseͱʁ • νϟοτΞϓϦΛ࡞ͬͯΈͨ • SupabaseΛͬͯΈͨײ Photo by @sepigchi
Supabaseͱʁ
https://supabase.com/ Firebaseସͱͯ͠࡞ΒΕͨΫϥυϕʔεͷϓϥοτϑΥʔϜʢBaaSʣ ։ൃऀ͕࡞ΔWebΞϓϦέʔγϣϯʹඞཁͳπʔϧαʔϏεΛఏڙ
SupabaseͰͰ͖Δ͜ͱ ɾϦΞϧλΠϜσʔλϕʔεʢPostgreSQLϕʔεʣ ɾΞϓϦέʔγϣϯʹඞཁͳόοΫΤϯυͷػೳΛఏڙ͢ΔϓϥοτϑΥʔϜ ɹɹɾσʔλͷมߋΛϦΞϧλΠϜͰߪಡ͢Δ͜ͱ͕Ͱ͖Δ ɹɹɾPostgreSQLͷػೳΤίγεςϜΛ׆͔ͤΔͨΊ֦ுੑ͕ߴ͍ ɾαΠϯΞοϓɾϩάΠϯɾೝূτʔΫϯཧͳͲͷҰൠతͳೝূػೳΛαϙʔτ ɾΞοϓϩʔυɾμϯϩʔυɾཧͱ͍ͬͨετϨʔδػೳΛఏڙ ɾϑϩϯτΤϯυͷૄ௨ʹRESTful API
GraphQLΛఏڙ͢ΔͨΊɺಠࣗͷAPIߏங͕ෆཁ ɹɹɾϦΞϧλΠϜͰߪಡ͠ɺϑϩϯτΤϯυͷө͕Մೳ ɾOSSͰ։ൃ͞ΕͯΔͨΊɺίʔυΛ֬ೝ͢Δ͜ͱ͕Ͱ͖Δ ɾFirebaseΑΓΧελϚΠζɾ֦ுੑ͕༰қ
Supabase Firebase FirebaseͱSupabaseͷҧ͍ σʔλϕʔε NoSQLϕʔε PostgreSQLϕʔε ೝূ Firebase Authentication Supabase
Auth ྉۚ ϑϦʔϓϥϯ͋Γɻ ར༻ྔػೳʹԠͯ͡ ྉ͕͔͔ۚΔ Φʔϓϯιʔε ແྉ ϚωʔδυɾαʔϏεͷ߹ ྉ͕͔͔ۚΔ ΧεϚΠζੑ Ұ෦ͷػೳͷΧελϚΠζͷΈ Φʔϓϯιʔεͷ߹ ࣗ༝ʹΧελϚΠζՄೳ
Supabase ͷཧը໘
νϟοτΞϓϦΛ࡞ͬͯΈͨ Photo by @sepigchi
None
ͳͥνϟοτΞϓϦΛ࡞͔ͬͨʁ
ϦΞϧλΠϜσʔλϕʔεΛ׆༻ͨ͠ WebΞϓϦΛ࡞ͬͯΈͨ͘νϟοτΞϓϦʹͨ͠
ઌۦऀͷهࣄΛࢀߟʹͬͯΈͨ هࣄͷࣸܦ໘ന͘ͳ͍ͷͰɺNuxt3ͰͬͯΈͨ
νϟοτΞϓϦͷߏ ɾσʔλϕʔεɿSupabase ɾϑϩϯτΤϯυɿNuxt3 ɾϩάΠϯɾϩάΞτػೳʢGitHubʣ ɾνϟοτը໘ʢνϟϯωϧ1ͭʣ ɾϝοηʔδͷߘɾআɾฤूػೳ
Nuxt ڥͰ Supabase Λಈ͔͢ ɾNuxt Supabase ͷϞδϡʔϧར༻͠ͳ͍ܗʢࠓճษڧͷͨΊར༻͠ͳ͔ͬͨʣ ɾڥมɾઃఆϑΝΠϧ ɹɹɾσʔλϕʔεͷURLɾAPI Key͕ඞཁɾnuxt.con
fi g.tsͷมߋ ɾpluginsσΟϨΫτϦʹɺsupabaseͷ࣮ߦڥΛ͑Δ ɾೝূͷ࣮ ɾDatabaseͷଓ࣮ ɾνϟοτͷը໘࣮
·ͱΊʢSupabaseͷ׆༻ʹ͍ͭͯʣ ɾϦΞϧλΠϜͷσʔλಉظ͕ඞཁͳΞϓϦέʔγϣϯ ɾΞφϦςΟΫεͱ͍ͬͨϦΞϧλΠϜʹϩάΛऩू͍ͨ͠ΞϓϦέʔγϣϯ ɾҰൠతͳϒϩάCMSͷίϯςϯπཧͰ͖ΔΞϓϦέʔγϣϯ ɾిࢠऔҾͱ͍ͬͨɺࡏݿͷ֬ೝΛϦΞϧλΠϜͳ໘͕ඞཁͳEC ɾϚϧνϓϨΠͷήʔϜ ɾSNSͱ͍ͬͨϑΟʔυࠓճͷνϟοτΞϓϦ ɾϦΞϧλΠϜੑͷχϡʔεۓٸੑ͕ඞཁͳͷʢఱؾͱ͍ͬͨ௨ܥʣ
ؔ࿈ϦϯΫ ɾιʔείʔυɿhttps://github.com/redamoon/supabase-nuxt3-chat ɾεΫϥοϓɿhttps://zenn.dev/redamoon/scraps/89180b11c07be2