Svelte 4から5への移行
公式の移行ガイドとcodemodを使い、Svelte 4のコンポーネントをRunes対応に変換します。
「Svelte 4から5への移行」はCoddyKit上の無料Sveltejs Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSveltejs Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Sveltejs Academyコースには全4レッスンが含まれています。
移行への心構え
Svelte 5 はほぼ完全な後方互換性を備えています。コンポーネント単位で移行できます。
公式 Codemod
移行スクリプトを実行すると、従来の構文を自動的に変換できます。
npx sv migrate svelte-5実行内容
codemod は export let を $props() に、$: を $derived/$effect などに書き換えます。
出力を確認する
移行後のコードは必ず確認してください。一部のパターンでは手動で判断する必要があります。
共存
同じファイル内に古い構文と新しい構文を共存させられます。Svelte 5 はブロックごとに判別します。
リアクティブな変更
$state のプロキシによって array.push() もリアクティブになります。古い回避策としての再代入は削除できる場合があります。
イベントディスパッチャー
createEventDispatcher は、$props() を通じて渡すコールバック props に置き換えられます。
スロットとスニペット
スロットは引き続き使用できますが、新しいコンポーネントではスニペットへの書き換えを検討してください。
ストアの互換性
svelte/store は引き続きサポートされています。ストアを使い続けることも、アプリの状態管理を $state にリファクタリングすることもできます。
ライブラリの互換性
ほとんどのライブラリは両方のバージョンを対象にしています。コンポーネントを 1 つずつ更新してください。
ドキュメント
Svelte 5 のドキュメントには、左右に並べた比較を含む移行ガイドがあります。
クイックチェック
Svelte 4 と 5 の構文を混在させられますか？
まとめ
npx sv migrate svelte-5 を使って Svelte 5 に移行できます。段階的な導入のために、古い構文も引き続き動作します。
よくある質問
「Svelte 4から5への移行」レッスンは無料ですか？
はい。「Svelte 4から5への移行」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Sveltejs Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Sveltejs Academyコースには全4レッスンが含まれています。
「Svelte 4から5への移行」で何を学びますか？
公式の移行ガイドとcodemodを使い、Svelte 4のコンポーネントをRunes対応に変換します。 ブラウザで直接実行するハンズオンコードでSveltejs Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Sveltejs Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのSveltejs Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「Svelte 4から5への移行」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このSveltejs Academyレッスンでコードを書いて実行できますか？
はい。すべてのSveltejs Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。