SvelteKitでJamstackを試す

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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

4. ໋ྩతͳॲཧ
   const { count } = this.state;
   this.setState({
   count: count + 1
   })
   ;
   
   count += 1
   ;
   
   3FBDU 4WFMUF
   

   View Slide

5. View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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
   
   }
   
   }
   ;
   
   }
   
   }
   

   View Slide

10. -PBEؔ਺ʢ/FYUKTͷHFU4UBUJD1SPQT૬౰ͷ΋ͷʣ
    <br/>export async function load({ page, fetch, session, stuff })<br/>{<br/><br/>const url = `/blog/${page.params.slug}.json`<br/>;<br/><br/>const res = await fetch(url)<br/>;<br/><br/>if (res.ok)<br/>{<br/><br/>return<br/>{<br/><br/>props:<br/>{<br/><br/>article: await res.json(<br/>)<br/><br/>}<br/><br/>}<br/>;<br/><br/>}<br/><br/>return<br/>{<br/><br/>status: res.status<br/>,<br/><br/>error: new Error(`Could not load ${url}`<br/>)<br/><br/>}<br/>;<br/><br/>}<br/><br/>
    

    View Slide

11. Ϗϧυ࣌ɺ41"ભҠ࣌ʹಈ࡞͢Δ
    UTϑΝΠϧʹͯ੩తԽͨ͠+40/
    Λऔಘ͠ʹ͍͘ͷ͕௨ྫͬΆ͍
    ड͚औͬͨ΋ͷΛςϯϓϨʔτଆʹ
    ౉ͯ͠දࣔͷྲྀΕ
    MFUʹҧ࿨ײ
    -PBE͔ΒͷදࣔͷྲྀΕ
    <br/>export function load({ error, status })<br/>{<br/><br/>return<br/>{<br/><br/>props:<br/>{<br/><br/>title: `${status}: ${error.message}`<br/>}<br/><br/>}<br/>;<br/><br/>}<br/><br/>
    <br/>export let title<br/>;<br/><br/>
    {title}
    

    View Slide

12. 1SFGFUDI
    ϦϯΫઌΛϓϦϑΣονʢࣄલऔಘʣͯ͘͠ΕΔػೳɻ
    1$ͳΒΦϯϚ΢εɺϞόΠϧͳΒλον࣌ʹMPBEؔ਺Λݺͼग़͢͜ͱͰ
    αʔόʔ͔ΒͷϨεϙϯεͷλΠϜϥάΛܰݮͰ͖Δɻ
    >
    
    What is SvelteKit
    ?
    
    
    ˞ͪͳΈʹ/VYU΍/FYU͸σϑΥϧτͰ͸7JFXQPSU൑ఆͰϓϦϑΣον͢Δ
    

    View Slide

13. एׯϋϚͬͨ΍ͭɻ
    ؀ڥม਺Λઃఆ͢ΔͨΊʹ͸QSF
    fi
    Yͱͯ͠7*5&@Λ͚ͭΔඞཁ͕͋Δɻ
    *NQPSUNFUBFOW7*5&@)0(&ͰࢀরͰ͖Δɻ
    ؀ڥม਺
    VITE_API_KEY=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
    X
    
    VITE_SERVICE_ID=XXXXXXXXXX
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

17. Thanks :)
    !TIJCF
    

    View Slide