Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

-PBEؔ਺ʢ/FYUKTͷHFU4UBUJD1SPQT૬౰ͷ΋ͷʣ 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}` ) } ; }

Slide 11

Slide 11 text

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

{title}

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Thanks :) !TIJCF