Hello world!

This is the abridged developer documentation for Svelte and SvelteKit. # Start of Svelte documentation # 概要 Svelte は Web 上のユーザーインターフェースを構築するためのフレームワークです。Svelte はコンパイラを使用し、HTML、CSS、JavaScript で記述された宣言的なコンポーネントを... ```svelte ``` ...無駄のない、タイトで最適化された JavaScript に変換します。これにより、スタンドアローンなコンポーネントからフルスタックアプリ (Svelte のアプリケーションフレームワークである [SvelteKit](../kit) を使用) まで、お望みのものをなんでも構築することができます。こちらのページはリファレンスドキュメントとして提供されています。もしあなたが Svelte の初心者なら、先に[インタラクティブなチュートリアル](/tutorial)から始めて、わからないことがあるときにこちらに戻ってくることをおすすめします。また、[Playground](/playground) を使ってオンラインで Svelte を試すこともできますし、より高機能な環境が必要なら [StackBlitz](https://sveltekit.new) で試すこともできます。 # Getting started [SvelteKit](../kit) をお使いいただくことをおすすめします。[ほとんどの用途](../kit/project-types)でお使いいただけます。これは Svelte チームによるオフィシャルなアプリケーションフレームワークで、[Vite](https://vite.dev/)を活用しています。新しいプロジェクトを作成するには: ```sh npx sv create myapp cd myapp npm install npm run dev ``` まだ Svelte についてよく知らなくても心配いりません! SvelteKit が提供する便利な機能等は一旦無視して、後から学び始めても問題ありません。 ## SvelteKit の代替手段 Svelteを直接Viteで使用することもできます。その場合、`npm create vite@latest` を実行し、`svelte` オプションを選択します。この方法では、`npm run build` を実行すると、[vite-plugin-svelte](https://github.com/sveltejs/vite-plugin-svelte) を使用して、`dist` ディレクトリ内に HTML、JS、CSSファイルが生成されます。ほとんどの場合、[ルーティングライブラリ](/packages#routing)を選択する必要があるでしょう。 >[!NOTE] Vite は [single page apps (SPA)](../kit/glossary#SPA) をビルドするためよくスタンドアロンモードで使用されますが、[SPA は SvelteKit でも構築できます](../kit/single-page-apps)。 [他のバンドラー向けのプラグイン](/packages#bundler-plugins)もありますが、Viteをお勧めします。 ## エディタツール Svelteチームは、[VS Code 拡張機能](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode)を提供しています。また、様々な[他のエディター](https://sveltesociety.dev/resources#editor-support)やツールとの統合も利用可能です。さらに、[sv check](https://github.com/sveltejs/cli) を使ってコマンドラインからコードをチェックすることもできます。 ## サポートを受ける [Discord チャットルーム](/chat)で気軽に質問してください！また、[Stack Overflow](https://stackoverflow.com/questions/tagged/svelte) でも回答を見つけることができます。 # .svelte ファイルコンポーネントは Svelte アプリケーションの構成要素です。これらは `.svelte` ファイルに書かれ、HTML のスーパーセットを使って記述されます。以下の3つのセクション — script, styles, markup — は任意です。 ```svelte /// file: MyComponent.svelte ``` ## ` ``` このブロックから `export` バインディングを使用してエクスポートすることができ、それらはコンパイルされたモジュールのエクスポートとして扱われます。ただし、コンポーネント自体にデフォルトエクスポートがされるため `export default` は使用できません。 > Svelte 4 では、このスクリプトタグは ` ``` (もしかしたらあなたが使用したことがあるかもしれない) 他のフレームワークとは違い、state を操作するための API はありません — `count` はオブジェクトや関数ではなくただの number であり、他の変数を更新するのと同じように更新することができます。 ### Deep state もし `$state` を配列やシンプルなオブジェクトで使用した場合、リアクティブが深い (原文: deeply reactive) _state proxy_ になります。[proxy](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Proxy) によって Svelte はプロパティが読み書き (`array.push(...)` のようなメソッド経由で行われたものを含む) されたときにコードを実行でき、きめ細やかな更新 (原文: granular updates) をトリガーすることができます。 state は、Svelte が配列やシンプルなオブジェクト (class や `Object.create` で作成されたオブジェクト) 以外のものを見つけるまで再帰的に proxy 化されます。このような場合... ```js let todos = $state([ { done: false, text: 'add more todos' } ]); ``` ...個々の todo のプロパティが変更されると、UI の中の、その変更されたプロパティに依存する部分に対して更新がトリガーされます: ```js let todos = [{ done: false, text: 'add more todos' }]; // ---cut--- todos[0].done = !todos[0].done; ``` 配列に新たなオブジェクトを push すると、それも proxy 化されます。 ```js let todos = [{ done: false, text: 'add more todos' }]; // ---cut--- todos.push({ done: false, text: 'eat lunch' }); ``` もしリアクティブな値を分割した場合、その参照はリアクティブではありません — 通常の JavaScript と同じように、分割時点で評価されます: ```js let todos = [{ done: false, text: 'add more todos' }]; // ---cut--- let { done, text } = todos[0]; // this will not affect the value of `done` todos[0].done = !todos[0].done; ``` ### Classes class インスタンスは proxy されません。その代わりに、class のフィールド (public か private かを問わず) にも `$state` を使用するか、または `constructor` の内側で最初に代入するときに `$state` を使用することができます: ```js // @errors: 7006 2554 class Todo { done = $state(false); constructor(text) { this.text = $state(text); } reset() { this.text = ''; this.done = false; } } ``` JavaScript でメソッドを呼び出すとき、[`this`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/this) の値が問題になります。以下のコードは動作しません、なぜなら `reset` メソッドの中にある `this` が `Todo` ではなく ` ``` インライン関数を使うこともできますし... ```svelte ``` ...class の定義でアロー関数を使うこともできます: ```js // @errors: 7006 2554 class Todo { done = $state(false); constructor(text) { this.text = $state(text); } +++reset = () => {+++ this.text = ''; this.done = false; } } ``` ### Built-in classes Svelte provides reactive implementations of built-in classes like `Set`, `Map`, `Date` and `URL` that can be imported from [`svelte/reactivity`](svelte-reactivity). ## `$state.raw` オブジェクトや配列を、深いリアクティブ (deeply reactive) にしたくない場合は、`$state.raw` を使用します。 `$state.raw` で宣言された state は変更できません、再代入のみ可能です。言い換えると、もし更新したいのであれば、オブジェクトのプロパティに代入したり配列のメソッドの `push` などを使用するのではなく、オブジェクトや配列を丸ごと置き換えてください。 ```js let person = $state.raw({ name: 'Heraclitus', age: 49 }); // this will have no effect person.age += 1; // this will work, because we're creating a new person person = { name: 'Heraclitus', age: 50 }; ``` 変更する予定がない大きい配列やオブジェクトでこれを使用すると、パフォーマンスを改善することができます。リアクティブにするためのコストを避けられるからです。raw state には、リアクティブな state を含められることにご注意ください (例えば、リアクティブなオブジェクトの配列 (原文: a raw array of reactive objects))。 As with `$state`, you can declare class fields using `$state.raw`. ## `$state.snapshot` 深いリアクティブ (deeply reactive) な `$state` proxy の静的なスナップショットを取得するには、`$state.snapshot` を使用します: ```svelte ``` これは、例えば `structuredClone` のような proxy を受け付けない外部のライブラリや API に state を渡したいときに便利です。 ## 関数に state を渡す JavaScript は _値渡し_ の言語です — 関数を呼び出すとき、その引数は _変数_ ではなく _値_ です。言い換えると: ```js /// file: index.js // @filename: index.js // ---cut--- /** * @param {number} a * @param {number} b */ function add(a, b) { return a + b; } let a = 1; let b = 2; let total = add(a, b); console.log(total); // 3 a = 3; b = 4; console.log(total); // still 3! ``` もし `add` が `a` と `b` の現在の値にアクセスし、`total` の現在の値を返したいのであれば、代わりに関数を使う必要があります: ```js /// file: index.js // @filename: index.js // ---cut--- /** * @param {() => number} getA * @param {() => number} getB */ function add(+++getA, getB+++) { return +++() => getA() + getB()+++; } let a = 1; let b = 2; let total = add+++(() => a, () => b)+++; console.log(+++total()+++); // 3 a = 3; b = 4; console.log(+++total()+++); // 7 ``` Svelte の state も同様です — `$state` rune で宣言されたものを参照するとき... ```js let a = +++$state(1)+++; let b = +++$state(2)+++; ``` ...その現在の値にアクセスします。 '関数(function)' は意味が広範囲にわたることにご注意ください — proxy のプロパティや [`get`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/get)/[`set`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/set) プロパティも包含しています... ```js /// file: index.js // @filename: index.js // ---cut--- /** * @param {{ a: number, b: number }} input */ function add(input) { return { get value() { return input.a + input.b; } }; } let input = $state({ a: 1, b: 2 }); let total = add(input); console.log(total.value); // 3 input.a = 3; input.b = 4; console.log(total.value); // 7 ``` ...もしこのようなコードを書いている場合は、代わりに [class](#Classes) を使用することをご検討ください。 ## モジュール間で state を渡す `.svelte.js` や `.svelte.ts` ファイルでは state を宣言できますが、その state は直接再代入されていない場合に限り、エクスポートすることができます。言い換えると、以下のようなことはできないということです: ```js /// file: state.svelte.js export let count = $state(0); export function increment() { count += 1; } ``` その理由は、`count` に対するすべての参照は Svelte コンパイラによって変換されるからです — 上記のコードは大雑把に言えば以下と同じです: ```js /// file: state.svelte.js (compiler output) // @filename: index.ts interface Signal { value: T; } interface Svelte { state(value?: T): Signal; get(source: Signal): T; set(source: Signal, value: T): void; } declare const $: Svelte; // ---cut--- export let count = $.state(0); export function increment() { $.set(count, $.get(count) + 1); } ``` Svelte のコンパイラは一度に1つのファイルのみ処理するため、もし別のファイルが `count` をインポートしている場合、Svelte はそれぞれの参照を `$.get` や `$.set` でラップする必要があるかどうかがわかりません: ```js // @filename: state.svelte.js export let count = 0; // @filename: index.js // ---cut--- import { count } from './state.svelte.js'; console.log(typeof count); // 'object', not 'number' ``` そのため、モジュール間で state を共有するには、2つの方法があります。1つ目は再代入をしないことです... ```js // This is allowed — since we're updating // `counter.count` rather than `counter`, // Svelte doesn't wrap it in `$.state` export const counter = $state({ count: 0 }); export function increment() { counter.count += 1; } ``` ...2つ目は、直接エクスポートしないことです: ```js let count = $state(0); export function getCount() { return count; } export function increment() { count += 1; } ``` # $derived derived state は `$derived` rune を使用して宣言します: ```svelte

