@@ -4,33 +4,33 @@ title: Svelte 4 migration guide
4
4
5
5
この移行ガイドでは、Svelteバージョン3から4に移行する方法の概要を説明します。各変更の詳細については、リンクされたPRを参照してください。 移行スクリプトを使用して、これらの一部を自動的に移行します: ` npx svelte-migrate@latest svelte-4 `
6
6
7
- あなたがライブラリ作成者の場合は、Svelte4のみをサポートするか、Svelte3もサポートできるかどうかを検討してください。 重大な変更のほとんどは多くの人に影響を与えないので、これは簡単に可能かもしれません 。また、` peerDependencies ` のバージョン範囲も忘れずに更新してください。
7
+ あなたがライブラリ作成者の場合は、Svelte4のみをサポートするか、Svelte3もサポートできるかどうかを検討してください。 重大な変更のほとんどは多くの人に影響を与えないので、これは簡単に実現できるかもしれません 。また、` peerDependencies ` のバージョン範囲も忘れずに更新してください。
8
8
9
9
## 最低限必要なバージョン
10
10
11
- - Node16以上にアップグレードしてください。それ以前のバージョンはもうサポートされていません 。([ #8566 ] ( https://github.com/sveltejs/svelte/issues/8566 ) )
12
- - SvelteKitを使用している場合、1.20.4以降にアップグレードしてください ([ sveltejs/kit #10172 ] ( https://github.com/sveltejs/kit/pull/10172 ) )
13
- - SvelteKit を使わずに Vite を使っている場合は、` vite-plugin-svelte ` 2.4.1以降にアップグレードしてください ([ #8516 ] ( https://github.com/sveltejs/svelte/issues/8516 ) )
14
- - webpackを使用している場合は、webpack5以降と ` svelte-loader ` 3 .1.8以降にアップグレードしてください。それ以前のバージョンはサポートされなくなりました 。([ #8515 ] ( https://github.com/sveltejs/svelte/issues/8515 ) , [ 198dbcf] ( https://github.com/sveltejs/svelte/commit/198dbcf ) )
15
- - Rollupを使用している場合は、` rollup-plugin-svelte ` 7.1.5以降にアップグレードしてください ([ 198dbcf] ( https://github.com/sveltejs/svelte/commit/198dbcf ) )
16
- - TypeScriptを使用している場合は、TypeScript5以降にアップグレードしてください 。それ以下のバージョンでも動作する可能性はありますが、保証はできません。([ #8488 ] ( https://github.com/sveltejs/svelte/issues/8488 ) )
11
+ - Node16以上にアップグレードしてください。それ以下のバージョンはもうサポートされていません 。([ #8566 ] ( https://github.com/sveltejs/svelte/issues/8566 ) )
12
+ - SvelteKitを使用している場合、1.20.4以上にアップグレードしてください ([ sveltejs/kit #10172 ] ( https://github.com/sveltejs/kit/pull/10172 ) )
13
+ - SvelteKit を使わずに Vite を使っている場合は、` vite-plugin-svelte ` 2.4.1以上にアップグレードしてください ([ #8516 ] ( https://github.com/sveltejs/svelte/issues/8516 ) )
14
+ - webpackを使用している場合は、webpack5以上に、 ` svelte-loader ` は3 .1.8以上にアップグレードしてください。それ以下のバージョンはサポートされなくなりました 。([ #8515 ] ( https://github.com/sveltejs/svelte/issues/8515 ) , [ 198dbcf] ( https://github.com/sveltejs/svelte/commit/198dbcf ) )
15
+ - Rollupを使用している場合は、` rollup-plugin-svelte ` 7.1.5以上にアップグレードしてください ([ 198dbcf] ( https://github.com/sveltejs/svelte/commit/198dbcf ) )
16
+ - TypeScriptを使用している場合は、TypeScript5以上にアップグレードしてください 。それ以下のバージョンでも動作する可能性はありますが、保証はできません。([ #8488 ] ( https://github.com/sveltejs/svelte/issues/8488 ) )
17
17
18
18
## バンドラーのブラウザ条件
19
19
20
20
ブラウザ用のフロントエンドバンドルをビルドするとき、バンドラーは` browser ` 条件を指定しなければならなくなりました。SvelteKitとViteは自動的にこれを処理します。他のものを使っている場合は、` onMount ` のようなライフサイクルのコールバックが呼ばれないことがあるので、モジュールの解決設定を更新する必要があります。
21
21
22
- - Rollup の場合は、` @rollup/plugin-node-resolve ` プラグインのオプションで` browser: true ` を設定することで行います 。詳しくは [ ` rollup-plugin-svelte ` ] ( https://github.com/sveltejs/rollup-plugin-svelte/#usage ) ドキュメントを参照してください。
23
- - wepback では、` "browser" ` を` conditionNames ` 配列に追加します。また、` alias ` を設定している場合は、それを更新する必要があるかもしれない 。詳しくは [ ` svelte-loader ` ] ( https://github.com/sveltejs/svelte-loader#usage ) のドキュメントを参照してください。
22
+ - Rollup の場合は、` @rollup/plugin-node-resolve ` プラグインのオプションで` browser: true ` を設定することでこれを行います 。詳しくは [ ` rollup-plugin-svelte ` ] ( https://github.com/sveltejs/rollup-plugin-svelte/#usage ) ドキュメントを参照してください。
23
+ - wepback では、` "browser" ` を` conditionNames ` 配列に追加します。また、` alias ` を設定している場合は、それを更新する必要があるかもしれません 。詳しくは [ ` svelte-loader ` ] ( https://github.com/sveltejs/svelte-loader#usage ) のドキュメントを参照してください。
24
24
25
25
([ #8516 ] ( https://github.com/sveltejs/svelte/issues/8516 ) )
26
26
27
27
## CJS関連の出力の削除
28
28
29
- Svelteはコンパイラ出力のCommonJS (CJS)フォーマットをサポートしなくなり、` svelte/register ` フックとCJSランタイムバージョンも削除されました。CJS出力フォーマットを維持する必要がある場合は 、ビルド後のステップでSvelteのESM出力をCJSに変換するバンドラーの使用を検討してください。([ #8613 ] ( https://github.com/sveltejs/svelte/issues/8613 ) )
29
+ Svelteはコンパイラ出力としてCommonJS (CJS)フォーマットをサポートしなくなり、` svelte/register ` フックとCJSランタイムバージョンも削除されました。CJS出力フォーマットをまだ使用する必要がある場合は 、ビルド後のステップでSvelteのESM出力をCJSに変換するバンドラーの使用を検討してください。([ #8613 ] ( https://github.com/sveltejs/svelte/issues/8613 ) )
30
30
31
- ## Svelte関数のより厳密な型
31
+ ## Svelteの関数のより厳密な型
32
32
33
- ` createEventDispatcher ` 、` Action ` 、` ActionReturn ` 、および` onMount ` には、より厳密なタイプが追加されました 。
33
+ ` createEventDispatcher ` 、` Action ` 、` ActionReturn ` 、および` onMount ` には、より厳密な型が追加されました 。
34
34
35
35
- ` createEventDispatcher ` はペイロードがオプション、必須、または存在しないことを指定できるようになり、それに応じてコールサイトがチェックされます ([ #7224 ] ( https://github.com/sveltejs/svelte/issues/7224 ) )
36
36
@@ -49,20 +49,20 @@ dispatch('optional');
49
49
dispatch (' required' ); // 詳細引数は省略できます
50
50
dispatch (' noArgument' , ' surprise' ); // 詳細な引数を追加することもできます
51
51
52
- // TypeScript厳密モードを使用した Svelte バージョン 4:
52
+ // TypeScript strict モードを使用した Svelte バージョン 4:
53
53
dispatch (' optional' );
54
54
dispatch (' required' ); // エラー、引数がありません
55
55
dispatch (' noArgument' , ' surprise' ); // エラー、引数を渡すことができません
56
56
```
57
57
58
- - ` Action ` と` ActionReturn ` のデフォルトのパラメータタイプは ` undefined ` になりました。移行スクリプトはこれを自動的に移行します ([ #7442 ] ( https://github.com/sveltejs/svelte/pull/7442 ) )
58
+ - ` Action ` と` ActionReturn ` のデフォルトのパラメータタイプは ` undefined ` になりました。つまり、この action がパラメータを受け取るように指定したい場合は、このように generic を型付けする必要があります。 移行スクリプトはこれを自動的に移行します ([ #7442 ] ( https://github.com/sveltejs/svelte/pull/7442 ) )
59
59
60
60
``` diff
61
61
- const action: Action = (node, params) => { .. } // 何らかの方法でparamsを使用すると、エラーになります
62
62
+ const action: Action<HTMLElement, string> = (node, params) => { .. } // paramsはstring型です
63
63
```
64
64
65
- - 非同期に関数を返した場合、 ` onMount ` は型エラーを表示するようになりました。これは、コールバックが破棄時に呼び出されることを期待しているコードのバグである可能性が高いからです 。
65
+ - ` onMount ` に非同期な関数を返した場合、型エラーを表示するようになりました。これはおそらくバグだからです。コンポーネントの破棄時にコールバックが呼び出されることを期待しているのだと思いますが、それは同期的に関数を返した場合にのみ動作します 。
66
66
67
67
``` diff
68
68
// この変更によって実際のバグが明らかになった例
@@ -137,7 +137,7 @@ Svelteでのカスタム要素の作成が大幅に改善されました。`tag`
137
137
{/if}
138
138
```
139
139
140
- トランジションをグローバルにするには、` |global ` モディファイアを追加してください。移行スクリプトは自動的にこれを行います。([ #6686 ] ( https://github.com/sveltejs/svelte/issues/6686 ) )
140
+ トランジションをグローバルにするには、` |global ` モディファイアを追加してください。そうすると、上記のいずれのコントロールフローブロックが作成/破棄されたときにもトランジションが再生されます。 移行スクリプトは自動的にこれを行います。([ #6686 ] ( https://github.com/sveltejs/svelte/issues/6686 ) )
141
141
142
142
## デフォルトのスロットバインディング
143
143
@@ -216,7 +216,7 @@ const { code } = await preprocess(
216
216
// style-2
217
217
```
218
218
219
- これは、例えば` MDsveX ` を使用している場合に影響する可能性があります。
219
+ これは、例えば` MDsveX ` を使用している場合に影響する可能性があります。もし使用している場合は、他のスクリプトやスタイルプリプロセッサよりも前に実行するように変更してください。
220
220
221
221
``` diff
222
222
preprocess: [
@@ -240,6 +240,6 @@ preprocess: [
240
240
- ランタイムが` CustomEvent ` コンストラクタを使用するようになりました。これらのブラウザをサポートする必要がある場合は、[ polyfill] ( https://github.com/theftprevention/event-constructor-polyfill/tree/master ) の使用を検討してください。([ #8775 ] ( https://github.com/sveltejs/svelte/pull/8775 ) )
241
241
- ` svelte/store ` から` StartStopNotifier ` インターフェース(` writable ` などのcreate関数に渡される)を使ってスクラッチから独自のストアを実装する場合、set関数に加えてupdate関数を渡す必要があります。これはストアを使用している人や、既存のSvelteストアを使用してストアを作成している人には影響しません。([ #6750 ] ( https://github.com/sveltejs/svelte/issues/6750 ) )
242
242
- ` derived ` に渡されるストアの代わりに、不正な値に対してエラーを投げるようになりました。([ #7947 ] ( https://github.com/sveltejs/svelte/issues/7947 ) )
243
- - ` svelte/internal ` の型定義が削除され、パブリックAPIではない内部メソッドの使用を抑制した 。これらのほとんどはSvelte5で変更されると思われます。
243
+ - ` svelte/internal ` の型定義が削除され、パブリックAPIではない内部メソッドの使用を推奨しないようにしました 。これらのほとんどはSvelte5で変更されると思われます。
244
244
- DOMノードの削除がバッチ処理されるようになり、順序が若干変更されました。このため、これらの要素で` MutationObserver ` を使用している場合、イベントの発生順序に影響を与える可能性があります。 ([ #8763 ] ( https://github.com/sveltejs/svelte/pull/8763 ) )
245
245
- ` svelte.JSX ` 名前空間を使用してグローバルタイピングを拡張していた場合は` svelteHTML ` 名前空間を使用するように移行する必要があります。同様に` svelte.JSX ` 名前空間から型定義を使用していた場合は、代わりに` svelte/elements ` から型定義を使用するように移行する必要があります。何をすべきかについての詳細は[ こちら] ( https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/typescript.md#im-getting-deprecation-warnings-for-sveltejsx--i-want-to-migrate-to-the-new-typings ) を参照してください。
0 commit comments