Right click to open menu
[デブサミ2019] Salesforce ハンズオンセッション(14-F-5: Salesforceプログラミング - Web Componentsをベースにしたアプリの開発手順 -) ハンズオン手順

Menu bar

Quick Actions

Ribbon

Insert:
Error: Internet connection appears to be offline (0)

Outline

[デブサミ2019] Salesforce ハンズオンセッション(14-F-5: Salesforceプログラミング - Web Componentsをベースにしたアプリの開発手順 -) ハンズオン手順Link to heading
はじめにLink to heading
全体の流れLink to heading
STEP1: Web サイトで試せる Playground で “Hello World”Link to heading
STEP2: Github からのサンプルコード取得から、開発用組織(スクラッチ組織)へのデプロイ・動作確認までLink to heading
STEP3: コマンドと Visual Studio Code を使って Lightning Web Component を新規作成Link to heading
STEP4: デコレーターによる振る舞いの定義Link to heading
STEP5: Salesforce のデータを扱うLink to heading
STEP6: Apex クラスのメソッド(サーバー側プログラム)の作成と呼び出しLink to heading
STEP7: その他応用編Link to heading
参考リンク集Link to heading
公式ドキュメント・PlaygroundLink to heading
TrailheadLink to heading

Document

[デブサミ2019] Salesforce ハンズオンセッション(14-F-5: Salesforceプログラミング
- Web Componentsをベースにしたアプリの開発手順 -
) ハンズオン手順
はじめに
このページは、ハンズオンを進めていただく手順やサンプルコードを記述したものです。事前のメールにてご案内している通り、次の事前準備が終わっていることを前提にして進めていきますので、よろしくお願いいたします。

↓事前準備のページはこちら
[DevSumit 2019] Salesforce ハンズオンセッション(14-F-5: Salesforceプログラミング - Web Componentsをベースにしたアプリの開発手順 -) 事前準備
全体の流れ
  • STEP1: Web サイトで試せる Playground で “Hello World”
  • STEP2: Github からのサンプルコード取得から、開発用組織(スクラッチ組織)へのデプロイ・動作確認まで
  • STEP3: コマンドと Visual Studio Code を使って Lightning Web Component を新規作成
  • STEP4: デコレーターによる振る舞いの定義
  • STEP5: Salesforce のデータを扱う
  • STEP6: Apex クラスのメソッド(サーバー側プログラム)の作成と呼び出し
  • STEP7: その他応用編
Horizontal Rule

STEP1: Web サイトで試せる Playground で “Hello World”
今回 Lightning Web Components では、Web 標準との親和性を活かして、Web サイトでサンプルコンポーネントを作成・表示・動作を確認できる Playground を用意しています。まずは、この Playground を使ってコンポーネントの構成を理解します。

1-1. 次の URL リンクをクリックし、 Web ブラウザで表示します
https://developer.salesforce.com/docs/component-library/tools/playground

1-2. 画面の構成を覚えます
devsumi2019_lwc-handson_素材集 (2).png

1-3. 画面右上「+ New」のボタンをクリックします(Project が保存されていない旨のダイアログが出てきたら「OK」ボタンをクリックします)

1-4. 画面左メニューから”app.js”をクリックし、画面真ん中のペインのタイトル表示が”Editable Code: app.js”となっていることを確認し、次のコードをコピー&ペーストします
import { LightningElement } from 'lwc';

export default class Hello extends LightningElement {
    greeting = 'World';
}
1-5. 同様に、画面左メニューから”app.html”をクリックし、画面真ん中のペインのタイトル表示が”Editable Code: app.html”となっていることを確認し、次のコードをコピー&ペーストします
<template>
    <lightning-card title="Hello" icon-name="custom:custom14">
        <div class="slds-m-around_medium">
            Hello, {greeting}!
        </div>
    </lightning-card>
</template>
1-6. 画面右側のペイン(Outputと表示されている)のタブ”Preview”で動作を確認します
image.png
このように表示されれば完成です。違うコードでも試してみましょう。app.js、app.html を次のソースコードで置き換えてみます。

