inflearn logo
inflearn logo

Svelte.js [Core API] ๅฎŒๅ…จใ‚ฌใ‚คใƒ‰

21ๆ™‚้–“ใ‚’่ถ…ใˆใ‚‹ๅˆ†้‡ใฎๆœ€้ซ˜ใฎSvelte.js่ฌ›็พฉ๏ผ

้›ฃๆ˜“ๅบฆ ๅˆ็ดš

ๅ—่ฌ›ๆœŸ้–“ ็„กๅˆถ้™

Svelte
Svelte
Rollup
Rollup
Sortable
Sortable
Svelte
Svelte
Rollup
Rollup
Sortable
Sortable

ใŠ็Ÿฅใ‚‰ใ›

5 ไปถ

  • heropy๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€

    ใ€ŒSvelte.js [Core API] ๅฎŒๅ…จใ‚ฌใ‚คใƒ‰ใ€ใ‚’ๅ—่ฌ›ใ™ใ‚‹็š†ๆง˜ใ“ใ‚“ใซใกใฏใ€œ
    ่ฌ›ๅธซใƒ‘ใ‚ฏใƒปใƒ’ใƒผใƒญใƒผใ€‚

    ไปฅๅ‰ใฎใŠ็Ÿฅใ‚‰ใ›ไปฅ้™ใ€ไปŠๆ—ฅใพใงๆฌกใฎๆ–ฐใ—ใ„ใƒ‘ใƒผใƒ„ใ‚’่ฟฝๅŠ ๆ’ฎๅฝฑใ—ใพใ—ใŸใ€‚

    - 11-5ใ€‚
    - 15-1

    11-5็•ชใฏใ‚ณใƒณใƒใƒผใƒใƒณใƒˆใ‚นใƒญใƒƒใƒˆใซ้–ขใ™ใ‚‹่ฟฝๅŠ ๆฉŸ่ƒฝใงใ‚ใ‚Šใ€
    15-1ใฏใ€ใƒฌใƒƒใ‚นใƒณใซๅซใพใ‚Œใฆใ„ใ‚‹ใ€ŒTrelloใ‚ฏใƒญใƒผใƒณใ‚ขใƒ—ใƒชใฎไพ‹ใ€ใ‚’ไฝœๆˆใ™ใ‚‹ๅ‰ใซๅฟ…ใš่ฆ‹ใฆใ„ใŸใ ใใ‚คใƒณใ‚นใƒˆใƒผใƒซใƒขใ‚ธใƒฅใƒผใƒซใฎใƒใƒผใ‚ธใƒงใƒณไธ€่‡ดๆ–นๆณ•ใงใ™ใ€‚
    ๆ–ฐใ—ใ„ใƒ“ใƒ‡ใ‚ชใ‚’ใƒใ‚งใƒƒใ‚ฏใ—ใฆใใ ใ•ใ„ใ€œ๐Ÿ˜‰

    ใใ—ใฆใ€ใƒ–ใƒญใ‚ฐใ‚‚ๆœ€ๆ–ฐใฎๅ†…ๅฎนใซๆ›ดๆ–ฐใ—ใพใ—ใŸใ€‚
    ๅญฆ็ฟ’ใ™ใ‚‹ใจใใซๅ‚่€ƒใซใ—ใฆใใ ใ•ใ„ใ€œ

    2020ๅนดใ‚‚ใ‚‚ใ†ไธ€ๆ—ฅๆฎ‹ใ‚Šใพใ—ใŸใญใ€‚
    ใƒ€ใ‚ตใƒ€ใƒŠใƒณใ—ใŸไธ€ๅนดใ‚ˆใไป•ไธŠใ’ใฆใ€
    ๆฅๅนดใฏใฟใ‚“ใชๆฅฝใ—ใใ€ๅนธใ›ใซใใ—ใฆ่‡ช็”ฑใซๆญฉใๅ›žใ‚‹ใ“ใจใŒใงใใŸใ‚‰ใจๆ€ใ„ใพใ™ใ€‚ 

    ใ‚ใ‘ใพใ—ใฆใŠใ‚ใงใจใ†ใ”ใ–ใ„ใพใ™ใ€œโญ
    ใ‚ใ‚ŠใŒใจใ†ใ”ใ–ใ„ใพใ™ใ€‚

    4
  • heropy๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€

    ใŠ็Ÿฅใ‚‰ใ›ใ—ใŸSvelte.jsใฎๆฌกใฎ่ฌ›็พฉใ‚’ใ„ใ‚ˆใ„ใ‚ˆใƒชใƒชใƒผใ‚นใ—ใพใ—ใŸ๏ผ ๐Ÿ‘

    ใƒชใƒณใ‚ฏ๏ผš [Svelte.js SPAๆ˜ ็”ปๆคœ็ดขใƒ—ใƒญใ‚ธใ‚งใ‚ฏใƒˆ]

    ไปŠๅ›žใฎ่ฌ›็พฉใ‚’่ปฝใ็ดนไป‹ใ—ใ‚ˆใ†ใจใ™ใ‚‹ใจใ€

    SPA๏ผˆSingle Page Application๏ผ‰ใƒ™ใƒผใ‚นใฎใƒ ใƒผใƒ“ใƒผๆคœ็ดขAPIใ‚’ๆดป็”จใ™ใ‚‹ไพ‹ใฎ่ฌ›็พฉใงใ€

    ๅฐ‘ใ—็‰นๅˆฅใช้ƒจๅˆ†ใฏใ€ๆ˜ ็”ปๆคœ็ดขใฎใŸใ‚ใฎใ€ŒAPIใ‚ญใƒผใ€ใ‚’ใƒฆใƒผใ‚ถใƒผใ‚จใ‚ฏใ‚นใƒšใƒชใ‚จใƒณใ‚นใซใ•ใ‚‰ใ•ใชใ„ใ‚ˆใ†ใซใ€

    AWS Lambdaใƒ™ใƒผใ‚นใฎNetlifyใ‚ตใƒผใƒใƒผใƒฌใ‚น้–ขๆ•ฐใ‚’ไฝฟ็”จใ—ใฆใƒใƒƒใ‚ฏใ‚จใƒณใƒ‰APIใ‚’็ฐกๅ˜ใซไฝœๆˆใ—ใ€ใƒญใƒผใ‚ซใƒซใงใƒ†ใ‚นใƒˆใ‚‚้€ฒใ‚ใพใ™๏ผ

    ๆฆ‚ๅฟตใ ใ‘ใ‚’็†่งฃใ™ใ‚Œใฐใ€ใƒ•ใƒญใƒณใƒˆใ‚จใƒณใƒ‰้–‹็™บใ‚’ๅ‹‰ๅผทใ—ใฆใ„ใ‚‹ๆ–นใ‚‚ใ„ใคใงใ‚‚ๆดป็”จใงใใ‚‹ๆ–นๆณ•ใชใฎใงใ€ๅฎŸ้š›ใฎไฝฟ็”จใซๅคšใใฎๅฝนใซ็ซ‹ใคใฎใงใฏใชใ„ใ‹ใจๆœŸๅพ…ใ—ใพใ™ใ€‚

    ๅˆ่จˆ7ๆ™‚้–“40ๅˆ†่ฌ›็พฉใงใ€ใ‚ชใƒผใƒ—ใƒณ30๏ผ…ๅ‰ฒๅผ•ใง7,700ใ‚ฆใ‚ฉใƒณใง็™ป้Œฒใ—ใพใ—ใŸใ€‚

    ็จŽ้‡‘ใ‚’้™คใๅŸบๆœฌไพกๆ ผใŒ10,000ใ‚ฆใ‚ฉใƒณใ‹ใ‚‰ๅง‹ใพใ‚Šใ€ๆฌกใฎ่ฌ›็พฉใ‚’ใ‚‚ใ†ๅฐ‘ใ—ๅฎ‰ใๆไพ›ใงใใชใ„ใ“ใจใ‚’ใ”ไบ†ๆ‰ฟใใ ใ•ใ„ใ€‚

    Svelte.jsใง้–‹็™บใ—ใฆใ„ใ‚‹ใ™ในใฆใฎไบบใซใจใฃใฆ่‰ฏใ„ๆƒ…ๅ ฑใซใชใ‚‹ใ“ใจใ‚’้ก˜ใฃใฆใ„ใพใ™ใ€‚

    ใงใฏๅคšใใฎ้–ขๅฟƒใ‚’ใŠ้ก˜ใ„ใ„ใŸใ—ใพใ™ใ€‚

    ใ‚ใ‚ŠใŒใจใ†ใ”ใ–ใ„ใพใ™ใ€œ๐Ÿ˜Š

    2
  • heropy๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€

    11ๆœˆ25ๆ—ฅใซใƒชใƒชใƒผใ‚นใ•ใ‚ŒใŸSvelteใฎๆœ€ๆ–ฐใฎ3.30.0ใƒใƒผใ‚ธใƒงใƒณใงใฏใ€svelte-preprocessใƒขใ‚ธใƒฅใƒผใƒซใฎไฝฟ็”จใซ้–ข้€ฃใ—ใฆใ‚จใƒฉใƒผใŒ็™บ็”Ÿใ™ใ‚‹ๅ•้กŒใŒใ‚ใ‚Šใพใ™ใ€‚

    ใ ใ‹ใ‚‰Svelteใƒ•ใ‚กใ‚คใƒซใ‹ใ‚‰

    2
  • heropy๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€

    ใŠ็Ÿฅใ‚‰ใ›ใ—ใŸ้€šใ‚Šใ€ๆ–ฐใ—ใ„ๅ†…ๅฎนใ‚’ไปฅไธ‹ใฎใ‚ˆใ†ใซ่ฟฝๅŠ ใ—ใพใ—ใŸใ€‚
    ๅ—่ฌ›ใฎๆ–นใ€…ใซๅคšใใฎใŠๅฝนใซ็ซ‹ใฆใ‚Œใฐๅนธใ„ใงใ™ใ€‚

    ใฟใ‚“ใชๆฅฝใ—ใ„ไธ€้€ฑ้–“ใ‚’้Žใ”ใ—ใฆใใ ใ•ใ„:)
    ใ‚ใ‚ŠใŒใจใ†ใ”ใ–ใ„ใพใ™ใ€œ

    -------------------------

    - 7-4.ใ‚ญใƒผใƒ–ใƒญใƒƒใ‚ฏ
    - 11-4.ใ‚นใƒญใƒƒใƒˆ่ปข้€(Forwarding)
    - 17-1. Snowpackใจใฏ๏ผŸ
    - 17-2. Snowpackใƒ™ใƒผใ‚นใฎSvelteใƒ†ใƒณใƒ—ใƒฌใƒผใƒˆใฎใ‚คใƒณใ‚นใƒˆใƒผใƒซใจๆง‹ๆˆใซใคใ„ใฆ
    - 18-1.ใƒกใ‚คใƒณใƒ‡ใ‚ฃใƒฌใ‚ฏใƒˆใƒชใฎใ‚ณใƒ”ใƒผใจHMRใฎ้ฉ็”จ
    - 18-2.ใ‚ณใ‚ขใƒขใ‚ธใƒฅใƒผใƒซใฎๅ–ใ‚Šไป˜ใ‘ใจๆง‹ๆˆ
    - 18-3. SCSSใจSvelte Preprocessใฎ่จญๅฎš
    - 18-4.่ฃฝๅ“ใƒขใƒผใƒ‰ใฎใƒญใ‚ฐๅ‰Š้™คใฎ่จญๅฎš
    - 18-5.ใ‚ณใƒผใƒ‰ๆœ€้ฉๅŒ–๏ผˆๆœ€ๅฐๅŒ–๏ผ‰ใจใƒ‘ใ‚นใ‚จใ‚คใƒชใ‚ขใ‚นใฎ่จญๅฎš
    - 18-6. GitHubใƒชใƒใ‚ธใƒˆใƒชใฎไฝœๆˆใจใƒ—ใƒญใ‚ธใ‚งใ‚ฏใƒˆ Push
    - 18-7. Netlifyใซใ‚ˆใ‚‹็ถ™็ถš็š„ใชๅฑ•้–‹

    1
  • heropy๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€

    HEROPYใƒ–ใƒญใ‚ฐใฎใ€ŒSvelte.jsๅฎŒๅ…จใ‚ฌใ‚คใƒ‰ใ€ใฎๆŠ•็จฟใ‚’่ฌ›็พฉใ‚ซใƒชใ‚ญใƒฅใƒฉใƒ ใซๅˆใ‚ใ›ใฆๅคง่ฆๆจกใซๆ›ดๆ–ฐใ—ใพใ—ใŸใ€‚

    https://heropy.blog/2019/09/29/svelte/

    ๆ˜ ๅƒ่ฌ›็พฉใจไธ€็ท’ใซ่ฆ‹ใ‚Œใฐๅฝนใซ็ซ‹ใกใพใ›ใ‚“ใ‹ใ€‚
    ไปฅ้™ใ€่ฃœๅผทใจใจใ‚‚ใซๆ–‡ๆ›ธใ‚‚ๆ›ดๆ–ฐใ„ใŸใ—ใพใ™ใ€‚
    ใ‚‚ใ—ๆ–‡ๆ›ธใฎๆฎ‹ๅฟตใช้ƒจๅˆ†ใŒใ‚ใ‚Œใฐๆ•™ใˆใฆใใ ใ•ใ„ใ€‚
    ใงใใ‚‹ใ ใ‘ๆ—ฉใ่ฃœๅฎŒใ—ใพใ™ใ€‚

    ๆฅฝใ—ใ„ไธ€ๆ—ฅใ‚’้Žใ”ใ—ใฆใใ ใ•ใ„๏ผšD
    ใ‚ใ‚ŠใŒใจใ†ใ”ใ–ใ„ใพใ™ใ€‚

    2

๏ฟฅ6,649