{count} doubled is {doubled}

``` `$derived(...)` 内の式は副作用(side-effects)がないものでなければなりません。Svelte は derived の式の中での state の変更 (例: `count++`) を許可しません。 `$state` と同様に、class のフィールドを `$derived` としてマークすることができます。 ## `$derived.by` 短い式に収まらない複雑な derived を作成する必要がある場合があります。その場合は、引数として関数を受け取る `$derived.by` を使用できます。 ```svelte ``` 本質的に、`$derived(expression)` は `$derived.by(() => expression)` と同等です。 ## 依存関係を理解する `$derived` 式 (または `$derived.by` の関数本体) 内で同期的に読み取られるものはすべて、derived state の _依存関係(dependency)_ と見なされます。その state が変更されると、derived は _dirty_ としてマークされ、次回読み取られる際に再計算されます。 state の一部を依存関係として扱わないようにするには、[`untrack`](svelte#untrack) を使用します。 ## derived の値を上書きする derived の式はその依存が変化したときに再計算されますが、再代入することによって一時的に値を上書きすることができます (`const` で宣言されていない場合に限る)。これは例えば楽観的 UI のように、その値が '単一の情報源(source of truth)' (例えばサーバーからのデータ) から計算されるが、ユーザーにすぐにフィードバックを表示したい場合に便利です: ```svelte ``` ## derived とリアクティビティ `$state` はオブジェクトや配列を[深いリアクティブな proxy (deeply reactive proxies)]($state#Deep-state) に変換しますが、`$derived` の値はそれがそのまま残ります (as-is) 。[例えばこのようなケースでは](/REMOVED)... ```svelte let items = $state([...]); let index = $state(0); let selected = $derived(items[index]); ``` ...`selected` のプロパティを変更 (または `selected` に `bind:`) すると、そのもとにある `items` 配列に影響します。もし `items` が深いリアクティブ(deeply reactive)でないなら、`selected` に対する変更は影響しません。 ## 構造分解 (Destructuring) `$derived` 宣言と構造分解 (destructuring) を使用すると、結果の変数はすべてリアクティブになります — こちらは… ```js function stuff() { return { a: 1, b: 2, c: 3 } } // ---cut--- let { a, b, c } = $derived(stuff()); ``` …大まかには以下と同じです: ```js function stuff() { return { a: 1, b: 2, c: 3 } } // ---cut--- let _stuff = $derived(stuff()); let a = $derived(_stuff.a); let b = $derived(_stuff.b); let c = $derived(_stuff.c); ``` ## 更新の伝搬 Svelte は _push-pull reactivity_ と呼ばれる仕組みを使用しています — state が更新されると、それに依存するすべてのもの (直接的または間接的であるかを問わず) に即座に変更が通知されますが ('push')、derived の値は実際に読み取られるまで再評価されません ('pull')。 derived の新しい値が以前の値と参照的に同一である場合、下流の更新はスキップされます。つまり、`large` が変更されたときのみ、ボタン内のテキストが更新され、`count` が変更されても更新されません (たとえ `large` が `count` に依存していたとしても): ```svelte ``` # $effect effect は、state が更新されたときに実行される関数で、サードパーティのライブラリを呼び出したり、`

{count}

Hello {name}!

Hello world

Hello, {name}

Shopping list

Hello {user.firstname}!