0Pricing
Sveltejs Academy · レッスン

データの返却と$page.dataの使用

loadからデータを返し、data propを介してページコンポーネントでアクセスします。

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

dataプロップ

ページは、load関数の返り値から値が設定される特別な data プロップを受け取ります。

<!-- +page.svelte -->
<script>
  export let data;
</script>
<ul>{#each data.items as it}<li>{it.name}</li>{/each}</ul>

型安全

TypeScriptを使うと、SvelteKitはloadからdataまでの型を自動的に生成します。

<script lang="ts">
  import type { PageData } from "./$types";
  export let data: PageData;
</script>

複数のプロパティ

複数のキーを返し、それぞれに data.key でアクセスします。

リアクティビティ

ナビゲーション時にはdataプロップがリアクティブに更新されます。バインディングも再レンダリングされます。

$pageストア

$app/stores の $page を使うと、どこからでもメタデータにアクセスできます。

import { page } from "$app/stores";
<p>Current path: {$page.url.pathname}</p>

レイアウトデータのマージ

レイアウトのloadとページのloadは1つのdataオブジェクトにマージされ、ページツリー内のどこからでもアクセスできます。

カスタムプロップ

配列、オブジェクト、プリミティブ、さらにはPromise（ストリーミング用）など、シリアライズ可能な値なら何でも渡せます。

関数を避ける

関数はシリアライズできないため、動作ではなくデータだけを返します。

デフォルト値

loadが何も返さない場合、dataは {} になります。

ストアとの連携

マウント時にloadのデータをストアへ格納すると、アプリ全体からアクセスできます。

ページエラー

loadが例外を投げると、最も近い +error.svelte が表示されます。dataは設定されません。

確認問題

コンポーネントからloadの返り値にアクセスするにはどうしますか？

復習

dataプロパティでロードデータを受け取ります。URL、パラメータ、ルート情報には$pageを使用します。

よくある質問

「データの返却と$page.dataの使用」レッスンは無料ですか？

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

「データの返却と$page.dataの使用」で何を学びますか？

loadからデータを返し、data propを介してページコンポーネントでアクセスします。 ブラウザで直接実行するハンズオンコードでSveltejs Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「データの返却と$page.dataの使用」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

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