LWS で undefined と評価されるプロパティ

LWS では、値が undefined と評価されることがあります。

LWS で実行されているコンポーネントでプロパティが undefined として評価される原因となるいくつかの条件、およびその対処方法を次に示します。

コードまたは使用しているサードパーティライブラリで値が window オブジェクトに保存される場合、グローバル範囲にアクセスしていることになります。Lightning Web セキュリティでは、グローバル変数の作成が防止される JavaScript の厳格モードが適用されます。グローバル変数を作成しようとすると、ブラウザでエラーが発生します。

LWS のディストーションにより、コンポーネントの名前空間 Sandbox 内でのみ仮想 window オブジェクトへの変更が許可されます。コンポーネントが別の名前空間で作成されたグローバル範囲プロパティにアクセスしようとした場合、LWS によって返される値は undefined になります。

LWS の Sandbox 化により、グローバルプロパティにアクセスできるように見えますが、実際には window オブジェクトの仮想コピーにアクセスしています。名前空間 Sandbox 内では、LWS を使用してグローバルプロパティにアクセスできますが、グローバル範囲に何かを保存することは悪しき習慣とみなされます。LWS では可能ですが、変異のあるオブジェクトが名前空間 Sandbox の外部で実行されているコードに渡された場合、変更されたプロパティにはアクセスできません。

代わりに、関数またはコンストラクタの引数として、他の名前空間の関数またはオブジェクトがアクセスできる共有データを渡します。

サードパーティのライブラリは、LWS が有効なときに明示的に厳格モードに設定すべきではありません。「LWS に対するサードパーティライブラリの考慮事項」を参照してください。

LWS を有効にした後で、引数として渡された値の一部が undefined であることが検出された場合、コンポーネントが所有しないデータでのオブジェクトの変異または変更が原因である可能性があります。

データの所有権は名前空間レベルで定義されます。つまり、名前空間内で定義されたコードは、それ自体のデータを自由に変更できます。ただし、コードが別の名前空間からデータを受け取り、そのデータを変更した場合、その変更が名前空間の外部に常に反映されるとは限りません。

変更されるオブジェクトがプレーン JavaScript オブジェクト、配列、または型指定された配列である場合、LWS では元のオブジェクトでの変異が許可され、その変更は名前空間の外部に反映されます。特に、対応付けの代わりにこのようなオブジェクトを使用することをお勧めします。

グローバル window オブジェクトおよびカスタムクラスから構築されたオブジェクトでは、オブジェクトが名前空間によって所有されていない場合、LWS で変異が許可されません。名前空間 Sandbox の外部に追加されたプロパティは、undefined と評価されます。

この例では、redFunction は名前空間 A で定義され、blueFunction は名前空間 B で定義されています。

blueFunctionredFunction が使用されている場合、名前空間 A で行われた foo プロパティの変異を受け取りません。名前空間は相互にデータを渡すことでやりとりできますが、変異は名前空間の境界を越えて適用されることはありません。

コードが他の名前空間から受け取ったオブジェクトを変更する場合は、コードをリファクタリングします。

コードをリファクタリングする方法の例については、「オブジェクト変異の代替方法」を参照してください。

羃等にすることを念頭に置いて、不変性のある関数を設計することをお勧めします。不変性コーディングパラダイムについての詳細は、この Redux ガイドを参照してください。

関連トピック