Create a Lightning Web Component

メモ

日本語で受講されている方へ
このバッジの Trailhead ハンズオン Challenge は英語で受講していただく必要があります。英語の意味についてはかっこ内の翻訳をご参照ください。Trailhead Playground では (1) [Locale (地域)] を [United States (米国)] に、[Language (言語)] を [English (英語)] に切り替えて、(2) 英語の値のみをコピーして貼り付けてください。こちらの指示に従ってください。

翻訳版 Trailhead を活用する方法の詳細は、自分の言語の Trailhead バッジを参照してください。

このステップでは、インストールしたツールの使用方法を学習します。

Salesforce DX プロジェクトを作成する

Salesforce CLI を使用した組織を操作するための基盤は Salesforce DX プロジェクトです。プロジェクトは、複数のローカル設定ファイルとリリースするコードで構成されます。Salesforce 用語では、このコードをメタデータと呼んでおり、Salesforce Platform の基盤です。Salesforce を使用し始めたばかりの方は、「プラットフォーム開発者初級」トレイルでメタデータ駆動型アプローチについての詳細を参照してください。

Visual Studio Code を使用してプロジェクトを作成します。

Visual Studio Code を開きます。
macOS で Command+Shift+P、Windows または Linux で Ctrl+Shift+P を押し、create project と入力します。[SFDX: Create Project (SFDX: プロジェクトを作成)] を選択し、Enter キーを押します。
デフォルトのプロジェクト種別選択の [Standard (標準)] はそのままにして、Enter キーを押します
プロジェクト名として「trailhead」と入力し、Enter キーを押します。
プロジェクトを保存するローカルマシンのディレクトリを選択します。[Create Project (プロジェクトを作成)] をクリックします。

お疲れさまでした。Lightning Web コンポーネントを使用するために、最初の Salesforce DX プロジェクトを作成しました。Visual Studio Code で自動的に新しいプロジェクトが開きます。

Dev Hub を承認する

次のステップは、Dev Hub の承認です。Trailhead Playground を使用している場合は、次のステップで使用するログイン情報の取得方法を「Trailhead Playground のユーザー名とパスワードの取得」で学習できます。

Visual Studio Code で、macOS の場合は Command+Shift+P、Windows または Linux の場合は Ctrl+Shift+P を押します。
sfdx と入力します。
[SFDX: Authorize Dev Hub (SFDX: Dev Hub を承認)] を選択します。
Dev Hub 組織のログイン情報を使用してログインします。
[Allow (許可)] をクリックします。
ブラウザーで認証した後、CLI は Dev Hub のログイン情報を記憶します。次のような成功メッセージが表示されます。

Dev Hub の認証は、スクラッチ組織を作成するための前提条件です。スクラッチ組織は、Salesforce Platform での開発用の一時的な環境です。これは次のステップで作成します。

スクラッチ組織を作成する

Visual Studio Code で、macOS の場合は Command+Shift+P、Windows または Linux の場合は Ctrl+Shift+P を押します。
sfdx と入力します。
[SFDX: Create a Default Scratch Org... (SFDX: デフォルトのスクラッチ組織を作成する...)] を選択します。
Enter キーを押して、デフォルトの project-scratch-def.json を受け入れます。
Enter キーを押して、デフォルトの trailhead というスクラッチ組織の別名を受け入れます。
Enter キーを押して、デフォルトの 7 days (7 日間) というスクラッチ組織の期間を受け入れます。

スクラッチ組織が作成されるまでしばらくお待ちください。VS Code の出力パネルに次のような成功メッセージが表示されます。

17:18:11.779 sfdx force:org:create -f

config\project-scratch-def.json --setalias trailhead 

--durationdays 7 --setdefaultusername --json --loglevel fatal ended with exit code 0

最初の Lightning Web コンポーネントを開発する準備が整いました。Salesforce DX についての詳細は、「Salesforce DX を使用したアプリケーション開発」を参照してください。

Lightning Web コンポーネントを作成する

Lightning Web コンポーネントの作成は単純なプロセスです。そのうえ、Salesforce CLI ですでにプロジェクト構造が作成されているので、さらに簡単に作成を開始できます。

フォルダー構造は次のようになっています。

ファイルエクスプローラーに表示された Visual Studio Code 内の Salesforce DX プロジェクト。.sfdx、.vscode、config、force-app のサブディレクトリを含む。

作成したプロジェクトには、force-app/main/default という特別なフォルダーがあります。このフォルダーはパッケージディレクトリと呼ばれ、現在の Salesforce DX プロジェクトのすべてのメタデータが含まれています。Lightning Web コンポーネントもメタデータであるため、lwc というサブフォルダーに保存されます。次のステップでは、Lightning Web コンポーネントをこのフォルダーに追加します。

lwc フォルダーには、.eslintrc と jsconfig.json という 2 つのファイルがあります。これらについては、このプロジェクトで後ほど説明します。

Salesforce DX プロジェクトの作成に使用したように、Lightning Web コンポーネントの作成にも Visual Studio Code を使用できます。(Salesforce CLI を直接使用することもできますが、ここでは Visual Studio Code の組み込みターミナルで使用します。)

