SvelteKitでJamstackを試す

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

Transcript

1. 4WFMUF,JUͰ+BNTUBDLΛࢼ͢ !TIJCF δϟϜδϟϜʂ+BNTUBDL
   WPM
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
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