Zenn
Closed1

Svelte 5 preview 勉強メモ

Svelte
Vite
knaka Tech-Blogknaka Tech-Blog

概要

Svelte 5 preview　の軽く調査内容的なメモになります。

  • 開発中らしいので、リリースは先みたいです。
  • Svelte 5 の追加関数等、変更点などの内容になります。
  • Svelte Summit Spring on April などの記事を、最近SNSで見かけたので、調べてみました。
  • https://svelte.dev/blog/whats-new-in-svelte-april-2024

[ 公開: 2024/04/27]

関連

環境

  • Svelte 5 preview
  • Vite 5

Runes

  • $state : export let の代用みたいです
RunesState.svelte
<script>
let name = $state("John");
console.log(name);
</script>
<!-- -->
<main>
  <div>
    <h1 class="text-4xl font-bold">RunesState.svelte</h1>
    <hr />
    <h1>Hello {name}</h1>

  </div>
</main>

<style>
</style>
  • $derived : 計算式を設定できるらしい。
RunesDerived.svelte
<script>
  let count = $state(10);
  const doubleCount = $derived(count * 2);
</script>

<!-- -->
<main>
  <div>
    <h1 class="text-4xl font-bold">RunesDerived.svelte!</h1>
    <hr />
    <div>doubleCount= {doubleCount}</div>
  </div>
</main>

<style>
</style>
  • $effect
RunesEffect.svelte
<script>
	let count = $state(0);
	let doubled = $derived(count * 2);

	$effect(() => {
		console.log({ count, doubled });
	});
</script>

<!-- -->
<main>
  <div>
    <h1 class="text-4xl font-bold">RunesEffect.svelte</h1>
    <hr />
    <button on:click={() => count++}>
      {doubled}
    </button>
    
    <p>{count} doubled is {doubled}</p>
  </div>
</main>

<style>
</style>

event

  • onclick: on:click の代用らしいです。
EventOnclick.svelte
<script>
  let count = $state(0);

  function incrementCount() {
    count++;
  }
</script>

<main>
  <div>
    <h1 class="text-4xl font-bold">EventOnclick</h1>
    <hr />
    <p>Counter: {count}</p>
    <button onclick={incrementCount}>+1</button>
  </div>
</main>

<style>
</style>

Component

  • children : slot の代わりかも。
ComponentChildren.svelte
<script>
import FunnyButton from "./ComponentChildren/FunnyButton.svelte";
</script>

<main>
  <div>
    <h1 class="text-4xl font-bold">ComponentChildren</h1>
    <hr />
    <FunnyButton>Click me!</FunnyButton>
  </div>
</main>

<style>
</style>
FunnyButton.svelte
<script>
  let { children } = $props();
</script>

<button
  style="background: rgba(0, 0, 0, 0.4); color: #fff; padding: 10px 20px; font-size: 30px; border: 2px solid #fff; margin: 8px; transform: scale(0.9); box-shadow: 4px 4px rgba(0, 0, 0, 0.4); transition: transform 0.2s cubic-bezier(0.34, 1.65, 0.88, 0.925) 0s; outline: 0;"
>
  {@render children()}
</button>
  • $props: extern let XXXの代用みたいです。
ComponentProps.svelte
<script>
  import UserProfile from "./ComponentProps/UserProfile.svelte";
</script>

<main>
  <div>
    <h1 class="text-4xl font-bold">ComponentProps</h1>
    <hr />
    <UserProfile
    name="John"
    age={20}
    favouriteColors={["green", "blue", "red"]}
    isAvailable
    />
  </div>
</main>

<style>
</style>
UserProfile.svelte
<script>
  const {
    name = "",
    age = null,
    favouriteColors = [],
    isAvailable = false,
  } = $props();
</script>

<p>My name is {name}!</p>
<p>My age is {age}!</p>
<p>My favourite colors are {favouriteColors.join(", ")}!</p>
<p>I am {isAvailable ? "available" : "not available"}</p>
このスクラップは5ヶ月前にクローズされました