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

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

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

静的リソースの作成とアップロード

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

[設定] から、[クイック検索] ボックスに「静的リソース」と入力し、[静的リソース] を選択します。
[新規] をクリックします。
[名前] テキストボックスで、LWC コード内でリソースの識別に使用されるテキストを入力します。

Note

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

:::

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

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

静的リソースのインポート

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

1import myResource from "@salesforce/resourceUrl/resourceReference";

1import myResource from "@salesforce/resourceUrl/namespace__resourceReference";

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

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

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

1// miscStaticResource.js
2import { LightningElement } from "lwc";
3import TRAILHEAD_LOGO from "@salesforce/resourceUrl/trailhead_logo";
4import TRAILHEAD_CHARACTERS from "@salesforce/resourceUrl/trailhead_characters";
5
6export default class MiscStaticResource extends LightningElement {
7  // Expose the static resource URL for use in the template
8  trailheadLogoUrl = TRAILHEAD_LOGO;
9
10  // Expose URL of assets included inside an archive file
11  einsteinUrl = TRAILHEAD_CHARACTERS + "/images/einstein.png";
12}

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

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

1<!-- miscStaticResource.html -->
2<template>
3  <lightning-card title="MiscStaticResource" icon-name="custom:custom19">
4    <div class="slds-m-around_medium">
5      <img src={trailheadLogoUrl} />
6      <img src={einsteinUrl} />
7    </div>
8  </lightning-card>
9</template>

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

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

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

Tip

関連トピック

The Japanese Summer '24 guide is now live

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