イベントのベストプラクティス

イベントを操作するときには、以下のベストプラクティスをお勧めします。

CustomEvent.detail

同じシャドウツリー内の要素に対してデータを通信する場合は、myProperty を event.detail には追加しないでください。イベントのコンシューマは event.target.myProperty を使用できます。

同じシャドウツリーに存在しない要素にデータを伝達するには、event.detail を使用します。この場合、実際の対象はリスナーに表示されないため、event.target.* は機能しません。(イベントが DOM ツリーを上に伝達するときにシャドウ境界を越えると、Event.target の値がリスナーの範囲に合わせて変更されます。イベントの対象が変更されるため、リスナーはイベントをディスパッチしたコンポーネントのシャドウツリーを見ることができません。)

detail を使用する場合は、プリミティブ型を使用します。JavaScript は、プリミティブ型以外のすべてのデータ型を参照によって渡します。コンポーネントの detail プロパティにオブジェクトが含まれていると、どのリスナーであってもコンポーネントについての知識なしでそのオブジェクトを変更できてしまいます。これは望ましいことではありません。

非プリミティブ型を使用すると、内部状態の漏洩を回避できます。detail プロパティにデータを追加する前に、データを新しいオブジェクトまたは配列にコピーします。新しいオブジェクトにデータをコピーすることで、必要なデータのみが送信されること、そして受信側でデータを変更できなくなることを保証できます。

@api または @wire からの非プリミティブを detail に含めないでください。これらの値は、参照のみのメンブレンにラップされます。IE 11 の場合、LWC から Aura へのブリッジを横断すると、参照のみのメンブレンが失われます。これは変異が発生することを意味します。

イベントの伝達

混乱を最小限に抑えるには、イベントを bubbles: false と composed: false に設定します。これらのイベントは DOM ツリー内で上に伝達されず、シャドウ境界を越えることもありません。伝達する構成イベントは (停止されるまで) DOM ツリー全体を上に伝達してシャドウ境界を越え、親コンポーネントまで達してしまうため、お勧めしません。イベントを設定するときに bubbles: true と composed: true を指定すると、イベント種別がコンポーネントの公開 API の一部となります。また、コンシューマであるコンポーネントとそのすべての上位コンポーネントの API の一部としてイベントが強制的に含まれます。これはサインアップする大きな API 契約です。この設定を使用する場合は、イベント種別をグローバルに一意にする必要があります。

関連トピック

The Japanese Summer '24 guide is now live

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