diff --git a/documentation/docs/05-misc/04-v4-migration-guide.md b/documentation/docs/05-misc/04-v4-migration-guide.md index 313c4ffb9..a5a20a766 100644 --- a/documentation/docs/05-misc/04-v4-migration-guide.md +++ b/documentation/docs/05-misc/04-v4-migration-guide.md @@ -2,37 +2,37 @@ title: Svelte 4 migration guide --- -This migration guide provides an overview of how to migrate from Svelte version 3 to 4. See the linked PRs for more details about each change. Use the migration script to migrate some of these automatically: `npx svelte-migrate@latest svelte-4` +この移行ガイドでは、Svelteバージョン3から4に移行する方法の概要を説明します。各変更の詳細については、リンクされたPRを参照してください。 移行スクリプトを使用して、これらの一部を自動的に移行します: `npx svelte-migrate@latest svelte-4` -If you're a library author, consider whether to only support Svelte 4 or if it's possible to support Svelte 3 too. Since most of the breaking changes don't affect many people, this may be easily possible. Also remember to update the version range in your `peerDependencies`. +あなたがライブラリ作成者の場合は、Svelte4のみをサポートするか、Svelte3もサポートできるかどうかを検討してください。 重大な変更のほとんどは多くの人に影響を与えないので、これは簡単に実現できるかもしれません。また、`peerDependencies`のバージョン範囲も忘れずに更新してください。 -## Minimum version requirements +## 最低限必要なバージョン -- Upgrade to Node 16 or higher. Earlier versions are no longer supported. ([#8566](https://github.com/sveltejs/svelte/issues/8566)) -- If you are using SvelteKit, upgrade to 1.20.4 or newer ([sveltejs/kit#10172](https://github.com/sveltejs/kit/pull/10172)) -- If you are using Vite without SvelteKit, upgrade to `vite-plugin-svelte` 2.4.1 or newer ([#8516](https://github.com/sveltejs/svelte/issues/8516)) -- If you are using webpack, upgrade to webpack 5 or higher and `svelte-loader` 3.1.8 or higher. Earlier versions are no longer supported. ([#8515](https://github.com/sveltejs/svelte/issues/8515), [198dbcf](https://github.com/sveltejs/svelte/commit/198dbcf)) -- If you are using Rollup, upgrade to `rollup-plugin-svelte` 7.1.5 or higher ([198dbcf](https://github.com/sveltejs/svelte/commit/198dbcf)) -- If you are using TypeScript, upgrade to TypeScript 5 or higher. Lower versions might still work, but no guarantees are made about that. ([#8488](https://github.com/sveltejs/svelte/issues/8488)) +- Node16以上にアップグレードしてください。それ以下のバージョンはもうサポートされていません。([#8566](https://github.com/sveltejs/svelte/issues/8566)) +- SvelteKitを使用している場合、1.20.4以上にアップグレードしてください ([sveltejs/kit#10172](https://github.com/sveltejs/kit/pull/10172)) +- SvelteKit を使わずに Vite を使っている場合は、`vite-plugin-svelte`2.4.1以上にアップグレードしてください ([#8516](https://github.com/sveltejs/svelte/issues/8516)) +- webpackを使用している場合は、webpack5以上に、`svelte-loader`は3.1.8以上にアップグレードしてください。それ以下のバージョンはサポートされなくなりました。([#8515](https://github.com/sveltejs/svelte/issues/8515), [198dbcf](https://github.com/sveltejs/svelte/commit/198dbcf)) +- Rollupを使用している場合は、`rollup-plugin-svelte`7.1.5以上にアップグレードしてください ([198dbcf](https://github.com/sveltejs/svelte/commit/198dbcf)) +- TypeScriptを使用している場合は、TypeScript5以上にアップグレードしてください。それ以下のバージョンでも動作する可能性はありますが、保証はできません。([#8488](https://github.com/sveltejs/svelte/issues/8488)) -## Browser conditions for bundlers +## バンドラーのブラウザ条件 -Bundlers must now specify the `browser` condition when building a frontend bundle for the browser. SvelteKit and Vite will handle this automatically for you. If you're using any others, you may observe lifecycle callbacks such as `onMount` not get called and you'll need to update the module resolution configuration. +ブラウザ用のフロントエンドバンドルをビルドするとき、バンドラーは`browser`条件を指定しなければならなくなりました。SvelteKitとViteは自動的にこれを処理します。他のものを使っている場合は、`onMount` のようなライフサイクルのコールバックが呼ばれないことがあるので、モジュールの解決設定を更新する必要があります。 -- For Rollup this is done within the `@rollup/plugin-node-resolve` plugin by setting `browser: true` in its options. See the [`rollup-plugin-svelte`](https://github.com/sveltejs/rollup-plugin-svelte/#usage) documentation for more details -- For wepback this is done by adding `"browser"` to the `conditionNames` array. You may also have to update your `alias` config, if you have set it. See the [`svelte-loader`](https://github.com/sveltejs/svelte-loader#usage) documentation for more details +- Rollup の場合は、`@rollup/plugin-node-resolve`プラグインのオプションで`browser: true`を設定することでこれを行います。詳しくは [`rollup-plugin-svelte`](https://github.com/sveltejs/rollup-plugin-svelte/#usage) ドキュメントを参照してください。 +- wepback では、`"browser"`を`conditionNames`配列に追加します。また、`alias`を設定している場合は、それを更新する必要があるかもしれません。詳しくは [`svelte-loader`](https://github.com/sveltejs/svelte-loader#usage) のドキュメントを参照してください。 ([#8516](https://github.com/sveltejs/svelte/issues/8516)) -## Removal of CJS related output +## CJS関連の出力の削除 -Svelte no longer supports the CommonJS (CJS) format for compiler output and has also removed the `svelte/register` hook and the CJS runtime version. If you need to stay on the CJS output format, consider using a bundler to convert Svelte's ESM output to CJS in a post-build step. ([#8613](https://github.com/sveltejs/svelte/issues/8613)) +Svelteはコンパイラ出力としてCommonJS (CJS)フォーマットをサポートしなくなり、`svelte/register`フックとCJSランタイムバージョンも削除されました。CJS出力フォーマットをまだ使用する必要がある場合は、ビルド後のステップでSvelteのESM出力をCJSに変換するバンドラーの使用を検討してください。([#8613](https://github.com/sveltejs/svelte/issues/8613)) -## Stricter types for Svelte functions +## Svelteの関数のより厳密な型 -There are now stricter types for `createEventDispatcher`, `Action`, `ActionReturn`, and `onMount`: +`createEventDispatcher`、`Action`、`ActionReturn`、および`onMount`には、より厳密な型が追加されました。 -- `createEventDispatcher` now supports specifying that a payload is optional, required, or non-existent, and the call sites are checked accordingly ([#7224](https://github.com/sveltejs/svelte/issues/7224)) +- `createEventDispatcher`はペイロードがオプション、必須、または存在しないことを指定できるようになり、それに応じてコールサイトがチェックされます ([#7224](https://github.com/sveltejs/svelte/issues/7224)) ```ts // @errors: 2554 2345 @@ -44,33 +44,33 @@ const dispatch = createEventDispatcher<{ noArgument: null; }>(); -// Svelte version 3: +// Svelte バージョン 3: dispatch('optional'); -dispatch('required'); // I can still omit the detail argument -dispatch('noArgument', 'surprise'); // I can still add a detail argument +dispatch('required'); // 詳細引数は省略できます +dispatch('noArgument', 'surprise'); // 詳細な引数を追加することもできます -// Svelte version 4 using TypeScript strict mode: +// TypeScript strict モードを使用した Svelte バージョン 4: dispatch('optional'); -dispatch('required'); // error, missing argument -dispatch('noArgument', 'surprise'); // error, cannot pass an argument +dispatch('required'); // エラー、引数がありません +dispatch('noArgument', 'surprise'); // エラー、引数を渡すことができません ``` -- `Action` and `ActionReturn` have a default parameter type of `undefined` now, which means you need to type the generic if you want to specify that this action receives a parameter. The migration script will migrate this automatically ([#7442](https://github.com/sveltejs/svelte/pull/7442)) +- `Action`と`ActionReturn`のデフォルトのパラメータタイプは `undefined` になりました。つまり、この action がパラメータを受け取るように指定したい場合は、このように generic を型付けする必要があります。移行スクリプトはこれを自動的に移行します ([#7442](https://github.com/sveltejs/svelte/pull/7442)) ```diff --const action: Action = (node, params) => { .. } // this is now an error if you use params in any way -+const action: Action = (node, params) => { .. } // params is of type string +-const action: Action = (node, params) => { .. } // 何らかの方法でparamsを使用すると、エラーになります ++const action: Action = (node, params) => { .. } // paramsはstring型です ``` -- `onMount` now shows a type error if you return a function asynchronously from it, because this is likely a bug in your code where you expect the callback to be called on destroy, which it will only do for synchronously returned functions ([#8136](https://github.com/sveltejs/svelte/issues/8136)) +- `onMount` に非同期な関数を返した場合、型エラーを表示するようになりました。これはおそらくバグだからです。コンポーネントの破棄時にコールバックが呼び出されることを期待しているのだと思いますが、それは同期的に関数を返した場合にのみ動作します。 ```diff -// Example where this change reveals an actual bug +// この変更によって実際のバグが明らかになった例 onMount( -- // someCleanup() not called because function handed to onMount is async +- // onMountに渡される関数が非同期であるため、someCleanup()が呼び出されない - async () => { - const something = await foo(); -+ // someCleanup() is called because function handed to onMount is sync ++ // onMountに渡された関数が同期されているため、someCleanup()が呼び出される。 + () => { + foo().then(something => .. // .. @@ -79,20 +79,20 @@ onMount( ); ``` -## Custom Elements with Svelte +## Svelteを使用したカスタム要素 -The creation of custom elements with Svelte has been overhauled and significantly improved. The `tag` option is deprecated in favor of the new `customElement` option: +Svelteでのカスタム要素の作成が大幅に改善されました。`tag`オプションは廃止され、新しい`customElement`オプションが採用されました: ```diff - + ``` -This change was made to allow [more configurability](custom-elements-api#component-options) for advanced use cases. The migration script will adjust your code automatically. The update timing of properties has changed slightly as well. ([#8457](https://github.com/sveltejs/svelte/issues/8457)) +この変更は、高度なユースケースのための[より詳細な設定](custom-elements-api#component-options)を可能にするために行われました。移行スクリプトは、コードを自動的に調整します。プロパティの更新タイミングも若干変更されました。([#8457](https://github.com/sveltejs/svelte/issues/8457)) -## SvelteComponentTyped is deprecated +## SvelteComponentTypedは非推奨です -`SvelteComponentTyped` is deprecated, as `SvelteComponent` now has all its typing capabilities. Replace all instances of `SvelteComponentTyped` with `SvelteComponent`. +`SvelteComponent`がすべての型付け機能を持つようになったため、`SvelteComponentTyped`は非推奨です。すべての`SvelteComponentTyped`インスタンスを`SvelteComponent`に置き換えてください。 ```diff - import { SvelteComponentTyped } from 'svelte'; @@ -102,7 +102,7 @@ This change was made to allow [more configurability](custom-elements-api#compone + export class Foo extends SvelteComponent<{ aProp: string }> {} ``` -If you have used `SvelteComponent` as the component instance type previously, you may see a somewhat opaque type error now, which is solved by changing `: typeof SvelteComponent` to `: typeof SvelteComponent`. +以前、コンポーネントのインスタンスタイプとして`SvelteComponent`を使用していた場合、やや不透明なタイプエラーが表示されることがありますが、これは`: typeof SvelteComponent`を`: typeof SvelteComponent`に変更することで解決します。 ```diff