Svelte入門：SvelteKitでの移行 -Vol.4-

よっしー

こんにちは。よっしーです(^^)

今日は、SvelteKitでの移行について解説しています。

スポンサーリンク

背景

SvelteKitでの移行について調査する機会がありましたので、その時の内容を備忘として記事に残しました。

トップレベルのpromiseはwaitされない

SvelteKit バージョン1では、load関数から返されるオブジェクトのトップレベルプロパティがPromiseだった場合、自動的にawaitされていました。しかし、ストリーミングの導入により、この動作は少し扱いづらくなりました。というのも、ストリーミングされるデータを1階層深くネストする必要が出てきたためです。

バージョン2からは、SvelteKitはトップレベルのPromiseと非トップレベルのPromiseを区別しなくなりました。ブロッキング動作を得るためには、awaitを使用してください（必要に応じて、ウォーターフォール防止のためにPromise.allを使用します）。

解説

この変更点について、重要なポイントを解説します：

1. バージョン1での動作：

• トップレベルのPromiseは自動的にawaitされていた
• つまり、明示的なawaitを書く必要がなかった

1. バージョン2での変更：

• Promiseの扱いが統一された
• 位置に関係なく、すべてのPromiseを明示的にawaitする必要がある

1. コード例の説明：

単一のPromiseの場合：

export async function load({ fetch }) {
  const response = await fetch(url).then(r => r.json());
  return { response }
}

• 単一のfetchリクエストを行い、その結果をawaitで待っています

複数のPromiseの場合：

export async function load({ fetch }) {
  const [a, b] = await Promise.all([
    fetch(url1).then(r => r.json()),
    fetch(url2).then(r => r.json()),
  ]);
  return { a, b };
}

• 複数のfetchリクエストを並行して実行
• Promise.allを使用することで、すべてのリクエストを並行して処理し、パフォーマンスを最適化
• ウォーターフォール（直列的な実行）を防いでいます

この変更は、特にストリーミングを使用する場合のコードの一貫性と可読性を向上させることを目的としています。

おわりに

今日は、 SvelteKitでの移行について解説しました。

よっしー

何か質問や相談があれば、コメントをお願いします。また、エンジニア案件の相談にも随時対応していますので、お気軽にお問い合わせください。

それでは、また明日お会いしましょう(^^)