Vue Academy · レッスン

スロットのフォールバックコンテンツとスロットの確認

デフォルトスロットのコンテンツ、スロットが提供されているかを確認するuseSlots()、条件付きレンダリングについて学習します。

レッスン 4/413 ステップ

「スロットのフォールバックコンテンツとスロットの確認」はCoddyKit上の無料Vue Academyレッスンです。これはレッスン4/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。

スロットのフォールバックコンテンツ

<slot> にはデフォルトのマークアップを含められます。親コンポーネントがそのスロット用のコンテンツを提供した場合は親のコンテンツが優先され、提供しなかった場合はスロット内のフォールバックがレンダリングされます。

フォールバックの定義

デフォルトのコンテンツをスロットタグの間に記述します。これは、任意のスロットに対する適切なデフォルトになります。

<!-- Button.vue -->
<button>
  <slot>Submit</slot>
</button>

フォールバックの動作

親コンポーネントから何も渡されなければ、「Submit」が表示されます。親コンポーネントからコンテンツが渡されると、フォールバックがそのコンテンツで置き換えられます。

<Button />            <!-- shows: Submit -->
<Button>Save</Button> <!-- shows: Save -->

名前付きスロットのフォールバック

名前付きスロットもフォールバックに対応しています。親コンポーネントが指定しなかった場合、header スロットに標準のタイトルをデフォルトとして表示できます。

<header>
  <slot name="header">
    <h2>Default Title</h2>
  </slot>
</header>

空のラッパーの問題

フッターコンテナのようなラッパー要素を、親コンポーネントが実際にスロットのコンテンツを提供した場合にだけレンダリングしたいことがあります。その場合は、スロットが存在するかどうかを確認する必要があります。

useSlots コンポーザブル

<script setup> では、useSlots() が、提供されたスロット名をキーとするオブジェクトを返します。各値は、スロットの vnode を返す関数です。

import { useSlots } from "vue";
const slots = useSlots();

スロットが渡されたか確認する

スロット関数を呼び出し、内容が truthy かどうかを確認します。slots.header は親コンポーネントがそのスロットを提供した場合にのみ存在し、slots.header?.() を呼び出すと安全にその vnode を返せます。

const hasHeader = computed(() => !!slots.header);

ラッパーを条件付きでレンダリングする

v-if とこの確認処理を組み合わせると、コンテンツがある場合にだけラッパー要素が表示されるため、空の DOM ノードを避けられます。

<header v-if="slots.header">
  <slot name="header" />
</header>

オプショナルチェーンを使う理由

slots.header?.() は、スロットが undefined である場合に備えて保護します。オプショナルチェーンがなければ、undefined のスロットを呼び出したときにエラーが発生します。このパターンは、render 関数や computed による確認処理でよく使われます。

const headerNodes = slots.header?.();
if (headerNodes) { /* render wrapper */ }

テンプレート内の $slots

テンプレートでは、同じデータを $slots から利用できます。useSlots を import しなくても、v-if 内で $slots.footer を直接確認できます。

<footer v-if="$slots.footer">
  <slot name="footer" />
</footer>

まとめて実装する

堅牢なカードコンポーネントでは、各セクションを対応するスロットが提供されている場合にのみレンダリングすることで、マークアップをすっきり保ち、スタイルを予測しやすくできます。

<div class="card">
  <header v-if="$slots.header"><slot name="header" /></header>
  <div class="body"><slot /></div>
  <footer v-if="$slots.footer"><slot name="footer" /></footer>
</div>

確認問題

script setup で、親コンポーネントが「header」スロットを提供したかどうかを確認するにはどうすればよいでしょうか。

対話的なレッスンで答える

まとめ

スロットにはフォールバックコンテンツを設定でき、親コンポーネントがスロットを省略した場合にそのコンテンツがレンダリングされることを学びました。ラッパーを条件付きでレンダリングするには、script setup では useSlots()（slots.header?.()）を、テンプレートでは $slots.header を使ってスロットの存在を確認します。

無料で開始

AI チューターと学ぶ HTML — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース: 42
レッスン: 156

無料で学習を始めるコース全体を表示

よくある質問

「スロットのフォールバックコンテンツとスロットの確認」レッスンは無料ですか？

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

「スロットのフォールバックコンテンツとスロットの確認」で何を学びますか？

デフォルトスロットのコンテンツ、スロットが提供されているかを確認するuseSlots()、条件付きレンダリングについて学習します。ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「スロットのフォールバックコンテンツとスロットの確認」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

← Vue Academyに戻る