コンポーネントの構成

コードの再利用性とメンテナンス性を高めるため、一連の小さなコンポーネントを使用してアプリケーションとコンポーネントを構成すると便利です。lightning 名前空間には、コンポーネントの構築に使用できる lightning-button などの基本コンポーネントが多数含まれています。

コンポーネントで構成された簡単なアプリケーションを見てみましょう。このマークアップは、_オーナー_と_コンテナ_の概念を示すことを考慮して作成されたものです。実際のアプリケーションでは、c-todo-item インスタンスの数は可変であり、for:each ループで動的に入力されます。

1<!-- todoApp.html -->
2<template>
3  <c-todo-wrapper>
4    <c-todo-item item-name="Milk"></c-todo-item>
5    <c-todo-item item-name="Bread"></c-todo-item>
6  </c-todo-wrapper>
7  <template></template
8></template>

オーナー

オーナーは、テンプレートを所有するコンポーネントです。この例では、オーナーは c-todo-app コンポーネントです。オーナーは、含まれているすべての構成コンポーネントを制御します。オーナーは次のことができます。

構成コンポーネントの公開プロパティを設定する。
構成コンポーネントでメソッドをコールする。
構成コンポーネントによって起動されるイベントをリスンする。

コンテナ

コンテナには他のコンポーネントが含まれますが、コンテナ自体はオーナーコンポーネントに含まれます。この例では、c-todo-wrapper はコンテナです。コンテナはオーナーよりも強力ではありません。コンテナでは、次のことができます。

含まれているコンポーネントの公開プロパティを読み取る (ただし変更は不可)。
構成コンポーネントでメソッドをコールする。
含まれているコンポーネントによって上に伝達されるいくつかの (すべてとは限らない) イベントをリスンします。

親と子

あるコンポーネントに別のコンポーネントが含まれている (同様にこれにも他のコンポーネントを含むことができる) 場合、コンテインメント階層があります。ドキュメント内で親コンポーネントと子コンポーネントに言及することがあります。親コンポーネントには子コンポーネントが含まれます。親コンポーネントは、オーナーの場合もあれば、コンテナの場合もあります。

関連トピック

Lightning Web コンポーネントと Aura コンポーネントの連携

The Japanese Summer '24 guide is now live

日本語の Summer '24 ガイドが公開されました! 「Component Reference (コンポーネントリファレンス)」は、以前と同様にコンポーネントライブラリにあります。