lwc紹介2.pdf

Transcript

1. LWCの開発ワークフロー １．Dev Hub and Scratch Orgs ・Salesforce Command Line Interface (CLI) ・Visual Studio Code Extension ・GitHub ２．Non-Scratch Orgs 開発ワーク フロー 関連ツール
2. 最小限のjsコード 修飾子 Decorators ・@api: Marks a property as public for use in your template or other components. ・@track: Marks a property for internal monitoring. ・@wire: Gives you a way to get and bind data. This implementation simplifies getting data from a Salesforce org. LWCのJSファイル ・モジュールlwc ・クラスLighiningElemnt
3. LWCコンフィグファイル（メタデータxmlファイル） １．<apiVersion> ２．<isExposed> 必須要素
4. lifecycle hook fires Created Inserted Removed Renders Errors コンポーネントライフサイクルイベント constructor() connectedCallback() disconnectedCallback() renderedCallback() errorCallback()
5. イベント通信 Create and Dispatch Events ・CustomEvent() ・EventTarget.dispatchEvent() Communicate Between Components ・publish-subscribe pattern Aura application events https://github.com/trailheadapps/lwc-recipes/tree/master/force-app/main/default/lwc/pubsub
6. Aura ComponentsからLightning Web Componentsへ移行 Migrate Component Bundle Files Migrate Markup GitHub ・/lwc/pubsub
7. Aura ComponentsからLightning Web Componentsへ移行 Migrate CSS Aura LWC .THISを削除
8. Lightning Web Componentsのテスト Write Jest tests to: ・Test a component in isolation ・Test a component’s public API (@api properties and methods, events) ・Test basic user interaction (clicks) ・Verify the DOM output of a component ・Verify that events fire when expected Jest tests work in: LWC Aura How to ｗrite Jest Tests ・folder named __tests__ ・Update .forceignore with **/__tests__/** ・@salesforce/wire-service-jest-util ・registerLdsTestWireAdapter(wireAdapter)
9. ご清聴ありがとうございました