Save 37% off PRO during our Black Friday Sale! »

SvelteKitでJamstackを試す

 SvelteKitでJamstackを試す

ジャムジャム!!Jamstack_2【初心者歓迎LT会】での資料です。

B22ff27b7826e3299c8dba2e99f2aef8?s=128

Kazuki Shibata

October 28, 2021
Tweet

Transcript

  1. 4WFMUF,JUͰ+BNTUBDLΛࢼ͢ !TIJCF δϟϜδϟϜʂ+BNTUBDLWPM

  2. ࣗݾ঺հ !TIJCF ࣲా ࿨ف / Kazuki Shibata גࣜձࣾNJDSP$.4ͷڞಉ૑ۀऀ $00ɻ ԿͰ΋԰ɻ41"͕޷͖ɻ

  3.  ϏϡʔΛੜ੒͢ΔϥΠϒϥϦ  3FBDU΍7VFͱҟͳΓɺϥΠϒϥϦͷίʔυΛ ΄ͱΜͲؚ·ͳ͍7BOJMMB+4ʹ͍ۙܗͰίϯύΠ ϧ͞ΕΔ  Ծ૝%0.Λ׶͑ͯ࠾༻͓ͯ͠ΒͣɺมߋΛ໋ྩ తʹ࣮ߦ͢Δ

  4. ໋ྩతͳॲཧ const { count } = this.state; this.setState({ count: count

    + 1 }) ; count += 1 ; 3FBDU 4WFMUF
  5. None
  6.  4WFMUFͷΞϓϦέʔγϣϯ༻ϑϨʔϜϫʔΫ  3FBDUͰ͍͏ͱ͜Ζͷ/FYUKT  7VFͰ͍͏ͱ͜Ζͷ/VYUKT  7JUF͕࠾༻͞Ε͍ͯΔͷͰϏϧυ͕ߴ଎  ·ͩϕʔλ൛

    4WFMUF,JUͱ͸
  7. "EBQUFS ͦͷ໊ͷ௨ΓɺϏϧυޙͷग़ྗܗࣜΛࢦఆͰ͖Δػೳɻ BEBQUFSTUBUJD શϖʔδΛ͋Β͔͡Ί੩తੜ੒͢Δ༻ BEBQUFSOPEF 443͢Δ༻ BEBQUFSWFSDFM 7FSDFMʹσϓϩΠ͢Δ༻ BEBQUFSOFUMJGZ /FUMJGZʹσϓϩΠ͢Δ༻

    +BNTUBDLͳΒίϨ
  8. 4WFMUF,JUͷߏ଄  ϑΝΠϧߏ੒͸/FYU΍/VYUͱ͍ۙ  TWFMUFϑΝΠϧͰϖʔδΛఆٛ  UTϑΝΠϧͰ"1*Λఆٛ

  9. UTϑΝΠϧʹΑΔ"1*ͷఆٛྫ import db from '$lib/database' ; /* * * @type

    {import('@sveltejs/kit').RequestHandler } */ export async function get({ params }) { // the `slug` parameter is available because this file // is called [slug].json.js const { slug } = params ; const article = await db.get(slug) ; if (article) { return { body: { articl e } } ; } }
  10. -PBEؔ਺ʢ/FYUKTͷHFU4UBUJD1SPQT૬౰ͷ΋ͷʣ <script context="module"> export async function load({ page, fetch, session,

    stuff }) { const url = `/blog/${page.params.slug}.json` ; const res = await fetch(url) ; if (res.ok) { return { props: { article: await res.json( ) } } ; } return { status: res.status , error: new Error(`Could not load ${url}` ) } ; } </script>
  11.  Ϗϧυ࣌ɺ41"ભҠ࣌ʹಈ࡞͢Δ  UTϑΝΠϧʹͯ੩తԽͨ͠+40/ Λऔಘ͠ʹ͍͘ͷ͕௨ྫͬΆ͍  ड͚औͬͨ΋ͷΛςϯϓϨʔτଆʹ ౉ͯ͠දࣔͷྲྀΕ  MFUʹҧ࿨ײ

    -PBE͔ΒͷදࣔͷྲྀΕ <script context="module"> export function load({ error, status }) { return { props: { title: `${status}: ${error.message}` } } ; } </script> <script> export let title ; </script> <h1>{title}</h1>
  12. 1SFGFUDI ϦϯΫઌΛϓϦϑΣονʢࣄલऔಘʣͯ͘͠ΕΔػೳɻ 1$ͳΒΦϯϚ΢εɺϞόΠϧͳΒλον࣌ʹMPBEؔ਺Λݺͼग़͢͜ͱͰ αʔόʔ͔ΒͷϨεϙϯεͷλΠϜϥάΛܰݮͰ͖Δɻ <a sveltekit:prefetch href=“blog/what-is-sveltekit" > What is

    SvelteKit ? </a> ˞ͪͳΈʹ/VYU΍/FYU͸σϑΥϧτͰ͸7JFXQPSU൑ఆͰϓϦϑΣον͢Δ
  13. एׯϋϚͬͨ΍ͭɻ ؀ڥม਺Λઃఆ͢ΔͨΊʹ͸QSF fi Yͱͯ͠7*5&@Λ͚ͭΔඞཁ͕͋Δɻ *NQPSUNFUBFOW7*5&@)0(&ͰࢀরͰ͖Δɻ ؀ڥม਺ VITE_API_KEY=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX X VITE_SERVICE_ID=XXXXXXXXXX

  14. ϒϩάΛ࡞ͬͯΈͨ 63- IUUQTXXXNZUIJOLJOHTOFU (JU)VC IUUQTHJUIVCDPNTIJCFNZUIJOLJOHT -JHIUIPVTF 1$ .PCJMF

  15. ࠔͬͨΒݟΔͱ͜Ζ ެࣜυΩϡϝϯτҰ୒ IUUQTLJUTWFMUFEFWEPDT

  16.  4WFMUF,JU͸ܰྔɺ଎͍ˠ+BNTUBDLͳ8FCαΠτʹ͸૬ੑྑͦ͞͏  ·ͩόά͕ଟ͍ҹ৅͕͋ΔͷͰɺW·Ͱ͸҆қʹΦεεϝͰ͖ͳ͍  ࠓޙ͡Θ͡ΘདྷΔؾ͕͢ΔͷͰɺઌۦऀʹͳΓ͍ͨํ͸ͥͻ ·ͱΊ

  17. Thanks :) !TIJCF