skiss
©skiss 1997 - 2024
タイトル : Svelte入門 1.Svelte について ～ 4.5 Reactive Statement
更新日 : 2023-10-02
カテゴリ : プログラミング
タグ :
frontend   
svelte   

何から始めようか?

まずは はじめてSvelteを利用する人のためのSvelte入門 から読んでみるかな。

1.Svelte について ～ 4.5 Reactive Statementまで

たしかに、let count: number = 2 の宣言で、reactive変数って、簡潔ルールですね。

$:の記述でreactive Statementって言うのも、さすが。

これは、深掘りしても良いかもね。(viteからじゃなくてsveltekit使う形でfastapiと絡めて何か書いてみるとか)

index.html

<!doctype html>
<html lang="en">
  <head> <meta charset="UTF-8" /> <title>サンプル1</title> </head>
  <body>
    <!-- id=app を持つコンポーネントをここに -->
    <div id="app"></div>
    <!-- src/main.js の読み込み -->
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

main.ts

import './app.css'
import App from './App.svelte'


const app = new App({
  // id=app を持つHTML要素を使う
  target: document.getElementById('app'),
  // Appコンポーネントに渡すprops
  props: {
    name: 'SKISS Page',
  }
})

// app コンポーネント
export default app

App.svelte

<script lang="ts">
  import Counter from './lib/Counter.svelte'

  // 親からpropsでわたってくる
  export let name:string;
</script>

<main>
  <h1>{name}</h1>
  <div class="card">
    <Counter />
  </div>
</main>

<style></style>

Counter.svelte

<script lang="ts">
  // Svetel では定義した変数を Reactive な変数として扱うために追加設定は必要ない
  let count: number = 2

  const increment = () => {
    count += 1
  }

  // Reactive Statement
  // $:を設定することで count の値が更新されると double の値も一緒に更新される
  $: double = count * 2;
  $: console.log(`現在のcountの値は${count}です`);

</script>

<div>
  <!-- Reactive な変数+click イベント -->
  <button on:click={increment}>押してね</button>
  <ul>
    <li>count is {count}</li>
    <li>double is {double}</li>
  </ul>
</div>