app.js
import { LightningElement, track } from 'lwc';

export default class HelloBinding extends LightningElement {
    @track greeting = 'World';

    handleChange(event) {
        this.greeting = event.target.value;
    }
}
app.html
<template>
    <lightning-card title="HelloBinding" icon-name="custom:custom14">
        <div class="slds-m-around_medium">
            <p>Hello, {greeting}!</p>
            <lightning-input
                label="Name"
                value={greeting}
                onchange={handleChange}
            ></lightning-input>
        </div>
    </lightning-card>
</template>
image.png
このように表示されれば成功です。画面右側 Output の領域に表示された Name とラベルのついたテキストボックスの中の”World”文字列を違うものに変えてみてください。”Hello, World!”と表示されている文字列が変化することを確認できます。
Horizontal Rule

STEP2: Github からのサンプルコード取得から、開発用組織(スクラッチ組織)へのデプロイ・動作確認まで
ここからは、Salesforce CLI を利用して、ソースコードベースの Salesforce 開発を体験していただきます。まずは流れをご理解いただくために、サンプルの組織設定・コードを Github のレポジトリからダウンロードして、開発で使うスクラッチ組織にデプロイするまでの操作を行います。
devsumi_14-F-5_ハンズオン説明資料.png
コマンドラインで操作していきますので、Mac の方はターミナルか iTerm などを、Windows の方はコマンドプロンプトを起動してください。

2-1. 作業用のフォルダを作成し、Github からコードをダウンロードします
mkdir devsumi2019
cd devsumi2019
git clone https://github.com/hinabasfdc/build-apps-with-lwc.git
cd build-apps-with-lwc

2-2. Salesforce CLI で Dev Hub 組織にログインします
sfdx force:auth:web:login -d -a mydevhuborg

(ブラウザが開きログイン画面が表示されます)
事前準備に従い取得した Salesforce 組織のユーザーアカウント/パスワードでログインします
初回ログインの場合にはアクセス許可を促す画面が表示されるので、OKボタンをクリックします)
ブラウザの画面は Salesforce 組織にログインした状態に変わります
ターミナル/コマンドプロンプトに、次のような表示がされたら成功です

Successfully authorized [[ユーザーアカウント]] with org ID [[00Dから始まる18桁の文字列]]
You may now close the browser

2-3. スクラッチ組織を作成します
sfdx force:org:create -s -f config/project-scratch-def.json -a devsumi2019

ターミナル/コマンドプロンプトに、次のような表示がされたら成功です

Successfully created scratch org: [[00Dから始まる18桁の文字列]], username: test-[[ランダム文字列]].com
2-4. 作成したスクラッチ組織を開いてみます
sfdx force:org:open

ブラウザが開き自動でログインした画面に遷移されれば成功です
2-5. スクラッチ組織にソースコードをプッシュします
(コマンドプロンプト/ターミナルで操作)
sfdx force:source:push

ターミナル/コマンドプロンプトに、次のような表示がされたら成功です

=== Pushed Source
STATE  FULL NAME                   TYPE                      PROJECT PATH
─────  ──────────────────────────  ────────────────────────  ────────────────────────────────────────────────────────────────────────────────────────────
Add    Ursus_Park                  CustomApplication         force-app/main/default/applications/Ursus_Park.app-meta.xml
Add    BearController              ApexClass                 force-app/main/default/classes/BearController.cls
Add    BearController              ApexClass                 force-app/main/default/classes/BearController.cls-meta.xml
〜以下略〜
2-6. スクラッチ組織のログインユーザーに対して各種アクセス権限を設定します
sfdx force:user:permset:assign -n Ursus_Park_User

ターミナル/コマンドプロンプトに、次のような表示がされたら成功です

=== Permsets Assigned
USERNAME                       PERMISSION SET ASSIGNMENT
─────────────────────────────  ─────────────────────────
test-[[ランダム文字列]].com       Ursus_Park_User
2-7. スクラッチ組織にデータをアップロードします
sfdx force:data:tree:import -p data/plan.json

ターミナル/コマンドプロンプトに、次のような表示がされたら成功です

