コンポーネント

基本コンポーネント

Hello {name}!

コンポーネント構造

<script>	コンポーネントロジック（JS/TS）
Markup	`{expressions}` を含む HTML テンプレート
<style>	スコープ付き CSS（コンポーネントに自動スコープ）
<script context="module">	インスタンスごとではなく、モジュールごとに一度実行

リアクティビティ

リアクティブな代入

リアクティブ宣言

$: はリアクティブ宣言と文をマークします

リアクティビティのルール

Assignment triggers	`count += 1` で更新がトリガーされます。`obj.x = 1` も同様
Array mutation	`arr = [...arr, item]` を使う（再代入でトリガー）
$: declaration	参照する変数が変わると自動再計算
$: statement	リアクティブに副作用を実行

プロップ

プロップの宣言と渡し方

{greeting}, {name}!

プロップのスプレッド

イベント

DOM イベント

value = e.target.value} />

イベント修飾子

preventDefault	`e.preventDefault()` を呼び出す
stopPropagation	イベントのバブリングを停止
once	ハンドラーが一度だけ発火
self	`event.target` が要素自身のときのみ
capture	キャプチャフェーズを使用

コンポーネントイベント

バインディング

双方向バインディング

要素とコンポーネントのバインディング

バインディングの種類

bind:value	input/select/textarea の値
bind:checked	チェックボックスの状態
bind:group	ラジオ/チェックボックスグループ
bind:this	DOM 要素の参照
bind:clientWidth/Height	読み取り専用の要素サイズ

ストア

書き込み可能ストア

// store.js import { writable } from "svelte/store"; export const count = writable(0); // Component — auto-subscribe with $

ストアのメソッド

count.set(10);               // set value
count.update(n => n + 1);    // update from current
const unsub = count.subscribe(v => console.log(v));

ストアの種類

writable(val)	読み書き可能ストア
readable(val, fn)	読み取り専用、開始関数でセット
derived(stores, fn)	他のストアから計算
$store	コンポーネント内の自動サブスクライブ構文

トランジション

組み込みトランジション

{#if visible}Fades in/out
Fly in, fade out

{/if}

トランジションオプション

fade	不透明度 0 から 1
fly	x/y オフセットと不透明度をアニメーション
slide	スライドイン/アウト（高さ）
scale	スケールとフェード
draw	SVG パスのストロークアニメーション
duration	トランジション時間（ms）
delay	開始前の遅延

スロット

デフォルトスロットと名前付きスロット

Default header Default content

Title

Body content goes here

スロットプロップ

{#each items as item} {/each}

{index}: {item.name}

コンテキスト

コンテキストのセットと取得

コンテキストとストアの比較

Context	コンポーネントツリースコープ、デフォルトでリアクティブでない
Stores	グローバル、リアクティブ、どこでもインポート可能
Context + Store	コンテキスト経由でストアを渡しスコープ付きリアクティビティを実現

SvelteKit の基本

ファイルベースルーティング

src/routes/
  +page.svelte          
  about/+page.svelte    
  blog/[slug]/+page.svelte  

ロード関数

// +page.js (runs on client & server)
export async function load({ params, fetch }) {
  const res = await fetch(`/api/posts/${params.slug}`);
  return { post: await res.json() };
}

主要ファイル

+page.svelte	ページコンポーネント
+page.js / +page.ts	クライアント/ユニバーサルロード関数
+page.server.js	サーバー専用ロード/フォームアクション
+layout.svelte	共有レイアウトラッパー
+error.svelte	エラーページ
+server.js	API エンドポイント（GET、POST など）

SVELTE クイックリファレンス

Hello {name}!

Title