Supabase + Nuxt3 の実装素振りで チャットアプリを作ってみた

SupabaseとNuxt3で実装したチャットアプリの資料

Transcript

1. ʢ໦ʣ 4VQBCBTF
   
   /VYU
   ͷ࣮૷ૉৼΓͰ
   νϟοτΞϓϦΛ࡞ͬͯΈͨ 4B$44
   4FBTPO
   
   7PM
2. Whoami גࣜձࣾHAMWORKS ϑϩϯτΤϯυΤϯδχΞ ؔޱ ༐थ / @redamoon Website : https://www.redamoon.net/ झຯɿԂܳɾDIY ϋογϡλάɿ#ԂδχΞ #ԂܳΤϯδχΞ ԻָɿSIAM SHADE ஶॻɿϓϩϑΣογϣφϧWebϓϩάϥϛϯά Vue.js ɹɹɹVue.jsͷશମ૾
3. "HFOEB • Supabaseͱ͸ʁ • νϟοτΞϓϦΛ࡞ͬͯΈͨ • SupabaseΛ࢖ͬͯΈͨײ૝ Photo by @sepigchi
4. Supabaseͱ͸ʁ
5. https://supabase.com/ Firebase୅ସ඼ͱͯ͠࡞ΒΕͨΫϥ΢υϕʔεͷϓϥοτϑΥʔϜʢBaaSʣ ։ൃऀ͕࡞ΔWebΞϓϦέʔγϣϯʹඞཁͳπʔϧ΍αʔϏεΛఏڙ
6. SupabaseͰͰ͖Δ͜ͱ ɾϦΞϧλΠϜσʔλϕʔεʢPostgreSQLϕʔεʣ ɾΞϓϦέʔγϣϯʹඞཁͳόοΫΤϯυͷػೳΛఏڙ͢ΔϓϥοτϑΥʔϜ ɹɹɾσʔλͷมߋΛϦΞϧλΠϜͰߪಡ͢Δ͜ͱ͕Ͱ͖Δ ɹɹɾPostgreSQLͷػೳ΍ΤίγεςϜΛ׆͔ͤΔͨΊ֦ுੑ͕ߴ͍ ɾαΠϯΞοϓɾϩάΠϯɾೝূτʔΫϯ؅ཧͳͲͷҰൠతͳೝূػೳΛαϙʔτ ɾΞοϓϩʔυɾμ΢ϯϩʔυɾ؅ཧͱ͍ͬͨετϨʔδػೳΛఏڙ ɾϑϩϯτΤϯυͷૄ௨ʹ͸RESTful API ΍ GraphQLΛఏڙ͢ΔͨΊɺಠࣗͷAPIߏங͕ෆཁ ɹɹɾϦΞϧλΠϜͰߪಡ͠ɺϑϩϯτΤϯυ΁ͷ൓ө͕Մೳ ɾOSSͰ։ൃ͞ΕͯΔͨΊɺίʔυΛ֬ೝ͢Δ͜ͱ͕Ͱ͖Δ ɾFirebaseΑΓ΋ΧελϚΠζɾ֦ுੑ͕༰қ
7. Supabase Firebase FirebaseͱSupabaseͷҧ͍ σʔλϕʔε NoSQLϕʔε PostgreSQLϕʔε ೝূ Firebase Authentication Supabase Auth ྉۚ ϑϦʔϓϥϯ͋Γɻ ར༻ྔ΍ػೳʹԠͯ͡ ྉ͕͔͔ۚΔ Φʔϓϯιʔε ແྉ ϚωʔδυɾαʔϏεͷ৔߹͸ ྉ͕͔͔ۚΔ ΧεϚΠζੑ Ұ෦ͷػೳͷΧελϚΠζͷΈ Φʔϓϯιʔεͷ৔߹ ࣗ༝ʹΧελϚΠζՄೳ
8. Supabase ͷ؅ཧը໘
9. νϟοτΞϓϦΛ࡞ͬͯΈͨ Photo by @sepigchi
11. ͳͥνϟοτΞϓϦΛ࡞͔ͬͨʁ
12. ϦΞϧλΠϜσʔλϕʔεΛ׆༻ͨ͠ WebΞϓϦΛ࡞ͬͯΈͨ͘νϟοτΞϓϦʹͨ͠
13. ઌۦऀͷهࣄΛࢀߟʹ΍ͬͯΈͨ هࣄͷࣸܦ͸໘ന͘ͳ͍ͷͰɺNuxt3Ͱ΍ͬͯΈͨ
14. νϟοτΞϓϦͷߏ੒ ɾσʔλϕʔεɿSupabase ɾϑϩϯτΤϯυɿNuxt3 ɾϩάΠϯɾϩάΞ΢τػೳʢGitHubʣ ɾνϟοτը໘ʢνϟϯωϧ͸1ͭʣ ɾϝοηʔδͷ౤ߘɾ࡟আɾฤूػೳ
15. Nuxt ؀ڥͰ Supabase Λಈ͔͢ ɾNuxt Supabase ͷϞδϡʔϧ͸ར༻͠ͳ͍ܗʢࠓճ͸ษڧͷͨΊར༻͠ͳ͔ͬͨʣ ɾ؀ڥม਺ɾઃఆϑΝΠϧ ɹɹɾσʔλϕʔε΁ͷURLɾAPI Key͕ඞཁɾnuxt.con fi g.tsͷมߋ ɾpluginsσΟϨΫτϦʹɺsupabaseͷ࣮ߦ؀ڥΛ੔͑Δ ɾೝূͷ࣮૷ ɾDatabaseͷ઀ଓ࣮૷ ɾνϟοτͷը໘࣮૷
16. ·ͱΊʢSupabaseͷ׆༻ʹ͍ͭͯʣ ɾϦΞϧλΠϜͷσʔλಉظ͕ඞཁͳΞϓϦέʔγϣϯ ɾΞφϦςΟΫεͱ͍ͬͨϦΞϧλΠϜʹϩάΛऩू͍ͨ͠ΞϓϦέʔγϣϯ ɾҰൠతͳϒϩά΍CMSͷίϯςϯπ؅ཧͰ͖ΔΞϓϦέʔγϣϯ ɾిࢠ঎औҾͱ͍ͬͨɺࡏݿͷ֬ೝΛϦΞϧλΠϜͳ৔໘͕ඞཁͳEC౳ ɾϚϧνϓϨΠͷήʔϜ ɾSNSͱ͍ͬͨϑΟʔυ΍ࠓճͷνϟοτΞϓϦ౳ ɾϦΞϧλΠϜੑͷχϡʔε΍ۓٸੑ͕ඞཁͳ΋ͷʢఱؾ΍஍਒ͱ͍ͬͨ௨஌ܥʣ
17. ؔ࿈ϦϯΫ ɾιʔείʔυɿhttps://github.com/redamoon/supabase-nuxt3-chat ɾεΫϥοϓɿhttps://zenn.dev/redamoon/scraps/89180b11c07be2