=== Import Results
REFERENCE ID  TYPE     ID
────────────  ───────  ──────────────────
ContactRef1   Contact  003p000000WmxjGAAR
ContactRef2   Contact  003p000000WmxjHAAR
ContactRef3   Contact  003p000000WmxjIAAR
Bear__cRef1   Bear__c  a00p0000007rKAYAA2
Bear__cRef2   Bear__c  a00p0000007rKAZAA2
〜以下略〜
2-8. ブラウザでスクラッチ組織を表示し再読み込みし、Lightning Web Component を配置する画面へ移動します
すでにブラウザで開いている Salesforce 組織のページに移動します
画面を再読み込みします
Salesforce の画面左上にあるアプリケーションランチャーアイコン(3x3の9個の点の画像)をクリックします
「Ursus Park」をクリックします
"Home"画面が表示されます
image.png
2-9. Lightning Web Component を画面に配置します
画面右上のギアのアイコンをクリックします
「Edit Page」をクリックします
画面左側やや下にスクロールしたところに"helloBinding"とありますので、下図のようにドラッグ&ドロップで配置します
画面右上の「Save」ボタンをクリックします
有効化の確認ダイアログが表示されるので、「Activate」ボタンをクリックします
「Assign as Org Default」ボタンをクリックします
次の確認画面では何も変更せずに「Save」ボタンをクリックします
画面右上「← Back」ボタンをクリックします
devsumi2019_lwc-handson_素材集 (1).png
2-10. Lightning Web Component の動作を確認します
配置した HelloBinding コンポーネントのテキストボックス内の文字列を変更します
変更した文字列に合わせて、"Hello World!"の記述が変化すれば成功です
image.png
以上が、スクラッチ組織の作成から始まるソースコードのデプロイ、Lightning Web Components を画面に配置するまでの一通りの流れになります。
Horizontal Rule

STEP3: コマンドと Visual Studio Code を使って Lightning Web Component を新規作成
この STEP では、先ほど作成したスクラッチ組織へ、自作の Lightning Web Component を配置するまでの流れを体験していただきます。

3-1. Visual Studio Code を起動し、先ほど Git クローンしたフォルダをワークスペースに追加します
ファイル > 開く > "build-apps-with-lwc"を選択状態にして「開く」ボタンをクリック
image.png
※注意※
  • 開くフォルダの指定がずれる、また既存のワークスペースに追加した場合などで、この後の右クリックでのコマンド操作がうまく動かない場合があるようです。一度開いているフォルダーを閉じていただいて何もない状態から、再度該当フォルダーを読み込んでいただくとうまくいくことが多いです
3-2. Lightning Web Component の雛形を作成します
左ペインのファイル・フォルダ構成から、”force-app/main/default/lwc”を探し”lwc”上で右クリック
出現したメニューの一番下「SFDX: Create Lightning Web Component」をクリック
画面中央上に出現したダイアログに"helloForEach"と入力します
image.png
3-3. 作成された3つのファイルそれぞれに、次のコードをコピーし、全体を置き換えます。

helloForEach.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
  <apiVersion>45.0</apiVersion>
  <isExposed>true</isExposed>
  <targets>
    <target>lightning__AppPage</target>
    <target>lightning__RecordPage</target>
    <target>lightning__HomePage</target>
  </targets>
</LightningComponentBundle>
helloForEach.js
import { LightningElement } from 'lwc';

export default class HelloForEach extends LightningElement {
  contacts = [
    {
      Id: '003171931112854375',
      Name: 'Amy Taylor',
      Title: 'VP of Engineering'
    },
    {
      Id: '003192301009134555',
      Name: 'Michael Jones',
      Title: 'VP of Sales'
    },
    {
      Id: '003848991274589432',
      Name: 'Jennifer Wu',
      Title: 'CEO'
    }
  ];
}
helloForEach.html
<template>
  <lightning-card title="HelloForEach" icon-name="custom:custom14">
    <ul class="slds-m-around_medium">
      <template for:each={contacts} for:item="contact">
        <li key={contact.Id}>
          {contact.Name}, {contact.Title}
        </li>
      </template>
    </ul>
  </lightning-card>
