Prepare for your Salesforce JavaScript Developer I Credential Trailmix の続き
また来たよ英語回
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 単元 |
まぁ見たままだよね。
サーバサイドではデータの管理だけしてて、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 データとの運用
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再利用
- 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' } }); } }
- Reusing Visualforce in Lightning Experience
Aura でラップすれば、LWC を VF に埋め込んで使えるで~ Component Library
問題: * ナビゲーションサービスってなに?→Salesforce内外のナビゲーションのこと+ファイルを開く * VFのパフォーマンスが悪く、モバイルでアクセスしたい。解決策は?→LWCで作り直せ(クライアントで動作するのでVFより待機時間が短い)