バ ド ジ が 
 Svelte + Vite ド 2022 2 0 22 . 11 . 19 @seike 4 60 1

@seike 460 - - @seike 46 0
 - Fusic - / - / / 
 - - PHP - PHP - PHPerKaigi - JAWS Days - AWS Dev Day 2

Agenda 1 .Svelte + Vite 2 .Svelte 3 .Svelte 4 .Vite 5 .Vite 6 . 3

01 Svelte + Vite 


5


 6

Svelte + Vite + Tailwind CSS 7

02 Svelte

Svelte 
 JavaScript Vite Svelte Svelte Write less code No virtual DOM DOM Truly reactive Hooks 9

Write less code - React 10 import React, { useState } from 'react'; export default () => { const [a, setA] = useState( 1 ); const [b, setB] = useState( 2 ); function handleChangeA(event) { setA(+event.target.value); } function handleChangeB(event) { setB(+event.target.value); } return ( ); }; UI React State Hook 
 State State input 
 State UI

Write less code - Svelte 11 let a = 1 ; let b = 2 ;

{a} + {b} = {a + b}

Svelte let State 
 bind 築 
 [a] input 
 p [a]

Write less code + Truly reactive 12 let a = 1 ; let b = 2 ;

{a} + {b} = {a + b}

Svelte 


TEMPLATE SYNTAX 13 {#if porridge.temperature > 1 00 }

too hot!

{:else if 8 0 > porridge.temperature}

too cold!

{:else}

just right!


 {/if} 
 {#each items as item}

{item.name} x {item.qty}

{/each} 
 {#await promise}

waiting for the promise to resolve...

{:then value}

The value is {value}

{:catch error}

Something went wrong: {error.message}

{/await} 
 {#key value} {/key} {#if }... 
 {:else if } 
 {/if} 
 {#each as name, index} 
 ... 
 {/each} 
 {#await }... 
 {:then name}... 
 {:catch name} …
 {/await} 
 {#key }... 
 {/key}

Props Props export 
 Props 
 14 Counter.svelte App.svelte

$: 
 $: JS 
 
 15

Store 16

Store React Redux Vue Vuex 
 Store writable Store 
 subscribe 
 
 update set Store 
 
 17

Context API Svelte ContextAPI setContext getContext hasContext getAllContexts context 
 context 
 18 Counter.svelte App.svelte

Context API 19 Counter.svelte App.svelte

Component Hooks onMount DOM beforeUpdate state afterUpdate onDestroy tick state 
 resolve promise 20

No virtual DOM Virtual DOM Dom 
 
 Virtual DOM Svelte DOM 
 21

krausest React Vue 
 Svelte 
 22 https://krausest.github.io/js-framework-benchmark/current.html

03 Svelte

👍 
 
 HTML CSS Javascript 🙏 $: 24

Made With Svelte Svelte Society Example 
 25

SvelteKit … 26

04 Vite

Vite HMR Rollup 28

ES Modules - Bundle - import export 
 - ES Modules - 
 29 https://vitejs.dev/guide/why.html#slow-server-start

vite.config.js Vite vite.config.js 
 
 Production Staging 
 
 loadEnv 
 .env Svelte Import.meta.env. 
 
 prefix 
 VITE_ 30 vite.config.js Svelte

05 Vite

👍 
 32

Svelte + Vite

34

06

36 Svelte UI Point 1 Example Point 2 Vite 頻 Point 3 Point 4

Thank You We are Hiring ! https://recruit.fusic.co.jp/