</template>
3-4. 作成した3つのファイルをスクラッチ組織にプッシュします
sfdx force:source:push

ターミナル/コマンドプロンプトに、次のような表示がされたら成功です

=== Pushed Source
STATE FULL NAME TYPE PROJECT PATH
───── ────────────────────────────── ──────────────────────── ────────────────────────────────────────────────────────────────
Add helloForEach/helloForEach.html LightningComponentBundle force-app/main/default/lwc/helloForEach/helloForEach.html
Add helloForEach/helloForEach.js LightningComponentBundle force-app/main/default/lwc/helloForEach/helloForEach.js
Add helloForEach/helloForEach.js LightningComponentBundle force-app/main/default/lwc/helloForEach/helloForEach.js-meta.xml
3-5. スクラッチ組織で Lightning Web Component を配置し、動作を確認します
手順 2-9. を参考に、"helloForEach"を画面に配置します
(先ほど配置した helloBinding の下あたりが良いでしょう)
次の図のように表示されたら成功です
image.png
Horizontal Rule

STEP4: デコレーターによる振る舞いの定義
ここからは、Lightning Web Components の特徴的な動作を体験していただけるようなコンポーネントを作成していきます。Lightning Web Components では”デコレーター(装飾詞)”を使って変数や関数の振る舞いを定義することができます。
devsumi_14-F-5_ハンズオン説明資料 (1).png
https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.reference_decorators

4-1. Visual Studio Code で、Lightning Web Component の雛形を作成します
左ペインのファイル・フォルダ構成から、”force-app/main/default/lwc”を探し”lwc”上で右クリック
出現したメニューの一番下「SFDX: Create Lightning Web Component」をクリック
画面中央上に出現したダイアログに"todoSimple"と入力します
4-2. 作成された3つのファイルそれぞれに、次のコードをコピーし、全体を置き換えます。

todoSimple.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="todoSimple">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>ToDo(基礎)</masterLabel>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>
todoSimple.js
import { LightningElement, track } from 'lwc';

export default class TodoSimple extends LightningElement {
    @track todos = [];
    newTodo = {description: ''};
    
    changedInput(event){
        const field = event.target.name;
        this.newTodo[field] = event.target.value;
    }
    clickedCreate(){
        const todo = Object.assign({
            id: Math.random().toString(36).slice(-8)
        }, this.newTodo);
        this.todos.push(todo);
    }
    clickedDelete(event){
        const targetId = event.target.dataset.id;
        const todos = this.todos.filter(todo => todo.id !== targetId);
        this.todos = todos;
    }
}
todoSimple.html
<template>
    <lightning-card  title="(基礎)">
        
        <!-- ToDo作成 -->
        <div class="slds-p-around_medium">
            <h3 class="slds-text-heading_small">ToDoの作成</h3>
            <lightning-input type="text" label="内容" name="description" onchange={changedInput} class="slds-p-vertical_small"></lightning-input>
            <lightning-button variant="brand" label="作成" onclick={clickedCreate} class="slds-p-vertical_small"></lightning-button>
        </div>
        <!-- /ToDo作成 -->

        <!-- ToDo一覧 -->
        <div class="slds-p-around_medium">
            <h3 class="slds-text-heading_small">ToDo一覧</h3>
            <div class="todo-item-wrapper" key={todo.id} for:each={todos} for:item="todo">
                <div class="description">{todo.description}</div>
                <div class="action">
                    <lightning-button-icon variant="base" icon-name="utility:delete" data-id={todo.id} onclick={clickedDelete} class="slds-m-left_xx-small"></lightning-button-icon>
                </div>
            </div>
        </div>
        <!-- /ToDo一覧 -->

    </lightning-card>
</template>
4-3. 作成した3つのファイルをスクラッチ組織にプッシュします
sfdx force:source:push

ターミナル/コマンドプロンプトに、次のような表示がされたら成功です

