コンポーネントの構成

• コンポーネントを構成する。
• スロットを使用する。
• 2 つのプログラミングモデルのデータバインドの動作の違いを挙げる。

<!-- owner.html -->
<template>
    <c-child first-name="Moonbeam"></c-child>
</template>

<!-- owner.html -->
<template>
    <c-parent-container>
        <c-child first-name="Moonbeam"></c-child>
    </c-parent-container>
</template>

<aura:component>
    ...
    <div class="slds-card">
        <lightning:layout horizontalAlign="center" multipleRows="true">
            <aura:iteration items="{!v.properties}" var="property">
                <lightning:layoutItem padding="around-small" size="12" smallDeviceSize="6" mediumDeviceSize="4" largeDeviceSize="3">
                    <c:PropertyTile property="{#property}"/>
                </lightning:layoutItem>    
            </aura:iteration>
        </lightning:layout>
    </div>
</aura:component>

<template>
    <div class="slds-card tile-list">
        <template for:each={filteredProperties} for:item="property">
            <c-property-tile property={property} key={property.Id}></c-property-tile>
        </template>
    </div>
</template>

Lightning Web コンポーネントに Lightning Web コンポーネントが含まれる

lwcContainerComponent と lwcComponent という 2 つの Lightning Web コンポーネントによる構成を見てみましょう。

<!-- lwcContainerComponent.html -->
<template>
    <c-lwc-component></c-lwc-component>
</template>

lwcComponent Lightning Web コンポーネントを別の Lightning Web コンポーネントで使用する方法は次のとおりです。

• c 名前空間とコンポーネント名をダッシュで区切ります。
• キャメルケースの名前 lwcComponent を lwc-component というケバブケース (ダッシュ区切り) の参照に変更します。Web コンポーネント標準と一貫性を保つため、ダッシュ区切りの参照を使用します。
• HTML 仕様では、カスタム要素のタグは自己終了でないことが規定されています。自己終了タグは /> で終わります。Lightning Web コンポーネントは、基本的にはカスタム要素です。したがって、コンポーネントの参照には開始タグと終了タグが必要です。

  <c-lwc-component></c-lwc-component>

Aura コンポーネントに Lightning Web コンポーネントが含まれる

lwcContainerComponent という Lightning Web コンポーネントを含む auraWrapper という Aura コンポーネントを見てみましょう。

<!-- auraWrapper.cmp -->
<aura:component>
    <c:lwcContainerComponent />
</aura:component>

lwcContainerComponent Lightning Web コンポーネントを Aura コンポーネントで使用する方法は次のとおりです。

• c 名前空間とコンポーネント名をコロンで区切ります。
• キャメルケースのコンポーネント名 lwcContainerComponent を使用します。
• Aura マークアップでは自己終了タグが許されているので、<c:lwcContainerComponent /> を使用します。

<aura:component>
    <aura:attribute name="header" type="Aura.Component[]"/>
    <div>
        <span>{!v.header}</span><br/>
        <span>{!v.body}</span>
    </div>
</aura:component>

<template>
    <div>
        <slot name="header"></slot><br/>
        <slot></slot>
    </div>
</template>

ファセットに関するその他の考慮事項は?

よくぞ聞いてくれました。Lightning Web コンポーネントに Aura コンポーネントを含めることはできません。ファセットを含む Aura コンポーネントを移行する場合、ファセットに含めるサブコンポーネントもすべて移行する必要があります。そうすることで、Aura コンポーネントが Lightning Web コンポーネントに含まれることがないようにします。

Aura コンポーネントのデータバインド

Aura コンポーネントでは、データバインドの式構文として {!expr} と {#expr} という 2 つの形式を使用できます。これらの違いについてはここで説明しませんが、簡単な例を見てみましょう。

<!-- owner.cmp -->
<aura:component>
    <aura:attribute name="fName" type="String" />
    <c:child firstName="{!v.fName}"/>
</aura:component>

所有者コンポーネントは fName 属性の値を子コンポーネントに渡します。その結果が 2 つのコンポーネントのデータバインド (値バインド) です。

Aura コンポーネントでは、このデータバインドは双方向になります。fName 属性の変更は子コンポーネントの firstName 属性に渡され、子コンポーネントの firstName 属性の値は所有者コンポーネントの fName 属性に返されます。この 2 方向データバインドは、パフォーマンスに対してコストが高くなる場合があり、特に深くネストされたコンポーネントがあると、データ変更の伝達に起因するデバッグが難しいエラーを引き起こす可能性があります。

Lightning Web コンポーネントのデータバインド

Lightning Web コンポーネントでは、プロパティ値のデータバインドは一方向になります。所有者コンポーネントでプロパティ値が変更されると、更新された値が子コンポーネントに伝達されます。その逆は起こりません。

簡単なデータバインドの例を見てみましょう。

<!-- owner.html -->
<template>
    <c-child first-name={fName}></c-child>
</template>

データバインドの動作は、Lightning Web コンポーネントでは意図的により単純で予測可能になっています。子コンポーネントは、所有者コンポーネントから渡されたプロパティ値を読み取り専用として扱う必要があります。子コンポーネントが所有者コンポーネントから渡された値を変更すると、ブラウザーコンソールにエラーが表示されます。

所有者コンポーネントが提供するプロパティ値の変異をトリガーするために、子コンポーネントは親にイベントを送信できます。親がデータを所有している場合、親はプロパティ値を変更でき、これは一方向データバインドで子コンポーネントに伝達されます。

• Lightning Aura コンポーネント開発者ガイド: コンポーネントのファセット
• Lightning Aura コンポーネント開発者ガイド: コンポーネント間のデータバインド
• Lightning Web Components Developer Guide (Lightning Web コンポーネント開発者ガイド): Compose Components (コンポーネントの構成)
• Lightning Web Components Developer Guide (Lightning Web コンポーネント開発者ガイド): Set Properties on Child Components (子コンポーネントのプロパティの設定)