コンポーネント属性はtypoに注意

Lightning ComponentではJavaScriptが組み合わさったことでtypoに弱くなっており、現時点ではエラーなどが追いづらい状況なので、注意が必要です。

コンポーネントの属性値について、大文字・小文字が違うケース、typoしているケースについて検証してみました。

　検証用ソースコード

SampleProp.app

<aura:application>
    <(namespace):SamplePropCmp />
</aura:application>

SamplePropCmp.cmp

<aura:component>
    <aura:attribute name="message" type="String" default="No Click." />
    <h1>{!v.message}</h1>
    <ui:button label="Click me!" press="{!c.clickMe}"/>
</aura:component>

SamplePropCmpController.js

({  
    clickMe : function(component, event, helper) {
        // match
        console.log(component.get("v.message"));
        component.set("v.message", 'Click Me!');
        console.log(component.get("v.message"));
        // ignore
        console.log(component.get("v.Message"));
        component.set("v.Message", 'Click Me, Twice!');
        console.log(component.get("v.Message"));
        // typo
        console.log(component.get("v.messege"));
        component.set("v.messege", 'Click Me, Three Times!');
        console.log(component.get("v.messege"));
    }
})

検証結果(Winter'15)

検証結果は下記のようになりました。大文字・小文字が違っていても問題なく値を設定・取得できます。typoしたときはエラーになりません。

ケース	get	set
一致	◯	◯
大文字・小文字が異なる	◯	◯
typoで不一致	エラーにならずundefinedが返される	エラーにならない

追加検証(Spring'15)

Spring'15から大文字・小文字を区別するようになったので、追加検証を行いました。今回の検証で新たに気がついたことがありました。<aura:attribute>で定義されていない属性についても一度setすればgetできるようになっている点です。状況によってはますます混乱しそうな仕様なので気をつけたいところです。

ケース	get	set	set -> get
一致	◯	◯	◯
大文字・小文字が異なる	undefined	◯	◯
typoで不一致	undefined	◯	◯