BrainChain
SvelteKitのlayout.svelteでヘッダーとフッターを共通化する方法
大平 恵美
大平 恵美
2025-02-07
SvelteKitのlayout.svelteを活用すれば、ヘッダーやフッターをすべてのページで共通化し、効率的な開発が可能になります。本記事では、<slot />の仕組みや、ページ遷移時の動作について詳しく解説します。また、SvelteKitのルーティング機構を理解し、スムーズなページ遷移を実現する方法を紹介します。
あなた:

ヘッダーとフッターをlayout.svelteで作ることにしました。書き方を教えてください。

ChatGPT:

OK！それなら src/routes/+layout.svelte にヘッダーを直接書けばOKです。

基本的な layout.svelte

SvelteKitの layout.svelte は、すべてのページに共通のレイアウトを提供するためのファイルです。<slot /> を使って、ページごとのコンテンツを挿入できます。

シンプルなヘッダー付き layout.svelte

<script>
  // 必要なら状態やロジックを追加できる
</script>

<header class="bg-blue-600 text-white p-4">
  <div class="container mx-auto flex items-center justify-between">
    <h1 class="text-xl font-bold">My Website</h1>
    <nav>
      <ul class="flex space-x-4">
        <li><a href="/" class="hover:underline">Home</a></li>
        <li><a href="/about" class="hover:underline">About</a></li>
        <li><a href="/contact" class="hover:underline">Contact</a></li>
      </ul>
    </nav>
  </div>
</header>

<main class="container mx-auto p-4">
  <slot />
</main>

<footer class="bg-gray-800 text-white text-center p-4 mt-8">
  © 2025 My Website. All rights reserved.
</footer>

解説

  1. ヘッダー

    • bg-blue-600 text-white p-4 → 背景色（青）、文字色（白）、パディングを適用。
    • container mx-auto flex items-center justify-between → コンテンツを中央揃え、Flexbox でロゴとナビゲーションを左右に配置。
    • ナビゲーションメニュー（<ul>）は space-x-4 を使って項目間にスペースを追加。

  2. <slot />

    • layout.svelte の main の中に <slot /> を配置することで、各ページの内容がここに差し込まれる。

  3. フッター

    • bg-gray-800 text-white text-center p-4 mt-8 → 背景を暗めのグレーにし、中央揃え＆パディング追加。
    • 簡単な著作権表示を追加。

試しにページを作って確認

例えば、src/routes/+page.svelte を作成し、以下のコードを書けば、この layout.svelte のヘッダー・フッターが適用されたページが表示されます。

<h2 class="text-2xl font-semibold">Welcome to My Website</h2>
<p class="mt-4">This is the homepage.</p>

これで、ヘッダーとフッターを共通にしつつ、各ページごとにコンテンツを変更できるようになります！ 🚀

はい、その通りです！layout.svelte の中で <header> と <footer> を明示的に記述することで、すべてのページに共通の ヘッダー と フッター を指定しています。

💡 どういう仕組み？

SvelteKitでは、+layout.svelte に書かれたコードは、そのディレクトリ以下のすべてのページ (+page.svelte) に適用されます。

<header>...</header>  <!-- すべてのページに共通のヘッダー -->

<slot />  <!-- ページごとのコンテンツをここに挿入 -->

<footer>...</footer>  <!-- すべてのページに共通のフッター -->

このように、layout.svelte に <header> と <footer> を書くことで、すべてのページに共通の ヘッダーとフッター が適用されます。

🖥️ 例えば、以下の構成なら？

src/
  routes/
    +layout.svelte  <-- ここでヘッダー＆フッターを指定
    +page.svelte    <-- トップページのコンテンツ
    about/
      +page.svelte  <-- 「About」ページのコンテンツ
    contact/
      +page.svelte  <-- 「Contact」ページのコンテンツ

📝 +layout.svelte

<header class="bg-blue-600 text-white p-4">
  <div class="container mx-auto flex items-center justify-between">
    <h1 class="text-xl font-bold">My Website</h1>
    <nav>
      <ul class="flex space-x-4">
        <li><a href="/" class="hover:underline">Home</a></li>
        <li><a href="/about" class="hover:underline">About</a></li>
        <li><a href="/contact" class="hover:underline">Contact</a></li>
      </ul>
    </nav>
  </div>
</header>

<main class="container mx-auto p-4">
  <slot />
</main>

<footer class="bg-gray-800 text-white text-center p-4 mt-8">
  © 2025 My Website. All rights reserved.
</footer>

📝 about/+page.svelte

