問題
カスタムSVGをLightning Webコンポーネントに含めることができる３つのステップはどれですか。3つ選びなさい。
- SVGを静的リソースとしてアップロードします。
- HTMLテンプレートでgetterを参照します。
- SVGをコンテンツアセットファイルとしてインポートします。
- HTMLテンプレートでインポートを参照します。
- 静的リソースをインポートし、JavaScriptでgetterを提供します。
正解
- SVGを静的リソースとしてアップロードします。
- HTMLテンプレートでgetterを参照します。
- SVGをコンテンツアセットファイルとしてインポートします。
- HTMLテンプレートでインポートを参照します。
- 静的リソースをインポートし、JavaScriptでgetterを提供します。
解説
それぞれの選択肢の理由について説明します。
□ SVGを静的リソースとしてアップロードします。
これは正解です。Lightning Web コンポーネントでSVGを使用する際の一般的な手法は、SVGファイルを静的リソースとしてSalesforceにアップロードすることです。
□ HTMLテンプレートでgetterを参照します。
これは正解です。JavaScriptファイル内で定義されたgetterやプロパティは、HTMLテンプレート内で参照することができます。これにより、静的リソースから取得したデータやSVGのパスなどをHTMLテンプレートにバインドすることができます。
□ SVGをコンテンツアセットファイルとしてインポートします。
これは不正解です。Lightning Web コンポーネントでSVGを使用する際、SVGをコンテンツアセットファイルとしてインポートする手法は一般的ではありません。静的リソースとしてのアップロードが推奨されます。
□ HTMLテンプレートでインポートを参照します。
これは不正解です。HTMLテンプレート内で直接インポートを行うことはできません。インポートはJavaScriptファイル内で行われ、その後、HTMLテンプレートでgetterやプロパティを介して参照されます。
□ 静的リソースをインポートし、JavaScriptでgetterを提供します。
これは正解です。静的リソースをJavaScriptファイル内でインポートし、そのリソースをHTMLテンプレートで使用するためのgetterを提供することは、Lightning Web コンポーネントの一般的なパターンです。
補足：Lightning Web コンポーネントで静的リソースを使用する際の手順
- 静的リソースのアップロード: Salesforce 組織に SVG ファイル(または他の静的リソース)をアップロードします。
- JavaScript での静的リソースのインポート: Lightning Web コンポーネントの JavaScript ファイル内で、静的リソースをインポートします。
import MY_STATIC_RESOURCE from '@salesforce/resourceUrl/MyStaticResourceName';- getter を使用してリソースのURLを取得: JavaScript ファイル内で getter を使用して、静的リソースの URL を取得します。
get myResourceUrl() {
return MY_STATIC_RESOURCE;
}- HTML テンプレートで getter を参照: HTML テンプレート内で、上記の getter を使用して静的リソースを参照します。SVG の場合、以下のようになります：
<img src={myResourceUrl} alt="My Static Resource Image">次の問題へ
前の問題へ
1問目から復習する
コメント