この記事の目次
Salesforceのaura:componentとは？
Salesforceのaura:componentとは、アプリケーションの再利用可能な自己完結型のユニットです。テキストからアプリケーション全体などさまざまな種類があります。
フレームワークは事前に構成したcomponentが含まれます。例として、Lightning Design Systemを設定したcomponentは、lightningという名前で使用可能です。Lightning Design Systemを設定したaura:componentはLightning componentとも呼ばれます。
aura:componentには、他の種類のcomponent以外に、HTMLやCSS、javaScript、その他WEB対応コードを使用することができます。
Salesforceのaura:componentの概要
Salesforceのaura:componentの設定方法についてサンプルを用いて説明します。componentには、Lightningをフレームワークの単位とします。componentは、実装の細部がカプセル化されているのです。
componentのコンシューマがアプリケーションの構成に集中してます。しかし、作成者はイノベーションに取り組み、コンシューマの作業を遮らず、変更が可能です。Salesforceのaura:componentのサンプルコードをいくつかに分けて説明します。
サンプルコード「CampingList出力」について
Salesforceのaura:componentのサンプルについて紹介します。camping.cmp、campingHeader.cmp、campingList.cmp、campingHeader.css作成します。CampingListを出力するサンプルコードになります。＜aura:component＞
＜c:campingHeader/＞
＜c:campingList/＞
＜/aura:component＞
＜aura:component＞
＜h1＞Camping List＜/h1＞
＜/aura:component＞
＜aura:component＞
＜ol＞
＜li＞Bug Spray＜/li＞
＜li＞Bear Repellant＜/li＞
＜li＞Goat Food＜/li＞
＜/ol＞
＜/aura:component＞
h1.THIS {
font-size: 18px;
}Salesforceのaura:componentの注意点
Salesforceのaura:componentでの注意点をいくつか説明します。Salesforceでのaura:componentでは、デフォルト設定を行うようにしましょう。行わない場合、エラーが起きます。
また、チェックボックスの属性はCheckedにするようにしましょう。Valueではエラーが出ます。
具体的には、「Packed__cのInputの属性でValueで{!v.newItem.Packed__c}」と記載すると、「The campingList component doesn’t appear to have a Packed checkbox field in the form using a Lightning Base component.」というエラーが帰ってきます。
デフォルト設定の注意点の例
デフォルト設定をしてコードが正常に動くサンプルです。＜aura:component＞
＜aura:attribute name="Item" type="Camping_Item__c" required="true"
default="{Name:'Tent', Price__c:100, Quantity__c:1, Packed__c:false}"/＞
＜p＞Name:＜ui:outputText value="{!v.item.Name}"/＞＜/p＞
＜p＞Price:＜lightning:formattedNumber value="{!v.Item.Price__c}" style="currency"/＞＜/p＞
＜p＞Quantity:＜lightning:formattedNumber value="{!v.Item.Quantity__c}"/＞＜/p＞
デフォルト設定の注意点の例の続き
デフォルト設定をして、コードが正常に動くサンプルの続きです。 ＜p＞＜lightning:input type="toggle" label="Packed?" name="Packed" checked="{!v.Item.Packed__c}"/＞＜/p＞
＜lightning:button label="Packed!" onclick="{!c.packItem}"/＞
＜/aura:component＞
({
packItem : function(component, event, helper) {
component.set("v.Item.Packed__c",true);
var btnClicked = event.getSource();
btnClicked.set("v.disabled",true);
},
})チェックボックスの属性についての注意点の例
チェックボックスの属性に関する注意点のサンプルコードです。＜aura:component＞
＜lightning:layout class="slds-page-header slds-page-header--object-home"＞
＜lightning:layoutItem＞
＜lightning:icon iconName="action:goal" alternativeText="CampingItem"/＞
＜/lightning:layoutItem＞チェックボックスの属性についての注意点の例の続き
サンプルコードの続きです。 ＜lightning:layoutItem padding="horizontal-small"＞
＜div class="page-section page-header"＞
＜h1 class="slds-text-heading--label"＞Camping＜/h1＞
＜h2 class="slds-text-heading--medium"＞Camping Item＜/h2＞
＜/div＞
＜/lightning:layoutItem＞
＜/lightning:layout＞
＜/aura:component＞
＜aura:component＞
＜aura:attribute name="item" type="Camping_Item__c"/＞
＜lightning:card title="Camping"＞サンプルコードの続き
サンプル「チェックボックスの注意点」の続きです。 ＜p class="slds-p-horizontal--small"＞
＜p＞Name:＜ui:outputText value="{!v.item.Name}"/＞＜/p＞
＜p＞Price:＜lightning:formattedNumber style="currency" value="{!v.item.P
rice__c}" /＞＜/p＞
＜p＞Quantity:＜lightning:formattedNumber value="{!v.item.Quantity__
c}"/＞＜/p＞
＜p＞＜lightning:input type="checkbox" label="Packed?" name="Packed" ch
ecked="
{!v.item.Packed__c}"/＞＜/p＞
＜/p＞
＜/lightning:card＞
＜/aura:component＞サンプルコードの続き部分
チェックボックスの属性に関する注意点のサンプルコードの続きです。＜aura:component＞
＜aura:attribute name="items" type="Camping_Item__c[]"/＞
＜aura:attribute name="newItem" type="Camping_Item__c"
default="{'sobjectType':'Camping_Item__c','Name':'','Price__c': 0,'Quantity__c': 0,'Packed__c':false}"/＞
＜div aria-labelledby="newCampingItem"＞
＜fieldset class="slds-box slds-theme--default slds-container--small"＞
チェックボックスの属性に関する注意点のサンプルの続き
サンプルコードの続きです。 ＜legend id="newCampingItem" class="slds-text-heading--small slds-p-vertical--medium"＞
Add CampingItem
＜/legend＞
＜form class="slds-form--stacked"＞
＜lightning:input aura:id="CampingItem" label="CampingName" name="campingname" value="{!v.newItem.Name}" required="true"/＞
属性に関する注意点のサンプルコードの続き部分
サンプルコードの続きです。 ＜lightning:input aura:id="CampingItem" type="number" label="Price" name="campingprice" value="{!v.newItem.Price__c}" min="1" formatter="currency" step="1"/＞
＜lightning:input aura:id="CampingItem" type="number" label="Quantity" name="campingquantity" value="{!v.newItem.Quantity__c}" min="1" step="1"/＞
サンプルコードの続きの途中
属性に関する注意点のサンプルコードの続きです。 ＜lightning:input aura:id="CampingItem" type="checkbox" label="Packed" class="slds-p-around--small" name="campingpacked" checked="{!v.newItem.Packed__c}"/＞
＜lightning:button label="作成" onclick="{!c.clickCreateItem}"/＞
＜/form＞
＜/fieldset＞
＜/div＞
＜aura:iteration items="{!v.items}" var="item"＞
＜c:campingListItem item="{!item}"/＞
＜/aura:iteration＞
＜/aura:component＞サンプルコードのjavaScript部分
サンプルコードの続きです。({
clickCreateItem : function(component, event, helper) {
var validCamping = component.find('CampingItem').reduce(function(validsoFar,inputCmp){
inputCmp.showHelpMessageIfInvalid();
return validsoFar && inputCmp.get('v.validity').valid;
},true );
if (validCamping) {
var newCamping = component.get("v.newItem");
var theCamping = component.get("v.items");
var addCamping = JSON.parse(JSON.stringify(newCamping));
サンプルコードのjavaScript部分2
チェックボックスの属性に関する注意点のサンプルのjavaScript部分の続きです。 theCamping.push(addCamping);
component.set("v.items",theCamping);
component.set("v.newItem",{ 'sobjectType': 'Camping_Item__c',
'Name': '',
'Quantity__c': 0,
'Price__c': 0,
'Packed__c': false});
}
},
})Salesforceのaura:componentを活用しよう
今回は、Salesforceのaura:componentについて紹介しました。
アプリケーションを自己完結型の再利用できるユニットとなっているため、モバイルデバイスやパソコン用のデバイスのWebアプリケーションを開発するのに必要なフレームワークです。使う機会も多いので、ぜひ活用できるようにしましょう。]]>