<h2 class="text-2xl font-semibold">About Us</h2>
<p class="mt-4">We are a team of developers building amazing apps.</p>

📌 結果

この場合、about ページを開くと、ヘッダーとフッターが適用された状態でページが表示されます。

[ ヘッダー ]  My Website | Home | About | Contact
------------------------------------------
[ メインコンテンツ ]
  About Us
  We are a team of developers building amazing apps.
------------------------------------------
[ フッター ]  © 2025 My Website. All rights reserved.

同じように、contact/+page.svelte を作成すれば、どのページでも共通のヘッダー＆フッターを持つことができます。

🛠 まとめ

✅ layout.svelte に <header> と <footer> を書くと、全ページ共通のデザインになる
✅ <slot /> の部分に、それぞれのページのコンテンツ (+page.svelte など) が挿入される
✅ こうすることで、すべてのページで共通のヘッダーとフッターを維持しつつ、ページごとに異なるコンテンツを表示できる

SvelteKitのレイアウトを活用すれば、効率的にアプリを作れるので便利です！💡

あなた:

slotの中身はページが変わったら、中身も合わせてくれるんですね。 どうやって検知しているのですか。

ChatGPT:

はい！SvelteKit の <slot /> は、ページが変わると自動的に そのページの内容に更新 されます。これは SvelteKit のルーティング機構 によって実現されています。

🔹 仕組みのポイント

1. layout.svelte は SvelteKit の「ラッパー」

SvelteKit では、layout.svelte は各ページの上に 共通のレイアウト として存在します。
そのため、<slot /> の部分は 常に「現在のページのコンテンツ」に置き換えられる仕組み になっています。

2. SvelteKit の「ルートページ」が変わると slot の中身が変わる

例えば、src/routes/+page.svelte (トップページ) と src/routes/about/+page.svelte (Aboutページ) があるとします。

✅ layout.svelte

<header class="bg-blue-600 text-white p-4">
  <h1 class="text-xl font-bold">My Website</h1>
</header>

<main class="container mx-auto p-4">
  <slot />  <!-- ページが変わると、ここが新しいページの内容に入れ替わる -->
</main>

<footer class="bg-gray-800 text-white text-center p-4 mt-8">
  © 2025 My Website. All rights reserved.
</footer>

✅ +page.svelte (トップページ)

<h2 class="text-2xl font-semibold">Welcome to My Website</h2>
<p class="mt-4">This is the homepage.</p>

✅ about/+page.svelte (Aboutページ)

<h2 class="text-2xl font-semibold">About Us</h2>
<p class="mt-4">We are a team of developers building amazing apps.</p>

この場合、

  • http://localhost:5173/ にアクセスすると layout.svelte の <slot /> に トップページ (+page.svelte) の内容が入る。
  • http://localhost:5173/about にアクセスすると <slot /> に Aboutページ (about/+page.svelte) の内容が入る。

🔹 SvelteKit はどのようにページの変更を検知しているのか？

1. SvelteKit のルーティング (ページ遷移)

SvelteKit は クライアントサイドルーティング を使用しており、ページ遷移時に <slot /> の中身だけを変更します。
これは SSR (サーバーサイドレンダリング) や CSR (クライアントサイドレンダリング) の仕組み を活用しています。

2. +page.svelte が更新されると slot の中身が変わる

SvelteKit では、ルート (/) や /about などの URL に基づいて +page.svelte を動的に読み込み、slot に差し込む 仕組みになっています。

📌 ページが変わると、SvelteKit は layout.svelte の <slot /> の中身を再レンダリングする！

🔹 SvelteKit のページ変更を検知する方法

もし、ページ遷移のたびに処理を実行したい場合は、onDestroy を使うと便利です。

✅ ページが変わるたびに処理を実行

<script>
  import { onDestroy } from "svelte";

  onDestroy(() => {
    console.log("ページが変わりました！");
  });
</script>

<h2 class="text-2xl font-semibold">Welcome to My Website</h2>
<p class="mt-4">This is the homepage.</p>

👆 onDestroy() は、このページ (+page.svelte) から別のページに移動したときに実行 されます。
これを使えば、例えば「ページ遷移時にスクロールをリセットする」こともできます。

🔹 まとめ

✅ SvelteKit の layout.svelte は、すべてのページの「ラッパー」
✅ <slot /> の中身は、現在のページ (+page.svelte) に自動で置き換わる
✅ SvelteKit はクライアントサイドルーティングを使い、ページ遷移をスムーズにする
✅ ページが変わることを onDestroy() で検知できる

この仕組みのおかげで、SvelteKit は ページ遷移を高速かつスムーズに処理 できます！ 🚀