【SvelteKit】レイアウトの入れ子と+layout.server.ts

TypeScript

前回やったルーティングに「products」を追加し、親レイアウトに追加でサイドバーに「product一覧」を表示するレイアウトを追加したいと思います。

【SvelteKit】ルーティングとローディングとレイアウト
SvelteKit はファイルシステムベースのルーティングが採用されており、src/routesディレクトリ内に+page.svelteファイルを作成することで…
redsum.net

ディレクトリ構成は以下の感じです。

src/routes
 ├ ...
 └ products
 　  ├ +layout.server.ts
 　  ├ +layout.svelte
 　  ├ +page.svelte
 　  ├ data.ts
 　  └ [id]
 　  　  ├ +error.svelte
 　  　  ├ +page.server.ts
 　  　  └ +page.svelte

目次

コード

data.ts はこんな感じ

export const products = [
    {
        id: '001',
        name: 'productA',
    },
    {
        id: '002',
        name: 'productB',
    },
    {
        id: '003',
        name: 'productC',
    },
    {
        id: '004',
        name: 'productD',
    },
    {
        id: '005',
        name: 'productE',
    },
]

src/routes/products 階層

import { products } from './data';


export function load() {
  return {
    summaries: products.map((product) => ({
      id: product.id,
      name: product.name,
    }))
  };
}
<script lang='ts'>
  import type { PageData } from './$types.js';
  export let data: PageData;
</script>

<div class='container'>
  <aside>
    <h2>Product一覧</h2>
    <ul>
      {#each data.summaries as { id, name }}
        <li>
          <a href='/products/{id}'>{name}</a>
        </li>
      {/each}
    </ul>
  </aside>
  <section>
    <slot />
  </section>
</div>

<style>
  .container {
    width: 100%;
    display: flex;
  }
  aside {
    width: 20%;
  }
  section {
    width: 80%;
  }
</style>
<script lang='ts'>
  import type { PageData } from './$types.js';
  export let data: PageData;
</script>

<h1>Products</h1>
<ul>
  {#each data.summaries as { id, name }}
    <li><a href="/products/{id}">{name}</a></li>
  {/each}
</ul>

src/routes/products/[id] 階層

前回とインポート名が変わるだけなので割愛します。
とりあえず画面だけ…