=== Pushed Source
STATE  FULL NAME                   TYPE                      PROJECT PATH
─────  ──────────────────────────  ────────────────────────  ────────────────────────────────────────────────────────────
Add    todoSimple/todoSimple.html  LightningComponentBundle  force-app/main/default/lwc/todoSimple/todoSimple.html
Add    todoSimple/todoSimple.js    LightningComponentBundle  force-app/main/default/lwc/todoSimple/todoSimple.js
Add    todoSimple/todoSimple.js    LightningComponentBundle  force-app/main/default/lwc/todoSimple/todoSimple.js-meta.xml
4-4. スクラッチ組織で作成した Lightning Web Component を確認します
手順 2-9. を参考に、"ToDo(基礎)"を画面に配置します
(先ほど配置した helloBinding や helloForEach を置き換えてしまって良いでしょう)
次の図のように表示されたら成功です
image.png
Horizontal Rule

STEP5: Salesforce のデータを扱う
Lightning Web Components には、Salesforce に格納してあるデータを簡単に扱うための機能が用意されいて、例えばデータベースからデータを抽出したり、データを書き込むための機能自体をコーディングして開発する必要はありません。ここでは、あらかじめ用意されているデータへのアクセス機能を使ってデータの読み出しを行う Lightning Web Component を作成します。
devsumi_14-F-5_ハンズオン説明資料 (2).png
5-1. Visual Studio Code で、Lightning Web Components の雛形を作成します
左ペインのファイル・フォルダ構成から、”force-app/main/default/lwc”を探し”lwc”上で右クリック
出現したメニューの一番下「SFDX: Create Lightning Web Component」をクリック
画面中央上に出現したダイアログに"recordViewFormDynamicContact"と入力します
5-2. 作成された3つのファイルそれぞれに、次のコードをコピーし、全体を置き換えます。

recordViewFormDynamicContact.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <objects>
                <object>Contact</object>
            </objects>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>
recordViewFormDynamicContact.js
import { LightningElement, api } from 'lwc';

export default class RecordViewFormDynamicContact extends LightningElement {
    // Flexipage provides recordId and objectApiName
    @api recordId;
    @api objectApiName;
}
recordViewFormDynamicContact.html
<template>
    <lightning-card
        title="RecordViewFormDynamicContact"
        icon-name="standard:contact"
    >
        <div class="slds-m-around_medium">
            <lightning-record-view-form
                object-api-name={objectApiName}
                record-id={recordId}
            >
                <lightning-output-field
                    field-name="Name"
                ></lightning-output-field>
                <lightning-output-field
                    field-name="Title"
                ></lightning-output-field>
                <lightning-output-field
                    field-name="Phone"
                ></lightning-output-field>
                <lightning-output-field
                    field-name="Email"
                ></lightning-output-field>
            </lightning-record-view-form>
        </div>
    </lightning-card>
</template>
5-3. 作成した3つのファイルをスクラッチ組織にプッシュします
sfdx force:source:push

ターミナル/コマンドプロンプトに、次のような表示がされたら成功です

=== Pushed Source
STATE FULL NAME TYPE PROJECT PATH
───── ────────────────────────────────────────────────────────────── ──────────────────────── ────────────────────────────────────────────────────────────────────────────────────────────────
Add recordViewFormDynamicContact/recordViewFormDynamicContact.html LightningComponentBundle force-app/main/default/lwc/recordViewFormDynamicContact/recordViewFormDynamicContact.html
Add recordViewFormDynamicContact/recordViewFormDynamicContact.js LightningComponentBundle force-app/main/default/lwc/recordViewFormDynamicContact/recordViewFormDynamicContact.js
Add recordViewFormDynamicContact/recordViewFormDynamicContact.js LightningComponentBundle force-app/main/default/lwc/recordViewFormDynamicContact/recordViewFormDynamicContact.js-meta.xml
5-4. スクラッチ組織で作成した Lightning Web Components を確認します
※※注意※※今までとは違い、メニューの"Contacts"タブから"Smith Joe"をクリックした画面に、
作成した Lightning Web Component "recordViewFormDynamicContact" を配置します
Activate や Assign も今まで同様に処理し、次のように表示されたら成功です
image.png
Horizontal Rule

