コンポーネントフォルダ

コンポーネントを作成するには、最初に、コンポーネントのファイルをバンドルするフォルダを作成します。

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

1myComponent
2   ├──myComponent.html
3   ├──myComponent.js
4   ├──myComponent.js-meta.xml
5   ├──myComponent.css
6   └──myComponent.svg

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

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

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

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

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

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

1<!-- parent.html -->
2<template>
3  <c-my-component></c-my-component>
4</template>

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

1<!-- parent.html -->
2<template>
3  <c-my_component></c-my_component>
4</template>

関連トピック

コンポーネントの名前空間

The Japanese Summer '24 guide is now live

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