Svelte で無限スクロールを実装する

DRANK

WebSvelteSvelteKitsvelte5techこの記事は LabBaseテックカレンダー Advent Calendar 2023 の 17 日目です。 はじめにSvelte で無限スクロール方式の検索画面を実装する方法を紹介します。Svelte はもうすぐバージョン 5 がリリースされる予定で、すでにプレビュー版を試せる段階なので、今回は Svelte 5 を使って実装しています。Svelte 5 の詳細については以下のページなどを参照してください。 5 自体がまだプレビュー版であることと、筆者自身 Svelte 5 での書き方に慣れていないため、今回紹介している内容には間違いがあるかもしれません。その場合にはコメントで教えていただけると大変ありがたいです。 サンプルプロジェクトについてサンプルプロジェクトはここにあります。 [1]　Loading... と表示されてデータを追加で 10 件ロードします。ロードが完了するとリストの末尾にデータが追加されます。すべてのデータが読み込まれた場合は、 No more items. と表示されて読み込みが終了します。 実装についてsrc/components/InfiniteScroll.svelte として定義している InfiniteScroll コンポーネントが無限スクロールのための機能を提供していて、他のコンポーネント…