STEP6: Apex クラスのメソッド(サーバー側プログラム)の作成と呼び出し
Salesforce はサーバー側で処理プログラムを実装し、Lightning Web Components から呼び出して使うこともできます。この STEP では、簡単なサーバー処理プログラムの作成も含めた手順を体験していただきます。
devsumi_14-F-5_ハンズオン説明資料 (3).png
6-1. Visual Studio Code で、Apex クラスの雛形を作成します
左ペインのファイル・フォルダ構成から、”force-app/main/default/classes”を探し”classes”上で右クリック
出現したメニューの「SFDX: Create Apex Class」をクリック
画面中央上に出現したダイアログに"todoWithSObjectController"と入力します
image.png
6-2. 作成された2つのファイルのうち、”todoWithSObjectController.cls”に次のコードをコピーし、全体を置き換えます。

todoWithSObjectController.cls
public with sharing class todoWithSObjectController {
    
    @AuraEnabled(cacheable=true)
    public static List<Task> getTasks(){
        List<Task> tasks = [SELECT Id, Subject, Description FROM Task];
        return tasks;
    }

    @AuraEnabled
    public static String insertTask(String subject, String description){
        try {
            Task task = new Task(
                Subject = subject,
                Description = description
                );
            insert task;
            return task.Id;
        } catch (Exception ex){
            return null;
        }
    }

    @AuraEnabled
    public static String removeTask(String taskId){
        try {
            Task task = [SELECT Id FROM Task WHERE Id = :taskId LIMIT 1];
            delete task;
            return 'success';
        } catch (Exception ex){
            return null;
        }
    }
}
todoWithSObjectController.cls-meta.xml は変更ありません

6-3. Visual Studio Code で、Lightning Web Components の雛形を作成します
左ペインのファイル・フォルダ構成から、”force-app/main/default/lwc”を探し”lwc”上で右クリック
出現したメニューの一番下「SFDX: Create Lightning Web Component」をクリック
画面中央上に出現したダイアログに"todoWithSObject"と入力します
6-4. 作成された3つのファイルそれぞれに、次のコードをコピーし、全体を置き換えます。

todoWithSObject.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="todoWithSObject">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>ToDo(Salesforce連携)</masterLabel>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>
todoWithSObject.js
import { LightningElement, wire } from 'lwc';
import getTasks from '@salesforce/apex/todoWithSObjectController.getTasks';
import insertTask from '@salesforce/apex/todoWithSObjectController.insertTask';
import removeTask from '@salesforce/apex/todoWithSObjectController.removeTask';
import { refreshApex } from '@salesforce/apex';

export default class TodoWithSObject extends LightningElement {
    @wire(getTasks) todos;
    newTodo = {subject: '', description: ''};
    
    changedInput(event){
        const field = event.target.name;
        this.newTodo[field] = event.target.value;
    }
    clickedCreate(){
        const todo = this.newTodo;
        insertTask(todo).then(() => {
            return refreshApex(this.todos);
        });
    }
    clickedDelete(event){
        const taskId = event.target.dataset.id;
        removeTask({taskId: taskId}).then(() => {
            return refreshApex(this.todos);
        });
    }

}
todoWithSObject.html
<template>
    <lightning-card title="(Salesforce連携)">
        
        <!-- ToDo作成 -->
        <div class="slds-p-around_medium">
            <h3>ToDoの作成</h3>
            <lightning-input type="text" label="タイトル" name="subject" onchange={changedInput} class="slds-p-vertical_small"></lightning-input>
            <lightning-input type="text" label="内容" name="description" onchange={changedInput} class="slds-p-vertical_small"></lightning-input>
            <lightning-button variant="brand" label="作成" onclick={clickedCreate} class="slds-p-vertical_small"></lightning-button>
        </div>
        <!-- /ToDo作成 -->

        <!-- ToDo一覧 -->
        <div class="slds-p-around_medium">
            <h3>ToDo一覧</h3>
            <template if:true={todos.data}>
                <div class="todo-item-wrapper" key={todo.Id} for:each={todos.data} for:item="todo">
                    <div class="description">{todo.Subject} - {todo.Description}</div>
                    <div class="action">
                        <lightning-button-icon variant="base" icon-name="utility:delete" data-id={todo.Id} onclick={clickedDelete} class="slds-m-left_xx-small"></lightning-button-icon>
                    </div>
                </div>
            </template>
        </div>
        <!-- /ToDo一覧 -->

    </lightning-card>
