Salesforce 開発者の JavaScript スキル(9)

Prepare for your Salesforce JavaScript Developer I Credential Trailmix の続き

trailhead.salesforce.com

また来たよ英語回

Get Started with Lightning Development

Lightning 開発を始めよう

Get Started with Lightning Development 単元 | Salesforce Trailhead

VF 使いのためのLightning入門記事ですね。
VF は 2006 年以前に、エンタープライズ・ソリューションとして作成され、サーバサイド動作として作られた。
2006 年以降、インタラクティブ、動的、レスポンシブなデザインに切り替わってきていて、Salesforce としては Lightning Experience として Lightning component フレームワークを作成した。

コンポーネントあはSalesforce内で再利用可能
アプリケーション機能を容易に拡張できる
AppExchange からカスタムコンポーネントをDLして開発できる
モバイル機器に最適化したレスポンシブデザインの開発を開発者に提供する
ベースコンポーネントは非常に多くの機器で動作する

あと、Low-Code と Pro-Code でカテゴリ分けてる。

Low-Code : クリックベースで開発できるやつ（フローとか、クイックアクション、URLボタンなど）
Pro-Code : プログラミングして開発するやつ

Learn How Coding Concepts Apply to Lightning Web Components

LWC ではどのような開発コンセプトが適用されているか学習する

Learn How Coding Concepts Apply to Lightning Web Components 単元 |

f:id:white-azalea:20211124221424p:plain

まぁ見たままだよね。
サーバサイドではデータの管理だけしてて、HTML 表示などは全てクライアントで行う。
OSS の世界で言うなら、 MVVM といったところ。

Tracking State with Properties : プロパティの更新をトラッキングする。
OSS で開発してる人なら「変数バインド」といえばいいか。VF 使いなら {! 変数 } が {変数} になるといえばわかるはず。
Tracking State with Getters and Setters : Getter/Setter の状態をトラッキングする。
実質変数に近い扱いでバインドできる。

    get hoge() { return this._hoge; }
    set hoge(v) { this._hoge = v; }

    <template>{hoge}</template>

Conditional Rendering : 状態に合わせたレンダリング(If 条件)

<template>
    <template if:true={areDetailsVisible}>
        These are the details!
    </template>
</template>

Rendering Lists : リストのレンダリング（イテレート）

<template>
    <template for:each={contacts} for:item="contact">
        <p key={contact.Id}>
            {contact.Name}
        </p>
    </template>
</template>

イベントハンドリング

<template>
    <a onclick={handleButtonClick}></a>
</template>

    handleButtonClick(e) {
        window.console.log(e); // イベントの表示
    }

標準コンポーネントとかここ見るといいかも

問題の傾向
* LWC は何をきっかけに再レンダリングされる？→プロパティ変更を参照して * コンポーネントは親コンポーネントにどうやって情報を送る？→イベントだよね

Handle User Actions in JavaScript

ユーザ操作のハンドリング

Handle User Actions in JavaScript 単元 | Salesforce Trailhead

といってもイベントで拾う。
これで実質以上ではなかろうか…

        <lightning-input
            type="number"
            label="Number of Employees"
            value={numberOfEmployees}
            onchange={handleChange}>
        </lightning-input>

    numberOfEmployees = null;
    handleChange(event) {
        this.numberOfEmployees = event.detail.value;
    }

lightning-xxx 系の標準コンポーネントは、イベント発生時にCustomEvent を発生させ、「event.detail」プロパティに情報を載せて返してくる。

Work with Salesforce Data

Salesforce データとの運用

trailhead.salesforce.com

VF のときは Apex(or 標準コントローラ) からデータアクセスできたのですが、LWC では LDS と Apex の2種類がサポートされている。

Lightning Data Service : LWC で指定のAPIを使ってアクセス
Apex : @AuraEnabled のメソッド経由でアクセス

Apex 経由の場合はこんな感じ

public with sharing class AccountListControllerLwc {
    @AuraEnabled(cacheable=true)
    public static List<Account> queryAccounts(Integer numberOfEmployees) {
        return [ // Return whatever the component needs
            SELECT Name
            FROM Account
            WHERE NumberOfEmployees >= :numberOfEmployees
        ];
    }
}

呼び出し側は

import queryAccounts from '@salesforce/apex/AccountListControllerLwc.queryAccounts;

// 中略
    async selectAction() {
        this.accounts = await queryAccounts();
    }

LDS はここでは説明してないね…（汗

Use the Navigation Service and Reuse Visualforce

ナビゲーションサービス利用とVisualforce再利用

trailhead.salesforce.com

URLFOR vs the Navigation Service
要するに、何らかの処理したあとにURL遷移するサービス

NavigationMixin を使って画面遷移する。

]import { LightningElement } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
export default class ClientSideNavigation extends NavigationMixin(LightningElement) {
    handleButtonClick() {
        this[NavigationMixin.Navigate]({
            type: 'standard__objectPage',
            attributes: {
                objectApiName: 'Contact',
                actionName: 'list'
            }
        });
    }
}