コンポーネントフォルダー

コンポーネントを定義するには、lwc フォルダーの直下にコンポーネントのファイルをバンドルするフォルダーを作成します。Salesforce DX ツールを使用する場合、プロジェクトの作成時に自動的にフォルダーが作成されます。Salesforce DX プロジェクトの構造は次のようになります。

プロジェクトには、auralwc などのフォルダーがある force-app/main/default フォルダーが含まれます。詳細は、「Salesforce DX プロジェクトの構造とソース形式」を参照してください。

フォルダーとそのファイルの名前は、大文字と小文字、およびアンダースコアを含めて同じにする必要があります。

コンポーネントフォルダーには、次のようなファイルが含まれます。

ファイル必須かどうかSalesforce DX ツールを使用すると自動的に作成されるかどうか説明
HTMLはいコンポーネントの UI を提供します。「コンポーネントの HTML ファイル」を参照してください。
JavaScriptはいはいコンポーネントのロジックを定義します。「コンポーネントの JavaScript ファイル」を参照してください。
設定はいはいコンポーネントのメタデータ値を定義します。「コンポーネントの設定ファイル」を参照してください。
CSSコンポーネントのスタイル設定を提供します。「コンポーネントの CSS ファイル」を参照してください。
SVGコンポーネントで Lightning アプリケーションビルダーとエクスペリエンスビルダーのカスタムアイコンを使用できるようにします。「コンポーネント SVG アイコン」を参照してください。
テストはいコンポーネントの Jest テストを提供します。「Lightning Web コンポーネント用の Jest テストの記述」を参照してください。

フォルダーとそのファイルは、次の命名規則に従う必要があります。

  • 小文字で始まる
  • 英数字とアンダースコアのみで構成される。
  • 名前空間内で一意である
  • 空白が含まれていない
  • 末尾がアンダースコアではない
  • アンダースコアが 2 つ続けて使用されていない
  • ハイフン (ダッシュ) が使用されていない

force-app/main/default/lwc ルートフォルダー直下に各 Lightning Web コンポーネントを保存します。別のコンポーネントフォルダーでコンポーネントをネストすることはできません。

Lightning Web コンポーネントは、可能な限り Web 標準に準拠しています。HTML 標準では、カスタム要素名にハイフンを含めることが要求されています。

すべての Lightning Web コンポーネントの名前空間は、ハイフンでフォルダー名から分離されています。このため、コンポーネント名は HTML 標準に準拠しています。たとえば、フォルダー名 widget がデフォルトの名前空間 c にある Lightning Web コンポーネントのマークアップは、<c-widget> です。

ただし、Salesforce Platform では、コンポーネントのフォルダー名やファイル名にハイフンの使用は許可されません。では、コンポーネント名が「mycomponent」のように複数の単語でできている場合はどうすればよいでしょうか? フォルダーおよびファイルを my-component と命名することはできませんが、便利な解決策があります。

キャメルケースを使用してコンポーネント名を myComponent にします。キャメルケースのコンポーネントフォルダー名をマークアップのケバブケース (ハイフンで結合された単語) に対応付けます。マークアップでフォルダー名が myComponent のコンポーネントを参照するには、<c-my-component> を使用します。

コンポーネントのフォルダー名にアンダースコアを使用できますが、その名前は、マークアップのケバブケースには対応付けされません。この名前は、名前空間がハイフンで分離されているため有効ですが、ほとんどの場合、Web コンポーネント名では、アンダースコアではなくハイフンが想定されています。たとえば、このコンポーネントのマークアップは、my_component コンポーネントを参照します。これは有効ですが、やや奇妙に見えます。

関連トピック