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

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

エキスパートから直接学べることをご存知でしたか? この動画で、このプロジェクトのトピックについての詳細をご覧ください。

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 を開きます。
macOS で Command+Shift+P、Windows または Linux で Ctrl+Shift+P を押し、「focus terminal」と入力します。Enter キーを押します。
「sfdx force:lightning:component:create -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 ファイルの色が赤に変わり、その横に「2」が表示されています。

エラーが強調された 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 に表示されるエラーに注意し、すぐに修正することです。

今は何も検証できないので、[Verify Step (ステップを確認)] をクリックして次の最後のステップに進み、コードを修正しましょう。