0Pricing
Sveltejs Academy · レッスン

+page.jsのload関数

load関数をexportし、ページのレンダリング前にデータを取得または計算します。

「+page.jsのload関数」はCoddyKit上の無料Sveltejs Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSveltejs Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Sveltejs Academyコースには全4レッスンが含まれています。

load関数を使う理由

SvelteKitは、ページのレンダリング前に取得できるよう、ページに必要なデータを把握する必要があります。その役割をload関数が担います。

ファイルの配置場所

同じフォルダー内で、+page.svelte の隣に +page.js を作成します。

loadのエクスポート

load という名前の関数をエクスポートします。

export async function load({ params, fetch }) {
  const res = await fetch("/api/items");
  return { items: await res.json() };
}

非同期処理に対応

load関数は非同期にできます。SvelteKitはレンダリング前に関数の完了を待機します。

返されるデータ

返した値はすべて、ページの data プロップとして提供されます。

fetchの使用

load関数に提供される fetch を使用します。SSRと認証情報が正しく処理されます。

paramsへのアクセス

動的ルートのパラメーターは params に格納されます。

export function load({ params }) { return { slug: params.slug }; }

最初はサーバー側で実行

初回リクエストではloadがサーバー上で実行され、その後のナビゲーションではクライアント上で実行されます。

ユニバーサルとサーバー専用

+page.js は両方で実行されますが、+page.server.js はサーバー上でのみ実行されます。

キャッシュ

load関数を効率化するには、HTTPヘッダーとプラットフォームのキャッシュを使用します。

ストリーミング

ネストしたプロパティにPromiseを返すと、初期HTMLをブロックせずにデータをストリーミングできます。

確認問題

loadは何を返しますか？

まとめ

+page.js から load をエクスポートして、データを取得または計算します。返り値がページのdataプロップになります。

よくある質問

「+page.jsのload関数」レッスンは無料ですか？

はい。「+page.jsのload関数」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Sveltejs Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Sveltejs Academyコースには全4レッスンが含まれています。

「+page.jsのload関数」で何を学びますか？

load関数をexportし、ページのレンダリング前にデータを取得または計算します。 ブラウザで直接実行するハンズオンコードでSveltejs Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Sveltejs Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのSveltejs Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。

「+page.jsのload関数」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このSveltejs Academyレッスンでコードを書いて実行できますか？

はい。すべてのSveltejs Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. +page.jsのload関数
  2. データの返却と$page.dataの使用
  3. loadでのエラー処理
  4. サーバー専用ロジックのための+page.server.js
← Sveltejs Academyに戻る