認定 JavaScript デベロッパー資格の更新

Summer'23更新したポイント

• html: lwc:if、lwc:elseとlwc:ref

重要 従来の if:true と if:false ディレクティブは、今後廃止され削除される予定のため、現在は推奨されません。
コードが今後の変更に対応できるように、新しい条件付きディレクティブを代わりに使用することをお勧めします。

• js: this.refs.定義した名前

例：

<template>
    <c-component lwc:ref="component"></c-component>
</template>

 // 従来 document.querySelector('c-component');
 const domElement = this.refs.component;
 

実際資格更新のソース

• childコンポーネント

child.html

<template>
    
</template>

child.js

import { LightningElement, api } from "lwc";
import LightningAlert from "lightning/alert";
export default class Child extends LightningElement {
      @api
      async sayHi() {
            await LightningAlert.open({
                  message: "Hello Trailblazer!",
                  theme: "success",
                  label: "Greetings"
      });  
        console.log("Alert modal has been closed");
     }
}

child.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>58.0</apiVersion>
    <isExposed>false</isExposed>
</LightningComponentBundle>

• parentコンポーネント

parent.html

<template>
    <lightning-card title="Summer '23 Maintenance">
          <lightning-button slot="actions" label="Say Hi" onclick={sayHi}></lightning-button>
          <tempalte lwc:if={account.data}>
                <div class="slds-m-around_medium">
                      <p>Account Name: {name}</p>
                      <p>Industry: {industry}</p>
                      <p>Phone: {phone}</p>
                      <p>Owner: {owner}</p>
               </div>
         </tempalte>
         <tempalte lwc:else>
              <div class="slds-m-around_medium slds-text-color_destructive">An error occurred while retrieving data</div>
         </tempalte>
         <c-child lwc:ref="child"></c-child>
   </lightning-card>
</template>

parent.js

import { LightningElement, api, wire } from "lwc";
import { getRecord, getFieldValue } from "lightning/uiRecordApi";
import FIELD_NAME from "@salesforce/schema/Account.Name";
import FIELD_OWNER_NAME from "@salesforce/schema/Account.Owner.Name";
import FIELD_PHONE from "@salesforce/schema/Account.Phone";
import FIELD_INDUSTRY from "@salesforce/schema/Account.Industry";

export default class Parent extends LightningElement {
      @api recordId;
      @wire(getRecord, { recordId: "$recordId", fields: [FIELD_NAME, FIELD_INDUSTRY], optionalFields: [FIELD_PHONE, FIELD_OWNER_NAME] })
account;
      get name() {
            return getFieldValue(this.account.data, FIELD_NAME);
}
      get phone() {
            return getFieldValue(this.account.data, FIELD_PHONE);
}
      get industry() {
            return getFieldValue(this.account.data, FIELD_INDUSTRY);
}
      get owner() {
            return getFieldValue(this.account.data, FIELD_OWNER_NAME);
}
      sayHi() {
            let cmp = this.refs.child;
            cmp.sayHi();
     }
}

parent.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>58.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <objects>
                <object>Account</object>
            </objects>
        </targetConfig>
   </targetConfigs>
</LightningComponentBundle>

終わり