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

メモ

日本語で受講されている方へ
Challenge は日本語の Trailhead Playground で開始し、かっこ内の翻訳を参照しながら進めていってください。Challenge での評価は英語データを対象に行われるため、英語の値のみをコピーして貼り付けるようにしてください。日本語の組織で Challenge が不合格だった場合は、(1) この手順に従って [Locale (地域)] を [United States (米国)] に切り替え、(2) [Language (言語)] を [English (英語)] に切り替えてから、(3) [Check Challenge (Challenge を確認)] ボタンをクリックしてみることをお勧めします。

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

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

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

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

プロジェクトを作成する手順は、次のとおりです。

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 で自動的に新しいプロジェクトが開きます。

プロジェクト作成成功メッセージが表示されている 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 を承認)] を選択します。
組織の別名として trailheadOrg と入力し、Enter キーを押します。
Dev Hub 組織のログイン情報を使用してログインします。
[Allow (許可)] をクリックします。
ブラウザーで認証した後、CLI は Dev Hub のログイン情報を記憶します。次のような成功メッセージが表示されます。

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

ローカル開発を有効にする

スクラッチ組織を作成する前に、プロジェクトの JSON 設定ファイルでローカル開発を有効にします。次の手順を実行します。

SFDX プロジェクトで、config/project-scratch-def.json ファイルを開きます。
ファイルの lightningExperienceSettings セクションに "enableLightningPreviewPref" キーを追加し、true に設定します。
ファイルを保存します。

コードは次のようにネストされます。

{
  "orgName": "My Company",
  "edition": "Developer",
  "features": ["EnableSetPasswordInApi"],
  "settings": {
    "lightningExperienceSettings": {
      "enableS1DesktopEnabled": true,
      "enableLightningPreviewPref": true
    },
    "mobileSettings": {
      "enableS1EncryptedStoragePref2": false
    }
  }
}

Sandbox 組織のローカル開発を有効にするプロセスは異なります。[Setup (設定)] でいくつかの設定が必要です。それについてはこちらで学習できます。

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

Visual Studio Code で、macOS の場合は Command+Shift+P、Windows または Linux の場合は Ctrl+Shift+P を押し、focus terminal と入力し、[Terminal: Focus Terminal] を選択します。
ターミナルで、sf org create scratch --definition-file config/project-scratch-def.json --alias scratchOrg --target-dev-hub trailheadOrg と入力し、Enter キーを押します。
この CLI コマンドは、project-scratch-def.json ファイルと別名 scratchOrg を使用してスクラッチ組織を作成します。スクラッチ組織が作成されるまでしばらくお待ちください。スクラッチ組織が正常に作成されるとターミナルに次の出力が表示されます。

最初の 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 を開きます。
Visual Studio Code で、macOS の場合は Command+Shift+P、Windows または Linux の場合は Ctrl+Shift+P を押し、focus terminal と入力し、[Terminal: Focus Terminal] を選択します。
[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 コンポーネントを作成することを示します。

最初の 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>
   <targetConfigs>
       <targetConfig targets="lightning__AppPage">
           <supportedFormFactors>
               <supportedFormFactor type="Small" />
               <supportedFormFactor type="Large" />
           </supportedFormFactors>
       </targetConfig>
       <targetConfig targets="lightning__RecordPage">
           <supportedFormFactors>
               <supportedFormFactor type="Small" />
               <supportedFormFactor type="Large" />
           </supportedFormFactors>
       </targetConfig>
       <targetConfig targets="lightning__HomePage">
           <supportedFormFactors>
               <supportedFormFactor type="Small" />
               <supportedFormFactor type="Large" />
           </supportedFormFactors>
       </targetConfig>
   </targetConfigs>
</LightningComponentBundle>

macOS の場合は Command + 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 の場合は Command + S、Windows または Linux の場合は Ctrl + S を押して、ファイルを保存します。

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

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

エラーが強調された 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 の場合は Command + S、Windows または Linux の場合は Ctrl + S を押して、ファイルを保存します。

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

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

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

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

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

予想時間

トピック

ヘルプをお探しですか?

Salesforce Platform のリソース

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

メモ

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

Dev Hub を承認する

ローカル開発を有効にする

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

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

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

ステップを確認