技術をかじる猫

適当に気になった技術や言語、思ったこと考えた事など。

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

trailhead.salesforce.com

Lightning Web コンポーネントの概要

Lightning Web コンポーネントの概要 単元 | Salesforce Trailhead

シンプルに HTML(テンプレート) JavaScript(コントローラ) CSS の組み合わせ。
最小構成は以下2つ。(ただし、js-meta.xml ファイルも必要…だが表示内容にはあんまり関わらないのでここでは飛ばす)

<template>
  <h1>{message}</h1>
</template>
import { LightningElement } from 'lwc';
export default class App extends LightningElement {
  message = 'Hello World';
}

見た目のスタイル変更にスタイルを書ける。

h1 {
   color: #ff0000;
}

で、割と重要「Aura コンポーネントに Lightning Web コンポーネントを含めることができます」つまり、外部のサイトとかで公開する場合、Visualforce で作るのだけど、Aura でラップして LWC を表示させることもできる。
そこまでする必要があるかどうかは考えよう。

Aura よりかは圧倒的にシンプルだとは覚えておこう(ぶっちゃけ Aura がク○過ぎた)

Lightning Web コンポーネントの作成

Lightning Web コンポーネントの作成 単元 | Salesforce Trailhead

LWC でコンポーネントを作成すると、

の 4 ファイルができる。
これが基本構成で、関連性は名前で解決されてる。

このコンポーネントを外から呼ぶ場合 <c-app></c-app> みたいにして呼び出す。
c- がカスタムコンポーネントを意味するプレフィックスtestApp のようなコンポーネントなら、<c-test-app></c-test-app> になるので注意。

HTML は <template> を親として記述。JavaScript の変数は {name} みたいにして取り込む。
JavaScriptLightningElement 継承クラスを export default で返すことになる。
CSS は…まぁフツーに。強いていうと、ID 値は当てにならない。※

LWC のレンダリング結果は、基本的に LWC のフレームワークによる ShadowDOM の出力となる。よって、タグに ID 値を指定しても、実際には xxx-id みたいな謎のIDに置き換えられてしまうので、ID を使うことは実質できない。
また、普通の JavaScript のような DOM 操作は同じ理由からうまく動作しないので、行わない方が良い。

ライフサイクルとして

  • コンストラクタ: これ以上言うことなかろ?
  • connectedCallback DOMにこのコンポーネントが配置された際のイベント
  • renderedCallback 画面上に表示された
  • errorCallback(error, stack) 子・孫コンポーネントがエラーを吐いたときのコールバック
  • disconnectedCallback DOM から削除された

デコレータとして、LWCの独自デコレータがいくつかある。
OSS 版はまだしも、Salesforce 版のLWCはデコレータを自分で定義できません

  • @api LWC の外側から属性値として受け取れる変数へのデコレータ。getter/setter を指定できる。
  • @track プロパティに設定可能なデコレータで、指定された変数は中の { hoge: 'この値の変化' } とか [ '初期要素', '追加された要素' ] とかの中身まで監視される。
  • @wire Salesforce のいくつかのデータサービスを使って、SObject レコードを参照・操作できる。(※ ぶっちゃけ低性能なので、個人的にはApexの@AuraEnabled 推奨…ぶっちゃけゴミです)

Lightning Web コンポーネントファイルのリリース

Lightning Web コンポーネントファイルのリリース 単元 | Salesforce Trailhead

組織への push 操作などの説明。
js-meta.xml についても触れる。

js-meta.xmlSalesforce 上のどんな画面でこのコンポーネントを用いるのか?呼び出し設定で使えるプロパティや設定値は何なのかを指定するファイル。
詳細は こちら 最新版は英語しか無いっぽい…翻訳は相変わらず後回しやねんで…

チュートリアル的にデプロイまでやるので、やっておくこと推奨。

Lightning Web コンポーネントでのイベントの処理

Lightning Web コンポーネントでのイベントの処理 単元 | Salesforce Trailhead

LWC の階層構造間のやり取りは、原則的に

  • 親(コンテナ側)→子(呼び出されるコンポーネント) : 子の属性値(attribute) 経由で値を渡す
  • 子→親 : イベント経由で値を渡す

という構造

  • 属性値で値を渡すというのは <c-custom-component test-field='値やねんで?' > という形で渡して、customComponent 側は @api testField; で受け取る
  • イベント経由で値を渡すというのは子コンポーネント側より this.dispatchEvent(new CustomEvent('eventname',{ detail: '渡す値' })); でイベント発生させて、親は <c-custom-component oneventname={handleCustom} > で受け取り、handleCustom(e) { window.console.log(e.detail); } みたいに受け取る。

一応乗ってないやり方では

コンポーネント側で

@api testFunction() {
    return 'resultValue';
}

としといて、親側から

const tag = this.template.selectQuery('c-custom-component');
const resultValue = tag.testFunction();

でも取れなくはない。

Lightning Web コンポーネントへのスタイルとデータの追加

Lightning Web コンポーネントへのスタイルとデータの追加 単元 | Salesforce Trailhead

  1. CSS は自分のコンポーネント内でのみ有効(子・孫には適用されない。それが ShadowDOM)
  2. Salesforce Lightning Design System (SLDS) は暗黙で適用できる(Salesforce 版)

あとはハンズオンしましょう