Salesforceのaura:componentとは？設定や注意点をご紹介

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アプリケーションを開発するのに必要なフレームワークです。使う機会も多いので、ぜひ活用できるようにしましょう。]]>