Lightning ããŒã¿ãµãŒãã¹ã䜿çšããããŒã¿ã®æäœ
åŠç¿ã®ç®ç
ãã®åå ãå®äºãããšã次ã®ããšãã§ããããã«ãªããŸãã
-
lightning-record-*-form
åºæ¬ã³ã³ããŒãã³ããå«ããœãªã¥ãŒã·ã§ã³ãäœæããã
- Lightning ããŒã¿ãµãŒãã¹ (LDS) ã¯ã€ã€ãŒã¢ããã¿ãŒã䜿çšããŠããŒã¿ãåç
§ããã
- LDS 颿°ã䜿çšããŠããŒã¿ã倿Žããã
Lightning Web ã³ã³ããŒãã³ããåããŠäœ¿çšããå Žåãåææ¡ä»¶ãæºãããŠããã確èªããŠãã ããããã®ã¢ãžã¥ãŒã«ãå§ããåã«ãTrailhead ã§ãLightning Web ã³ã³ããŒãã³ãã®åºæ¬ãã¢ãžã¥ãŒã«ãšãJavaScript ã®æäœæ¹æ³ããã¬ã€ã«ãä¿®äºããŠããå¿ èŠããããŸããããããã®äœæ¥ã¯ããããã§åŠã¶æŠå¿µãäœæ¥ã«åºã¥ããŠããŸãã
Lightning Web ã³ã³ããŒãã³ãã§ããŒã¿ãæäœãã
Lightning Web ã³ã³ããŒãã³ãã«ã¯ãSalesforce ããŒã¿ãæäœããæ¹æ³ãè€æ°ãããŸããç¹å®ã®äœ¿çšäºäŸã«ã©ã®ãœãªã¥ãŒã·ã§ã³ã䜿çšããããçè§£ããŠãããšãããå°ãªãã·ã³ãã«ã§ã¡ã³ããã³ã¹ããããã³ãŒããæžãããšãã§ããŸããç¶æ³ããšã«æé©ãªãœãªã¥ãŒã·ã§ã³ã䜿çšããããšã§ãã³ã³ããŒãã³ããã¢ããªã±ãŒã·ã§ã³ã®ããã©ãŒãã³ã¹ãåäžããŸãã
ãã®ã¢ãžã¥ãŒã«ã§ã¯ãããŸããŸãªãœãªã¥ãŒã·ã§ã³ããã€ã©ã®ããã«äœ¿çšããããåŠç¿ããŸããæåã¯æãç°¡åã§ã«ã¹ã¿ãã€ãºæ§ãæãäœããªãã·ã§ã³ã確èªããŸããå ã«é²ããšãããè€éã§ã«ã¹ã¿ãã€ãºæ§ã®é«ããªãã·ã§ã³ãæ€èšããŸãã
Lightning ããŒã¿ãµãŒãã¹ã䜿çšããŠããŒã¿ãæäœãã
Lightning ããŒã¿ãµãŒãã¹ã¯ Salesforce ããŒã¿ã®æäœã«é©ãã (ãã€æãç°¡åãª) æ¹æ³ã§ããLightning ããŒã¿ãµãŒãã¹ã§ã¯ãéçºè 㯠JavaScript ã䜿çšããŠã³ã³ããŒãã³ãã Salesforce ããŒã¿ã«æ¥ç¶ããŸãã
Lightning ããŒã¿ãµãŒãã¹ã¯ãŸããã»ãã¥ã¢ãªãŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ API ãšã³ããã€ã³ãã«å¯ŸããŠãµãŒããŒã³ãŒã«ãå®è¡ããããšã§ã»ãã¥ãªãã£ãæäŸããŸãããã¹ãŠã®ã³ã³ããŒãã³ãã§ã¯ã©ã€ã¢ã³ãåŽå ±æãã£ãã·ã¥ã䜿çšããããã©ãŒãã³ã¹ãæå€§éã«é«ããŸãããã£ãã·ã¥ãããã¬ã³ãŒãã¯ãã®ãã£ãã·ã¥ããååŸãããããããµãŒããŒãžã®äžèŠãªã³ãŒã«ããªããªããŸãã
ã³ã³ããŒãã³ãã®ã©ã€ããµã€ã¯ã«ã®ç¹å®ã®æç¹ã«ãããŠãã¯ã€ã€ãŒã¢ããã¿ãŒããããŒã¿ãåä¿¡ããããšã«ã¯é Œããªãã§ãã ãããã¯ã€ã€ãŒã¢ããã¿ãŒããã®ããŒã¿ã¯ãconnectedCallback()
ã renderedCallback()
ãªã©ã®ã©ã€ããµã€ã¯ã«ããã¯ã§ã¯åžžã«ã¢ã¯ã»ã¹ã§ãããšã¯éããŸãããã¯ã€ã€ãŒãµãŒãã¹ããŒã¿ã®ã©ã€ããµã€ã¯ã«ã®è©³çްã¯ããUnderstand the Wire Service (ã¯ã€ã€ãŒãµãŒãã¹ãçè§£ãã)ããåç
§ããŠãã ããã
Lightning ããŒã¿ãµãŒãã¹ã¯ãã¢ããªã±ãŒã·ã§ã³ã©ã€ããµã€ã¯ã«å šäœãéããŠè€æ°ã®ã³ã³ããŒãã³ããšã¯ã©ã€ã¢ã³ãéã§äžè²«ããææ°ã®ããŒã¿ãç¶æããŸããè€æ°ã®ã³ã³ããŒãã³ãã Lightning ããŒã¿ãµãŒãã¹ã䜿çšããŠã¬ã³ãŒããæäœããŠããå Žåãããããã®ã³ã³ããŒãã³ããã¬ã³ãŒããæŽæ°ãããšãä»ã®ã³ã³ããŒãã³ãã«ã¯ãã®æŽæ°ãèªåçã«åæ ãããŸãã
以éã®ã»ã¯ã·ã§ã³ã§ã¯ãLightning ããŒã¿ãµãŒãã¹ã䜿çšã㊠Salesforce ããŒã¿ãæäœããããŸããŸãªæ¹æ³ãåãäžããŸãã
ã¬ã³ãŒããã©ãŒã åºæ¬ã³ã³ããŒãã³ãã䜿çšããŠããŒã¿ãåç §ãŸãã¯å€æŽãã
Lightning Web ãµãŒãã¹ã§ 1 ä»¶ã®ã¬ã³ãŒããæäœããå Žåãlightning-record-*-form
ã³ã³ããŒãã³ãã䜿çšããã®ãæãç°¡åãªæ¹æ³ã§ãããããã®åºæ¬ã³ã³ããŒãã³ã㯠Lightning ããŒã¿ãµãŒãã¹ãããã¯ã°ã©ãŠã³ãã§äœ¿çšãããã®ãã£ãã·ã¥ããã³åææ©èœãç¶æ¿ããŸããåºæ¬ã³ã³ããŒãã³ãã«ãã£ãŠæ©èœãšã«ã¹ã¿ãã€ãºã¬ãã«ãç°ãªããŸãã
-
lightning-record-form
åºæ¬ã³ã³ããŒãã³ãã¯æãã·ã³ãã«ã§ããlightning-record-form
ã§ã¯ã¬ã€ã¢ãŠããæå®ã§ããã·ã¹ãã 管çè ã¯å®£èšçã«ãã©ãŒã é ç®ãèšå®ã§ããŸããé åºä»ãããé ç®ã®ãªã¹ããæå®ããŠããã°ã©ã ã§è¡šç€ºããå 容ãå®çŸ©ããããšãã§ããŸããlightning-record-form
ã§ã¯ã¬ã³ãŒãã®è¡šç€ºãšç·šéãã§ããŸãã
-
lightning-record-view-form
åºæ¬ã³ã³ããŒãã³ãã§ã¯ã¬ã³ãŒãã衚瀺ã§ããŸãã
-
lightning-record-edit-form
åºæ¬ã³ã³ããŒãã³ãã§ã¯ã¬ã³ãŒããç·šéã§ããŸãã
ãã©ãŒã ã¬ã€ã¢ãŠãã®ã«ã¹ã¿ãã€ãºãé
ç®å€ã®äºåå
¥åãã¬ã³ãŒãããŒã¿ã®è¡šç€ºæ¹æ³ã®å€æŽãå¿
èŠãªå Žåã¯ãlightning-record-view-form
ãŸã㯠lightning-record-edit-form
ãéžæããŸãã
次ã®äŸã§ã¯ lightning-record-form
ã䜿çšããŠååŒå
ãäœæããŸãã
accountCreator.html
<template> <lightning-card> <lightning-record-form object-api-name={objectApiName} fields={fields} onsuccess={handleSuccess}> </lightning-record-form> </lightning-card> </template>
accountCreator.js
import { LightningElement } from 'lwc'; import { ShowToastEvent } from 'lightning/platformShowToastEvent'; import ACCOUNT_OBJECT from '@salesforce/schema/Account'; import NAME_FIELD from '@salesforce/schema/Account.Name'; import REVENUE_FIELD from '@salesforce/schema/Account.AnnualRevenue'; import INDUSTRY_FIELD from '@salesforce/schema/Account.Industry'; export default class AccountCreator extends LightningElement { objectApiName = ACCOUNT_OBJECT; fields = [NAME_FIELD, REVENUE_FIELD, INDUSTRY_FIELD]; handleSuccess(event) { const toastEvent = new ShowToastEvent({ title: "Account created", message: "Record ID: " + event.detail.id, variant: "success" }); this.dispatchEvent(toastEvent); } }
ã³ãŒãã®ãã€ã³ã:
accountCreator.htmlÂ
- è¡ 3: ããŒã¯ã¢ããã§
lightning-record-form
ã䜿çšããããšã§ãLightning ããŒã¿ãµãŒãã¹ãæäŸããã»ãã¥ãªãã£ãšããã©ãŒãã³ã¹ã®ã¡ãªããããã¹ãŠåŸãããšãã§ããŸããlightning-record-form
ã¯recordId
ãæå®ãããŠããªããšedit
ã¢ãŒãã§åäœããéä¿¡æã«ã¬ã³ãŒããäœæããŸãã
- è¡ 4:
object-api-name
ããããã£ããã€ã³ãããŠèªã¿èŸŒããªããžã§ã¯ãã®çš®é¡ãæå®ããŸãã
- è¡ 5:
fields
ããããã£ããã€ã³ãããŠãã©ãŒã ã«è¡šç€ºããé ç®ãæå®ããŸãã
- è¡ 6:
handleSuccess
ãsuccess
ã€ãã³ãã®ãã³ãã©ãŒãšããŠèšå®ããŸãã
accountCreator.jsÂ
- è¡ 3 ïœ6: ãã¡ã€ã«ã®åé ã§ååŒå
ãªããžã§ã¯ããšãã®é
ç®ãžã®åç
§ãã€ã³ããŒãããŸãããã®æ¹æ³ã§ãªããžã§ã¯ããšé
ç®ãåç
§ãããšåç
§æŽåæ§ã確ä¿ãããŸããSalesforce ããªããžã§ã¯ããšé
ç®ã®ååšã確èªããããããåé€ãããã®ã鲿¢ããã³ã³ããŒãã³ããåç
§ãã倿Žã»ãããšããã±ãŒãžã«å¿
ãå«ãŸããããã«ããŸãããªããžã§ã¯ããšé
ç®ã®åç
§ãã€ã³ããŒããããšããªããžã§ã¯ããé
ç®ã®ååã倿ŽãããŠãã³ã³ããŒãã³ãã³ãŒãã¯åŒãç¶ãåäœããŸãã
- è¡ 10:
success
ã€ãã³ãã®handleSuccess
ã€ãã³ããã³ãã©ãŒãå®çŸ©ããŸããhandleSuccess
ã¯ãä¿åæäœãæåãããšå®è¡ãããŸãã
- è¡ 11 ïœ 17:
ShowToastEvent
ãèµ·åããŠããŒã¹ãã¡ãã»ãŒãžã衚瀺ããŸããããã§event.detail.id
ã¯æ°ããäœæãããã¬ã³ãŒãã®id
ãžã®åç §ã§ãã
lightning-record-*-form
ã³ã³ããŒãã³ã以äžã®ã«ã¹ã¿ãã€ãºãå¿
èŠãªå Žåã¯ãã¯ã€ã€ãŒã¢ããã¿ãŒãŸã㯠JavaScript 颿°ã䜿çšã㊠Lightning ããŒã¿ãµãŒãã¹ãçŽæ¥åŒã³åºãããšãã§ããŸããÂ
LDS ã¯ã€ã€ãŒã¢ããã¿ãŒã䜿çšããŠããŒã¿ãåç §ãã
LDS ã¯ã€ã€ãŒã¢ããã¿ãŒã Salesforce ããŒã¿ãæäœããæ¹æ³ã§ããã¯ã€ã€ãŒã¢ããã¿ãŒã䜿çšã㊠Salesforce ããŒã¿ (ã¬ã³ãŒã) ãšã¡ã¿ããŒã¿ (ã¬ã€ã¢ãŠãã®è©³çްããªããžã§ã¯ãã®é
ç®ãªã©) ãåç
§ããŸããã¯ã€ã€ãŒã¢ããã¿ãŒã䜿çšããã«ã¯ãããããã£ãŸãã¯é¢æ°ã @wire
ã§ãã³ã¬ãŒãããã¯ã€ã€ãŒã¢ããã¿ãŒãæå®ããŸãã
LDS ã¯ã€ã€ãŒã¢ããã¿ãŒã¯ãŸã LDS ãã£ãã·ã¥ããã§ãã¯ããå¿ èŠãªå Žåã«ã®ã¿ãµãŒããŒããã®ããŒã¿ãèŠæ±ããŸããã¢ããã¿ãŒã¯å€æŽã«åå¿ããé©å®ããŒã¿ãæŽæ°ããŸããããšãã°ããã©ã¡ãŒã¿ãŒå€ã倿Žãããå Žåãä»ã®ã³ã³ããŒãã³ãã Lightning ããŒã¿ãµãŒãã¹ãã£ãã·ã¥ã®ããŒã¿ã倿Žããå Žåãã¢ããã¿ãŒã¯çµã³ä»ããããããããã£ãŸãã¯é¢æ°ã«æ°ããããŒã¿ãããããžã§ãã³ã°ããŸãã
次㯠getRecord ã¯ã€ã€ãŒã¢ããã¿ãŒã䜿çšããäŸã確èªããŸãããã
wireGetRecordProperty.js
import { LightningElement, api, wire } from 'lwc'; import { getRecord, getFieldValue } from 'lightning/uiRecordApi'; import ACCOUNT_NAME_FIELD from '@salesforce/schema/Account.Name'; export default class WireGetRecordProperty extends LightningElement { @api recordId; @wire(getRecord, { recordId: '$recordId', fields: [ACCOUNT_NAME_FIELD] }) account; get name() { return getFieldValue(this.account.data, ACCOUNT_NAME_FIELD); } }
ã³ãŒãã®ãã€ã³ã:
- è¡ 2:
getRecord
ã¯ã€ã€ãŒã¢ããã¿ãŒãšgetFieldValue
颿°ãã€ã³ããŒãããŸãã
- è¡ 3: accountCreator ã®äŸãšåæ§ã«ã
Account.Name
é ç®ãžã®åç §ãã€ã³ããŒãããŸãã(è¡ 6 ã§ã¯ãããã䜿çšããŠgetRecord
ã¯ã€ã€ãŒã¢ããã¿ãŒã«ååŸããé ç®ãæç€ºããŸã)ã
- è¡ 5: wireGetRecordProperty ã³ã³ããŒãã³ããã¬ã³ãŒãããŒãžã«é
眮ããããšã
@api recordId
ã«ãã£ãŠèŠªã³ã³ããŒãã³ã (FlexiPage) ã¯çŸåšã®ã¬ã³ãŒãã® ID ãã³ã³ããŒãã³ãã«æž¡ããããã«ãªããŸãã
- è¡ 6: account ããããã£ãçµã³ä»ããããã«ã
@wire
ãã³ã¬ãŒã¿ãŒãé©çšããã³ãŒã«ããã¯ã€ã€ãŒã¢ããã¿ãŒ (getRecord
) ãšã¢ããã¿ãŒã«å¿ èŠãªãã©ã¡ãŒã¿ãŒ (recordId
ãšfields
) ãæå®ããŸãã
- è¡ 7: ã¯ã€ã€ãŒã¢ããã¿ãŒã¯å€ã®ã¹ããªãŒã ã
account
ããããã£ã«ããããžã§ãã³ã°ããŸãããã®ããããã£ã¯è€æ°åèšå®ãããŸããã¬ã³ãŒãã¯ãååŸããããšaccount.data
ã«ä¿åãããŸããã¬ã³ãŒãã®ååŸã倱æãããšãšã©ãŒãaccount.error
ã«ä¿åãããŸãã
- è¡ 6 ïœ 7: åããŠå€ã
recordId
ããããã£ã«å²ãåœãŠããããšããã¯ã€ã€ãŒã¢ããã¿ãŒã¯ãã®ããŒã¿ããµãŒããŒããååŸããLDS ãã£ãã·ã¥ã«ä¿åããŠãã以éã¢ã¯ã»ã¹ã§ããããã«ããŸããrecordId
ãã©ã¡ãŒã¿ãŒã$
ãã¬ãã£ãã¯ã¹ã®ããæååãšããŠæž¡ãããšã§ãrecordId
ããªã¢ã¯ãã£ãã«ããŸããrecordId
ã®å€ã倿Žããããã³ã«ãã¯ã€ã€ãŒã¢ããã¿ãŒã¯ãã£ãã·ã¥ãŸãã¯ãµãŒããŒããæ°ããããŒã¿ãååŸããŸããå¥ã®ã³ã³ããŒãã³ãããã£ãã·ã¥ãããã¬ã³ãŒãã倿Žãããšãã¯ã€ã€ãŒã¢ããã¿ãŒã¯ã¬ã³ãŒãã®æ°ããå€ãaccount
ããããã£ã«ããããžã§ãã³ã°ããŸãã
- è¡ 8 ïœ 10: name ããããã£ã® getter ãå®çŸ©ããŸããgetFieldValue 颿°ã§ãè¿ãããããŒã¿ã®é
ç®å€ã«ã¢ã¯ã»ã¹ã§ããŸãã
ãã®äŸã§ã¯ã次ã®ãããªæ¹æ³ã§ HTML ãã¡ã€ã«ã® name ããããã£ãååŸã§ããŸãã
wireGetRecordProperty.html
<template> Account Name: {name} </template>
wireGetRecordProperty ã¯ããããã£ããã³ã¬ãŒãããäŸã§ããåæ§ã«é¢æ°ããã³ã¬ãŒãã§ããŸããããã¯ãè¿ãããã¬ã³ãŒãã«å¯ŸããŠäœããã®ããžãã¯ãå®è¡ããå Žåã«äŸ¿å©ã§ããæ¬¡ã®äŸã§ã¯ãåã®äŸ (wireGetRecordProperty) ã倿ŽããŠããããã£ã§ã¯ãªã颿° (wiredAccount
) ãçµã³ä»ããŠããŸãã
wireGetRecordFunction.js
import { LightningElement, api, wire } from 'lwc'; import { getRecord, getFieldValue } from 'lightning/uiRecordApi'; import ACCOUNT_NAME_FIELD from '@salesforce/schema/Account.Name'; export default class WireGetRecord extends LightningElement { @api recordId; data; error; @wire(getRecord, { recordId: '$recordId', fields: [ACCOUNT_NAME_FIELD] }) wiredAccount({data, error}) { console.log('Execute logic each time a new value is provisioned'); if (data) { this.data = data; this.error = undefined; } else if (error) { this.error = error; this.data = undefined; } } get name() { return getFieldValue(this.data, ACCOUNT_NAME_FIELD); } }
ã³ãŒãã®ãã€ã³ã:
- è¡ 8 ïœ 9: ããããã£ããã³ã¬ãŒãããã®ã§ã¯ãªãã
wiredAccount
颿°ããã³ã¬ãŒãããŸãããã®é¢æ°ã¯ã2 ã€ã®å±æ§data
ãšerror
ãæã€ãªããžã§ã¯ãããã©ã¡ãŒã¿ãŒãšããŠåãåããŸããããã§ã¯ãªããžã§ã¯ã ES6 destructuring ã䜿çšããŠãªããžã§ã¯ã屿§ãã¢ã³ããã¯ããŸãã
- è¡ 11 ïœ 17: LDS ã¯ã€ã€ãŒã¢ããã¿ãŒã¯ 1 ã€ã®å€ã§ã¯ãªãå€ã®ã¹ããªãŒã ãããããžã§ãã³ã°ããããã
wiredAccount
颿°ã¯è€æ°ååŒã³åºãããå¯èœæ§ããããŸãããã®ãããçµã³ä»ãããã颿°ã¯åœ±é¿ãäžããç¶æ ããªã»ããããå¿ èŠããããŸããè¡ 11 ïœ 17 ã§ã¯ãã¯ã€ã€ãŒã¢ããã¿ãŒãæ°ããããŒã¿ãããããžã§ãã³ã°ããå Žåããã®ããŒã¿ã¯data
ããããã£ã«ä¿åãããerror
ããããã£ã¯ undefined ã«èšå®ãããŸãããŸãã¯ãšã©ãŒã«ãªã£ãå Žåãerror
ããããã£ã«ãšã©ãŒãä¿åãããdata
ããããã£ã undefined ã«èšå®ãããŸãã
ãã®äŸã§ã¯ãåã®äŸã®ã¢ã¯ã»ã¹ãšåãæ¹æ³ã§ name
ããããã£ã«ã¢ã¯ã»ã¹ã§ããŸãã
LDS 颿°ã䜿çšããŠããŒã¿ã倿Žãã
LDS ã¯ã€ã€ãŒã¢ããã¿ãŒã¯ããŒã¿ã®åç §ã«é©ããŠããŸãããã¬ã³ãŒãã®äœæãæŽæ°ãåé€ã«ã¯ LDS 颿°ãå¿ èŠã§ããã¯ã€ã€ãŒã¢ããã¿ãŒã¯ Lightning Web ã³ã³ããŒãã³ããšã³ãžã³ã«ãã£ãŠåŒã³åºãããŸããã颿°ã¯åœä»€çã«åŒã³åºãå¿ èŠããããŸããLDS 颿°ã¯ãã¬ã³ãŒããäœæãæŽæ°ããŸãã¯åé€ããããš LDS ãã£ãã·ã¥ã«éç¥ããŸããæ¬¡ã®äŸã§ã¯ createRecord LDS 颿°ã䜿çšããŠååŒå ã¬ã³ãŒããäœæããŸãã
ldsCreateRecord.js
import { LightningElement} from 'lwc'; import { createRecord } from 'lightning/uiRecordApi'; import ACCOUNT_OBJECT from '@salesforce/schema/Account'; import ACCOUNT_NAME_FIELD from '@salesforce/schema/Account.Name'; export default class LdsCreateRecord extends LightningElement { handleButtonClick() { const recordInput = { apiName: ACCOUNT_OBJECT.objectApiName, fields: { [ACCOUNT_NAME_FIELD.fieldApiName] : 'ACME' } }; createRecord(recordInput) .then(account => { // code to execute if create operation is successful }) .catch(error => { // code to execute if create operation is not successful }); } }
ã³ãŒãã®ãã€ã³ã:
- è¡ 2:
createRecord
LDS 颿°ãã€ã³ããŒãããŸãã
- è¡ 3 ïœ 4:
Account
ãªããžã§ã¯ããšAccount.Name
é ç®ã (以åã®äŸãšåæ§ã«) ã€ã³ããŒãããŠåç §æŽåæ§ã確ä¿ããŸãã
- è¡ 6:
handleButtonClick
ã¡ãœãããã€ãã³ããã³ãã©ãŒãšããŠå®çŸ©ããŸããããã¯ãŠãŒã¶ãŒã .html ãã¡ã€ã«å ã®lightning-button
(ããã«ã¯å«ãŸããŠããªã) ãã¯ãªãã¯ãããšçºçããã€ãã³ãã«åå¿ããŸããhandleButtonClick
ã¯ãåŒã³åºããããšcreateRecord
颿°ãåœä»€çã«åŒã³åºããŸãã
- è¡ 10: ã€ãã³ããã³ãã©ãŒã¯
Account.Name
é ç®ã®æååãæž¡ããŸããããã¯ã¢ããã¿ãŒãæ°ããååŒå ãäœæããããã«å¿ èŠã§ãã
- è¡ 13: LDS 颿°ãåœä»€çã«åŒã³åºããšãpromise (éåæã³ãŒã«ã®å®è¡ãç°¡ç¥åãã JavaScript ãªããžã§ã¯ã) ãè¿ãããŸãã
- è¡ 14 ïœ 16:
then
ã¡ãœããã«ååŒå ãæ£åžžã«äœæããããšãã®åŠçãå®çŸ©ããŸãã
- è¡ 17 ïœ 19:
catch
ã¡ãœããã«ååŒå ã®äœæã倱æãããšãã®åŠçãå®çŸ©ããŸãã
泚æ: LDS 颿°ã§æäœã§ããã®ã¯ 1 ä»¶ã®ã¬ã³ãŒãã®ã¿ã§ããåãã³ã³ããŒãã³ãã§è€æ°ã®é¢æ°ã䜿çšã§ããŸãã (ããšãã°ãåãæäœå ã§ç°ãªã 2 çš®é¡ã®ã¬ã³ãŒããäœæãããªã©)ãå颿°ã¯ç¬èªã®ç¬ç«ãããã©ã³ã¶ã¯ã·ã§ã³äžã§å®è¡ãããŸãããã®ãããå ±éã®ããŒã«ããã¯ããžãã¯ããããŸãããçµåãã DML æäœã Transactional ã«ããå¿ èŠãããå Žåã¯ãApex ã®äœ¿çšãæ€èšããŸãã
LDS ã¯ã€ã€ãŒã¢ããã¿ãŒãš LDS 颿°ã®è©³çްãšäœ¿ç𿹿³ã«ã€ããŠã¯ããLightning Web Components Developer Guideã(Lightning Web ã³ã³ããŒãã³ãéçºè ã¬ã€ã) ãš Salesforce éçºè ããã°ãåç §ããŠãã ããã
ååŒå ãäœæãã Lightning Web ã³ã³ããŒãã³ãããªãªãŒã¹ãã
Lightning ããŒã¿ãµãŒãã¹ã®ããŸããŸãªäœ¿ç𿹿³ã確èªã§ãããšããã§ãå®éã«äŸãæäœããŠã¿ãŸãããã
å§ããåã«
ããã§ã¯ Salesforce DX éçºç°å¢ãèšå®ãããŠããããšããŠãŒã¶ãŒã容æã«ãã®ç°å¢ã䜿çšã㊠Lightning Web ã³ã³ããŒãã³ããäœæããçµç¹ã«ãªãªãŒã¹ã§ããããšãåæãšããŠããŸãããã®ããã»ã¹ã«ãŸã æ £ããŠããªãå Žåã¯ããã¯ã€ãã¯ã¹ã¿ãŒã: Lightning Web ã³ã³ããŒãã³ãããããžã§ã¯ããä¿®äºããŠãã ããã
æ°ãã Trailhead Playground ãäœæãã
ãã®ãããžã§ã¯ãçšã«ãæ°ãã Trailhead Playground ãäœæããå¿ èŠããããŸãããã®ããŒãžã®æäžéšãŸã§ã¹ã¯ããŒã«ãã[èµ·å] ã®æšªã«ããäžç¢å°ãã¯ãªãã¯ã㊠[Trailhead Playground ãäœæ] ãéžæããŸããæ°ãã Trailhead Playground ãäœæããã«ã¯ãéåžž 3ã4 åããããŸãã
泚æ: å¿ ãæ°ãã Trailhead Playground ã䜿çšããŠãã ãããæ¢åã®çµç¹ã Playground ã䜿çšãããšãChallenge ã«åãçµãã§ãããšãã«åé¡ãçºçããããšããããŸãã
Trailhead Playground ã®ãŠãŒã¶ãŒåãšãã¹ã¯ãŒããååŸãã
Trailhead Playground ã«ç§»åããŸãã(Playground ããŸã éããŠããªãå Žåã¯ããã®ããŒãžã®äžçªäžãŸã§ã¹ã¯ããŒã«ã㊠[Launch (èµ·å)] ãã¯ãªãã¯ããŸã)ãçµç¹ã« [Get Your Login Credentials (ãã°ã€ã³æ å ±ãååŸãã)] ãšããã¿ãã衚瀺ãããŠããå Žåã¯ãã¹ããã 1 ãžã¹ãããããŸããÂ
衚瀺ãããŠããªãå Žåã¯ãã¢ããªã±ãŒã·ã§ã³ã©ã³ãã£ãŒ () ã§ã[Playground Starter] ãã¯ãªãã¯ããŠæé ã«åŸããŸããPlayground Starter ã¢ããªã±ãŒã·ã§ã³ã衚瀺ãããªãå Žåã¯ãSalesforce ãã«ãã®ãTrailhead Playground ã®ãŠãŒã¶ãŒåãšãã¹ã¯ãŒãã®èª¿ã¹æ¹ããåç
§ããŠãã ããã
-
[Get Your Login Credentials (ãã°ã€ã³æ
å ±ã®è¡šç€º)] ã¿ããã¯ãªãã¯ãããŠãŒã¶ãŒåãã¡ã¢ããŸãã
-
[Reset My Password (ãã¹ã¯ãŒãã®ãªã»ãã)] ãã¯ãªãã¯ããŸãããŠãŒã¶ãŒåã«é¢é£ä»ããããŠããã¢ãã¬ã¹ã«ã¡ãŒã«ãéä¿¡ãããŸãã
- ã¡ãŒã«å
ã®ãªã³ã¯ãã¯ãªãã¯ããŸãã
- æ°ãããã¹ã¯ãŒããå
¥åãã確èªããŠã[Change Password (ãã¹ã¯ãŒãã®å€æŽ)] ãã¯ãªãã¯ããŸãã
ãã³ãºãªã³ãå§ããæºåã¯ã§ããŸããã? ããã§ã¯å§ããŸãããã
ãã®æŒç¿ã§ã¯ãLightning Web ã³ã³ããŒãã³ãããããžã§ã¯ãã«è¿œå ããŠãTrailhead Playground ã«ãªãªãŒã¹ããŸããÂ
- æ°ãããããžã§ã¯ããäœæããŸãã
- Visual Studio Code ãéããŸãã
- ã³ãã³ããã¬ãããéãã[View (衚瀺)] | [Command Palette (ã³ãã³ããã¬ãã)] ãã¯ãªãã¯ããŸãã
- ã³ãã³ããã¬ããã§ [SFDX: Create Project (SFDX: ãããžã§ã¯ããäœæ)] ãéžæããŸãã
ãªã¹ãã«è¡šç€ºãããªãå Žåã¯ãSFDX:Create Project
(SFDX: ãããžã§ã¯ããäœæ) ãšå ¥åããEnter ããŒãæŒããŸãã
- æšæºãã³ãã¬ãŒããåãå
¥ããŸãã
- ãããžã§ã¯ãåã«
workingWithDataInLWC
ãšå ¥åããEnter ããŒãæŒããŸãã
- æ°ãããããžã§ã¯ãã®å Žæãéžæãã[Create Project (ãããžã§ã¯ããäœæ)] ãã¯ãªãã¯ããŸãã
- Trailhead Playground ãæ¿èªããŸãã
- ã³ãã³ããã¬ããã§ [SFDX: Authorize an Org (SFDX: çµç¹ãæ¿èª )] ãéžæ (ãŸãã¯å
¥å) ããŸãã
-
[Production: login.salesforce.com (æ¬çª: login.salesforce.com)] ãéžæããEnter ããŒãæŒããŸãã
- å¥åãšããŠ
lwc_and_salesforce_data
ãšå ¥åããEnter ããŒãæŒããŸãã
- Trailhead Playground ã®ãŠãŒã¶ãŒåãšãã¹ã¯ãŒããå
¥åããŠãã°ã€ã³ããŸãã
- Trailhead Playground ã«ãã°ã€ã³ããããéãããŸãŸã«ã㊠Visual Studio Code ã«æ»ããŸãã
- Lightning Web ã³ã³ããŒãã³ããäœæããŸãã
- ãšã¯ã¹ãããŒã©ãŒãã€ã³ã§ãlwc ãã©ã«ããŒãå³ã¯ãªãã¯ã㊠[SFDX: Create Lightning Web Component (SFDX: Lightning Web ã³ã³ããŒãã³ããäœæ)] ãéžæããŸãã
- ã³ã³ããŒãã³ãåãšããŠ
accountCreator
ãšå ¥åããEnter ããŒãæŒããŸãã
- ããäžåºŠ Enter ããŒãæŒããŠãããã©ã«ãã®ãã£ã¬ã¯ããªãåãå
¥ããŸãã
- accountCreator.html ããã³ accountCreator.js ãã¡ã€ã«ã®å
容ããã®åå
ã®åã®ãã¬ã³ãŒããã©ãŒã åºæ¬ã³ã³ããŒãã³ãã䜿çšããããŒã¿ã®åç
§ãŸãã¯å€æŽãã»ã¯ã·ã§ã³ã§æäŸãããŠããã³ãŒãã§çœ®ãæããŸãã
- ãã®ã³ã³ããŒãã³ããçµç¹ã®ã¢ããªã±ãŒã·ã§ã³ããŒãžã§äœ¿çšã§ããããã«ããã«ã¯ãaccountCreator.js-meta.xml ãã¡ã€ã«ã®å
å®¹ãæ¬¡ã®ã³ãŒãã§çœ®ãæããŸãã
<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>48.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__AppPage</target> </targets> </LightningComponentBundle>
- 3 ã€ã®ãã¡ã€ã« (accountCreator.htmlãaccountCreator.jsãaccountCreator.js-meta.xml) ãä¿åããŸãã
- ãããžã§ã¯ããã¡ã€ã«ã Trailhead Playground ã«ãªãªãŒã¹ããŸãã(accountCreator ãã©ã«ããŒãå³ã¯ãªãã¯ã㊠[SFDX: Deploy Source to Org (SFDX: çµç¹ã«ãœãŒã¹ããªãªãŒã¹)] ãéžæããŸã)ã
- Trailhead Playground ããŸã éããŠããªãå Žåã¯ãéããŸãã(ã³ãã³ããã¬ããã§ [SFDX: Open Default Org (SFDX: ããã©ã«ãçµç¹ãéã)] ãéžæ (ãŸãã¯å
¥å) ããŸã)ã
- Trailhead Playground ã§
ãã¯ãªãã¯ã㊠[Setup (èšå®)] ãéžæããŸãã
- [Quick Find (ã¯ã€ãã¯æ€çŽ¢)] ããã¯ã¹ã«
Lightning App Builder
(Lightning ã¢ããªã±ãŒã·ã§ã³ãã«ããŒ) ãšå ¥åãã[Lightning App Builder (Lightning ã¢ããªã±ãŒã·ã§ã³ãã«ããŒ)] ãéžæããŸãã
- Lightning ããŒãžãäœæããŸãã
-
[New (æ°èŠ)] ãã¯ãªãã¯ããŸãã
-
[App Page (ã¢ããªã±ãŒã·ã§ã³ããŒãž)] ãéžæãã[Next (次ãž)] ãã¯ãªãã¯ããŸãã
- [Label (衚瀺ã©ãã«)] ã«
Working with Data
(ããŒã¿ã®æäœ) ãšå ¥åãã[Next (次ãž)] ãã¯ãªãã¯ããŸãã
- ã¬ã€ã¢ãŠãã§ [ããããŒãšå·Šãµã€ãããŒ] ãéžæããŸãã
-
[Done (å®äº)] ãã¯ãªãã¯ããŸãã
-
accountCreator ã³ã³ããŒãã³ããããŒãžãµã€ãããŒã«ãã©ãã°ããŸãã
- ããŒãžãä¿åããŸãã
- ããŒãžãæå¹åããŸããããã©ã«ãã®ã¢ããªã±ãŒã·ã§ã³å (Working with Data) ã®ãŸãŸã§ [Save (ä¿å)] ãã¯ãªãã¯ããŸãã
- ããŒãžãããã²ãŒã·ã§ã³ã¡ãã¥ãŒã«è¿œå ããããã«èŠæ±ããããã[Finish (å®äº)] ãã¯ãªãã¯ããŸãã
- æ°ããããŒãžãéããŸããã¢ããªã±ãŒã·ã§ã³ã©ã³ãã£ãŒã®æ€çŽ¢ã§
work
ãšå ¥åãã[Working with Data (ããŒã¿ã®æäœ)] ãéžæããŸãã
ããã§å®æã§ããlightning-record-form
ã䜿çšã㊠[Working with Data (ããŒã¿ã®æäœ)] ããŒãžäžã§ååŒå
ã¬ã³ãŒããäœæãã Lightning Web ã³ã³ããŒãã³ããã§ããŸãããLightning ããŒã¿ãµãŒãã¹ã®äœ¿çšã¯ãLightning Web ã³ã³ããŒãã³ãã§ Salesforce ããŒã¿ãæäœããæ¹æ³ã® 1 ã€ã§ããæ¬¡ã®åå
ã§ã¯ãApex ã䜿çšããŠããŒã¿ãæäœããæ¹æ³ãåŠç¿ããŸãã
ãªãœãŒã¹
- Lightning Web Components Developer Guide (Lightning Web ã³ã³ããŒãã³ãéçºè ã¬ã€ã): Lightning Data Service (Lightning ããŒã¿ãµãŒãã¹)
- Lightning Web Components Developer Guide (Lightning Web ã³ã³ããŒãã³ãéçºè ã¬ã€ã): Work with Records Using Base Components (åºæ¬ã³ã³ããŒãã³ãã䜿çšããããŒã¿ã®æäœ)
- Lightning Web Components Developer Guide (Lightning Web ã³ã³ããŒãã³ãéçºè ã¬ã€ã): Use the Wire Service to Get Data (ã¯ã€ã€ãŒãµãŒãã¹ã䜿çšããããŒã¿ã®ååŸ)
- ããã°: Caching and Synchronizing Component Data with Lightning Data Service (Lightning ããŒã¿ãµãŒãã¹ã䜿çšããã³ã³ããŒãã³ãããŒã¿ã®ãã£ãã·ã¥ãšåæ)