Salesforce 開発者の JavaScript スキル(8)
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}
みたいにして取り込む。
JavaScript は LightningElement
継承クラスを 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.xml
は Salesforce 上のどんな画面でこのコンポーネントを用いるのか?呼び出し設定で使えるプロパティや設定値は何なのかを指定するファイル。
詳細は こちら 最新版は英語しか無いっぽい…翻訳は相変わらず後回しやねんで…
チュートリアル的にデプロイまでやるので、やっておくこと推奨。
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
- CSS は自分のコンポーネント内でのみ有効(子・孫には適用されない。それが ShadowDOM)
- Salesforce Lightning Design System (SLDS) は暗黙で適用できる(Salesforce 版)
あとはハンズオンしましょう