コーディングの開始

最初の Lightning Web コンポーネントをコーディングする最速の方法はライブコード環境を使用することです。

簡単なコンポーネントから始めるには、LWC.studio や StackBlitz を使用することをお勧めします。Salesforce DX ツールを使用して LWC コードを組織に転送するという方法もあります。

StackBlitz と LWC.studio はサードパーティ製品であり、各社の独自の利用規約が適用されます。Salesforce は、それらのサードパーティサイトで提供されるコンテンツ、サービス、有料オプションなどについて責任を負わないものとします。それらの Web サイトやプラットフォームの利用は、お客様自身の責任で行うものとし、サードパーティの利用規約やプライバシーポリシーなど、該当する追加規約が適用されるものとします。

また、基本コンポーネントに特化した実際のサンプルも studio.webcomponents.dev/workspace/lwc や Component Reference で公開されています。

LWC.studio のサードパーティ IDE を使用して、「Hello World」Lightning Web コンポーネントを作成してみましょう。

  1. ブラウザで app.lwc.studio にアクセスします。GitHub アカウントにサインインします。

  2. サインイン後に、[+New (+新規)] ボタンをクリックします。

  3. src フォルダの横に表示される [New File (新規ファイル)] アイコンをクリックしてファイルを作成し、「helloWorld.html」という名前を付けます。次のコードをコードエディタにコピーします。

  4. ファイルを作成し、helloWorld.js という名前を付けます。次のコードをコードエディタにコピーします。

  5. 作成したコンポーネントを表示するには、app.html ファイルの最後の </div> 閉じタグの前にコンポーネントを追加します。

    キャメルケースのコンポーネント名 (helloWorld) は、HTML ではケバブケース (hello-world) に変換されます。デフォルトの名前空間は c ですので、完全名コンポーネント HTML タグは <c-hello-world> になります。コンポーネントには終了タグも必要ですので注意してください。独自のコンポーネントを参照するには、コーディング時に必ずデフォルトの名前空間 c を使用してください。コードの実行場所にかかわらず、つまり、名前空間がある組織、名前空間がない組織、管理パッケージ、未管理パッケージにかかわらず、c を使用します。

  6. すべての変更を保存するには、コードエディタの右上にある [保存] アイコンをクリックします。ストーリーパネルが更新され、**「Hello, World!」**テキストが表示されます。

  7. さらに一歩進んで、c-hello-world コンポーネントに公開プロパティを追加しましょう。helloWorld.js 内で、api をインポートし、それを使用して firstName 項目をデコレートします。

  8. c-hello-world は公開プロパティを公開するため、c-hello-world を消費するコンポーネントはそのプロパティを設定できます。この例では、app コンポーネントでプロパティ firstName を設定します。

    app.html で、first-name 属性を <c-hello-world> タグに追加します。キャメルケースの JavaScript のプロパティ firstName は、HTML ではケバブケース first-name に変換されます。

  9. これでコンポーネントは再利用可能になりました。たとえば、複数の c-hello-world コンポーネントを app.html に追加して、それぞれに異なる値を設定できます。

コーディングを続けるには、「テンプレートでのデータバインド」に移動してください。大いに楽しんでください。

関連トピック