Svelte5.36 以降、コンポーネント内のうち、これまで使えなかった3箇所で `await` キーワードを使えるようになりました:

- コンポーネントの `<script>` トップレベル
-  `$derived(...)` 宣言の内部
- マークアップの内部

この機能は実験的なものであり、Svelteの[設定](/docs/kit/configuration)(通常は `svelte.config.js`)に `experimental.async` オプションを追加して、明示的に有効にする必要があります:

```js
/// file: svelte.config.js
export default {
	compilerOptions: {
		experimental: {
			async: true
		}
	}
};
```

この実験的なフラグは Svelte 6 で削除される予定です。

## 同期された更新 <!--Synchronized-updates-->

When an `await` expression depends on a particular piece of state, changes to that state will not be reflected in the UI until the asynchronous work has completed, so that the UI is not left in an inconsistent state. In other words, in an example like this...

<!-- codeblock:start {"title":"Synchronized updates"} -->
```svelte
<!--- file: App.svelte --->
<script>
	let a = $state(1);
	let b = $state(2);

	async function add(a, b) {
		await new Promise((f) => setTimeout(f, 500)); // artificial delay
		return a + b;
	}
</script>

<input type="number" bind:value={a}>
<input type="number" bind:value={b}>

<p>{a} + {b} = {await add(a, b)}</p>
```
<!-- codeblock:end -->

...`a` の値をインクリメントしても、 `<p>` の内容は次のようには _なりません。_

```html
<p>2 + 2 = 3</p>
```

実際には、`add(a, b)`が解決されたときに、`<p>`の内容を `2 + 2 = 4` に更新します。

更新は重複することがあります。先行する更新が遅く、まだ進行中であっても、続く更新が速ければ、速いほうが先にUIに反映されます。

## 並行性 <!--Concurrency-->

Svelte は可能な限り非同期処理を並行におこないます。例えば、マークアップ内に2つの `await` 式があるとき...

```svelte
<p>{await one(x)}</p>
<p>{await two(y)}</p>
```

...それらは独立した式ですので、 _見た目上は_ 順次実行されているように見えても、両方の関数が同時に実行されます。

これは、`<script>` 内や非同期関数内の連続した `await` 式には適用されません。これらは他の非同期JavaScriptと同じように実行されます。例外として、独立した `$derived` 式は、最初の作成時には順次実行されますが、そのあとは独立して更新されます:

```js
/** @param {number} x */
async function one(x) { return x; }
/** @param {number} y */
async function two(y) { return y; }
let x = $state(1);
let y = $state(2);
// ---cut---
// `b` will not be created until `a` has resolved,
// but once created they will update independently
// even if `x` and `y` update simultaneously
let a = $derived(await one(x));
let b = $derived(await two(y));
```

> [!NOTE] このようなコードを書くと、Svelteから [`await_waterfall`](runtime-warnings#Client-warnings-await_waterfall) 警告が表示されます。

## ローディング状態の表示 <!--Indicating-loading-states-->

To render placeholder UI, you can wrap content in a `<svelte:boundary>` with a [`pending`](svelte-boundary#Properties-pending) snippet. This will be shown when the boundary is first created, but not for subsequent updates, which are globally coordinated.

After the contents of a boundary have resolved for the first time and have replaced the `pending` snippet, you can detect subsequent async work with [`$effect.pending()`]($effect#$effect.pending). This is what you would use to display a "we're asynchronously validating your input" spinner next to a form field, for example.

また、 [`settled()`](svelte#settled) を使うと、現在の更新が完了したときに解決(resolve)される Promise を取得できます:

```js
let color = 'red';
let answer = -1;
let updating = false;
// ---cut---
import { tick, settled } from 'svelte';

async function onclick() {
	updating = true;

	// これがないと、`updating` への変更は
	// 他の変更とまとめられてしまうため、
	// UI に反映されません
	await tick();

	color = 'octarine';
	answer = 42;

	await settled();

	// `color` や `answer` の変更に影響される
	// あらゆる更新が、この時点で適用済みになります
	updating = false;
}
```

## エラーハンドリング <!--Error-handling-->

`await` 式のエラーは、もっとも近い [error boundary](svelte-boundary) に伝播します。

## Server-side rendering

Svelte supports asynchronous server-side rendering (SSR) with the `render(...)` API. To use it, simply await the return value:

```js
/// file: server.js
import { render } from 'svelte/server';
import App from './App.svelte';

const { head, body } = +++await+++ render(App);
```

> [!NOTE] If you're using a framework like SvelteKit, this is done on your behalf.

If a `<svelte:boundary>` with a `pending` snippet is encountered during SSR, that snippet will be rendered while the rest of the content is ignored. All `await` expressions encountered outside boundaries with `pending` snippets will resolve and render their contents prior to `await render(...)` returning.

> [!NOTE] In the future, we plan to add a streaming implementation that renders the content in the background.

## Forking

The [`fork(...)`](svelte#fork) API, added in 5.42, makes it possible to run `await` expressions that you _expect_ to happen in the near future. This is mainly intended for frameworks like SvelteKit to implement preloading when (for example) users signal an intent to navigate.

```svelte
<script>
	import { fork } from 'svelte';
	import Menu from './Menu.svelte';

	let open = $state(false);

	/** @type {import('svelte').Fork | null} */
	let pending = null;

	function preload() {
		pending ??= fork(() => {
			open = true;
		});
	}

	function discard() {
		pending?.discard();
		pending = null;
	}
</script>

<button
	onfocusin={preload}
	onfocusout={discard}
	onpointerenter={preload}
	onpointerleave={discard}
	onclick={() => {
		pending?.commit();
		pending = null;

		// in case `pending` didn't exist
		// (if it did, this is a no-op)
		open = true;
	}}
>open menu</button>

{#if open}
	<!-- any async work inside this component will start
	     as soon as the fork is created -->
	<Menu onclose={() => open = false} />
{/if}
```

## 注意事項 <!--Caveats-->

実験的な機能であるため、 `await` 扱いの詳細(および `$effect.pending()` のような関連API)は、セマンティックバージョニングのメジャーリリース外では破壊的変更がおこなわれる可能性があります。ただし、そのような変更は最小限に抑えるつもりです。

## 破壊的変更 <!--Breaking-changes-->

`experimental.async` オプションが `true` のとき、効果の実行順序がわずかに異なります。具体的には、 `{#if ...}` や `{#each ...}` のような _ブロック_ の効果を、 `$effect.pre` や `beforeUpdate` の前に実行するようになります。これにより、非常にまれな状況。