</template>
6-5. css ファイルを作成します
左ペインのファイル・フォルダ構成から、”force-app/main/default/lwc/todoWithSObject”を探し”todoWithSObject”上で右クリック
「新しいファイル」をクリックし、"todoWithSObject.css"と入力
次のコードをコピーし貼り付け
todoWithSObject.css
.todo-item-wrapper {
    display: list-item;
    margin: 8px 32px;
}

.todo-item-wrapper .description {
    display: inline-block;
    font-size: 1rem;
}

.todo-item-wrapper .action {
    display: inline-block;
}
image.png
6-5. 作成した3つのファイルをスクラッチ組織にプッシュします
sfdx force:source:push

ターミナル/コマンドプロンプトに、次のような表示がされたら成功です

=== Pushed Source
STATE  FULL NAME                             TYPE                      PROJECT PATH
─────  ────────────────────────────────────  ────────────────────────  ──────────────────────────────────────────────────────────────────────
Add    todoWithSObjectController             ApexClass                 force-app/main/default/classes/todoWithSObjectController.cls
Add    todoWithSObjectController             ApexClass                 force-app/main/default/classes/todoWithSObjectController.cls-meta.xml
Add    todoWithSObject/todoWithSObject.css   LightningComponentBundle  force-app/main/default/lwc/todoWithSObject/todoWithSObject.css
Add    todoWithSObject/todoWithSObject.html  LightningComponentBundle  force-app/main/default/lwc/todoWithSObject/todoWithSObject.html
Add    todoWithSObject/todoWithSObject.js    LightningComponentBundle  force-app/main/default/lwc/todoWithSObject/todoWithSObject.js
Add    todoWithSObject/todoWithSObject.js    LightningComponentBundle  force-app/main/default/lwc/todoWithSObject/todoWithSObject.js-meta.xml
6-6. スクラッチ組織で作成した Lightning Web Components を確認します
手順 2-9. を参考に、"ToDo(Salesforce連携)"を Home 画面に配置します
次の図のように表示されたら成功です
何かタイトル・内容を入力して「作成」ボタンをクリックしてください
image.png
6-7. Salesforce の”Task”としてデータが登録されたことを確認します
Salesforce の画面左上にあるアプリケーションランチャーアイコン(3x3の9個の点の画像)をクリックします
やや下の「Tasks」をクリックします
下図のように Lightning Web Component で入力した内容でデータが作成されていれば成功です
image.png
image.png
Horizontal Rule

STEP7: その他応用編
おつかれさまでした!ここまでのハンズオンで、Lightning Web Components の基本的な使い方を体験していただきました。早く終わられた方は、次のサンプルをチャレンジするに十分な基礎知識を得られてますので、ぜひ試してみてください。様々な実装パターンのソースコードを見ることができますので、これからの開発・実装の参考になると思います。
  • lwc-recipes
  • https://github.com/trailheadapps/lwc-recipes
  • pure-aloe
  • https://github.com/trailheadapps/purealoe-lwc
  • dreamhouse-lwc
  • https://github.com/dreamhouseapp/dreamhouse-lwc
Horizontal Rule

参考リンク集
公式ドキュメント・Playground
  • Lightning Web Components Dev Guide
  • https://developer.salesforce.com/docs/component-library/documentation/lwc
Trailhead
  • トレイル
  • Build Lightning Web Components
  • Develop reusable Lightning web components using JavaScript and HTML.
  • https://trailhead.salesforce.com/ja/content/learn/trails/build-lightning-web-components
  • Lightning Web Components Basics
  • Quick Start: Lightning Web Components 
  • Set Up Your Lightning Web Components Developer Tools
  • Lightning Web Components for Aura Developers
  • Build a Bear-Tracking App with Lightning Web Components
以上