静的リソースへのアクセス

範囲設定されたモジュール @salesforce/resourceUrl から静的リソースをインポートします。静的リソースには、アーカイブ (.zip や .jar ファイルなど)、画像、スタイルシート、JavaScript、その他のファイルを使用できます。

静的リソースをインポートする前に、ファイルを作成してアップロードします。

静的リソースを作成およびアップロードする手順は、次のとおりです。

  1. [設定] から、[クイック検索] ボックスに「静的リソース」と入力し、[静的リソース] を選択します。

  2. [新規] をクリックします。

  3. [名前] テキストボックスで、LWC コード内でリソースの識別に使用されるテキストを入力します。

静的リソース名には、アンダースコアと英数字のみ使用できます。また、静的リソース名は、組織内で一意にする必要があります。最初は文字であること、空白は使用しない、最後にアンダースコアを使用しない、2 つ続けてアンダースコアを使用しないという制約があります。

:::

  1. [説明] テキストエリアで、リソースの任意の説明を指定します。
  2. [参照] をクリックして、アップロードするリソースのローカルコピーに移動します。最大ファイルサイズは 5 MB です。組織では、最大 250 MB の静的リソースを使用できます。
  3. API ユーザセッションや Experience Cloud ユーザセッションといったユーザセッションの Cache Control を設定します。
    • [非公開] は、Salesforce サーバにキャッシュされた静的リソースデータを他のユーザと共有してはならないことを指定します。静的リソースは、現在のユーザのセッションについてのみキャッシュに保存されます。
    • [公開] は、Salesforce サーバにキャッシュされた静的リソースデータを、読み込み時間を短縮するために組織の他のユーザと共有することを指定します。データがキャッシュされると、認証されていないユーザを含め、すべてのインターネットトラフィックからリソースにアクセスできるようになります。
  4. [保存] をクリックします。

詳細は、「Salesforce ヘルプ: 静的リソース」を参照してください。

次の構文を使用して静的リソースをインポートします。

  • myResource — 静的リソースを参照する名前。
  • resourceReference — 静的リソースの名前。
  • namespace — 静的リソースが管理パッケージ内にある場合、この値は管理パッケージの名前空間となります。

サンプルコードを見てみましょう。

JavaScript コードにより Trailhead ロゴと Trailhead 文字の画像の 2 つのリソースがインポートされます。

静的リソースは、ディレクトリ構造がネストされたアーカイブファイルにすることができます。アーカイブ内の項目を参照するには、文字列を連結して項目のパスを作成します。これは、例で einsteinUrl を作成するために行った方法と同様です。

テンプレート内のリソースを参照するには、{property} 構文を使用します。この構文は、JavaScript プロパティを参照するために使用する構文と同じです。

Salesforce DX プロジェクトの場合、静的リソースは /force-app/main/default/staticresources ディレクトリにあります。staticresources のサブディレクトリを作成することはできません。

リソースごとに .resource-meta メタデータファイルを作成します。メタデータファイルでは、リソースのコンテンツタイプが定義されます。

このコードサンプルは、github.com/trailheadapps/lwc-recipes リポジトリにある miscStaticResource コンポーネントです。

関連トピック