Visual Studio Code を開きます。
macOS の場合は Command+Shift+P、Windows または Linux の場合は Ctrl+Shift+P を押します。
focus terminal と入力して、[Terminal: Focus Terminal] を選択します。
[Terminal (ターミナル)] タブ ([Output (出力)] の横) が選択されます。
[Terminal (ターミナル)] タブに、sf lightning generate component -n myFirstWebComponent -d force-app/main/default/lwc --type lwc と入力し、Enter キーを押します。

最初の Lightning Web コンポーネントに必要なファイルが作成されます。

Lightning Web コンポーネントフォルダーが展開されたメタデータディレクトリ構造。

コマンドで使用したパラメーターは次のとおりです。

-n は、Lightning Web コンポーネントフォルダーの名前とファイルを定義します。
-d は、Lightning Web コンポーネントの作成先であるターゲットディレクトリを定義します。ターゲットディレクトリの名前は lwc である必要があります。
--type は、Lightning Web コンポーネントを作成することを示します。

実際にやってみてわかるように、開発プロセスで Salesforce CLI を使用するのは簡単です。代わりに Visual Studio Code を使用したい場合は、lwc フォルダーを右クリックするか、Visual Studio Code でコマンドパレットを開いてください。どちらの方法でも、Salesforce CLI を呼び出す [SFDX: Create Lightning Web Component (SFDX: Lightning Web コンポーネントを作成)] オプションが表示されます。

最初の Lightning Web コンポーネントにコードとメタデータを追加する

ここで、Lightning Web コンポーネントを構成するファイルを見てみましょう。用意されている HTML、JavaScript、XML をコピーして貼り付けます。最初は myFirstWebComponent.js-meta.xml ファイルです。

先ほど lwc サブフォルダーに作成した myFirstWebComponent フォルダーを開きます。
myFirstWebComponent.js-meta.xml をクリックします。

XML ファイルの内容を次の XML マークアップコードで置き換えます。

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
   <apiVersion>51.0</apiVersion>
   <isExposed>true</isExposed>
   <targets>
       <target>lightning__AppPage</target>
       <target>lightning__RecordPage</target>
       <target>lightning__HomePage</target>
   </targets>
</LightningComponentBundle>

macOS で CMD+S、Windows または Linux で CTRL+S を押して、ファイルを保存します。

更新したファイルはメタデータ定義ファイルです。たとえば、Lightning アプリケーションビルダーを使用して Salesforce ユーザーインターフェースのどこに追加できるか (ターゲット) を制御するなど、いくつかの設定要素が含まれています。メタデータ設定オプションについての詳細は、ドキュメントを参照してください。

次は、Lightning Web コンポーネントの JavaScript ファイルを更新します。

これからコピーして貼り付ける JavaScript コードと HTML マークアップにはエラーが含まれています。赤の波線が表示されても気にしないでください。このプロジェクトの後の方で、Visual Studio Code の機能と Salesforce Lightning Web コンポーネント拡張機能を使用して、エラーを解決します。

Visual Studio Code で、myFirstWebComponent.js をクリックします。

ファイルの内容を次のコードに置き換えます。

import { LightningElement } from 'lwc';
export default class MyFirstWebComponent extends LightningElement {
    @track
    contacts = [
        {
            Id: 1,
            Name: 'Amy Taylor',
            Title: 'VP of Engineering',
        },
        {
            Id: 2,
            Name: 'Michael Jones',
            Title: 'VP of Sales',
        },
        {
            Id: 3,
            Name: 'Jennifer Wu',
            Title: 'CEO',
        },
    ];
}

macOS で CMD+S、Windows または Linux で CTRL+S を押して、ファイルを保存します。

ファイルを保存するとすぐに目に付くものがあります。

@track というアノテーション付きの語の下に赤の波線が引かれています。
エクスプローラーの JavaScript ファイルの色が赤に変わります。

設定によっては、表示されるエラーが 1 つの場合もあります。

どちらも JavaScript コードの何かが正しくないことを示しています。優秀な開発者であるあなたは、通常であればすぐに修正することでしょう。

今はこの問題を無視しておきます。代わりに、Web コンポーネントテンプレートファイルに HTML マークアップを追加します。

Visual Studio Code で、myFirstWebComponent.html をクリックします。

既存の <template></template> タグ内に次のマークアップを挿入します。

<lightning-card title="ContactInformation" icon-name="custom:custom14">
   <div class="slds-m-around_medium">
      <template for:each={} for:item="contact">
         <div>
            {contact.Name}, {contact.Title}
         </div>
      </template>
   </div>
</lightning-card>

macOS で CMD+S、Windows または Linux で CTRL+S を押して、ファイルを保存します。

ここでも、HTML マークアップの何かが正しくないことがわかります。

HTML テンプレートファイルが開き、4 行目のエラーが強調されている

これも (今は) 無視しましょう。

通常、次のステップは組織へのプロジェクトのリリースですが、コードに多数のエラーがあるので、リリースは失敗します。あなたが実際にリリースの失敗を経験することがあるかどうかはわかりませんが、重要なのは、IDE に表示されるエラーに注意し、すぐに修正することです。

次の最後のステップでは、コードを修正します。