Lightningコンポーネント (cmp)

**Lightningコンポーネントで開発する場合はMyDomainの登録を忘れないように（作成した後は、「私のドメイン」設定からユーザーにリリースするのを忘れないように）**

####aura:componentタグ
controllerにはサーバー側Apexクラス名を指定する。extendsを使って継承することも可能

[implementsの種類はここから](https://developer.salesforce.com/docs/atlas.ja-jp.lightning.meta/lightning/ref_interfaces.htm)

```html
<aura:component implements="flexipage:availableForAllPageTypes,force:hasRecordId" 
access="global" controller="Xxx_LC_Ctrl" extends="c:Xxx_CommonUtil">
```

[新規] や「編集など]の既存の標準ボタンを上書きするコンポーネントを作成する場合h `lightning:actionOverride` を実装する。

####基本的な構造
特にルールはないが、下記がお薦め

```html
<aura:component implements="flexipage:availableForAllPageTypes,force:hasRecordId" access="global">
  <!-- attribute -->
  <aura:attribute name="recordId" type="String"/>
  ....

  <!-- handler -->
  <aura:handler name="init" value="{!this}" action="{!c.init}" />
  ....

  <!-- event -->  
  <aura:handler name="xxxEvent" event="c:xxEvent" action="{!c.showOpenSearchDialog}" />

  <!-- contents -->
  <div>
    ...  コンポーネントのHTMLタグ
  </div>
</aura:component> 
```

####Lightningタブに登録するコンポーネント
Lightningタブに登録するコンポーネントは、appHostableをimplementsする必要がある。また MyDomainを作成する必要がある。
*注意: Lightningタブ化できるコンポーネントが組織に1つもない場合は、タブメニューに「Lightningタブ」は出てこない（「Lightningページ」のみ）*

```html
<aura:component implements="force:appHostable" access="global">
```

####属性定義
nameとtypeは必須。typeには String, Boolean, Date, Datetime, Integer, Long, Object, オブジェクト名（Account, Opportunity）などが使える

[aura:attribute](https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/ref_aura_attribute.htm)
[type](https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/ref_attr_types_basic.htm)
`<aura:attribute name="recordId" type="String" default="xxx"/>`
####属性の参照
[Using expressions](https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/expr_overview.htm)

```java
{!v.recordId}
{!v.listvalue[0]}  //リスト値の参照
{!v.location == '/active' ? 'selected' : ''}  //条件
isTrue="{!v.files.length==0}"  //v.filesはarray
// ="slds-xx {!v.classname}"といった指定はNG
{! 'slds-xx ' + v.classname}  
✖️ {! isEditable && isSuccess ? 'xx':'xx'} //この指定はNG
◯ {! and(isEditable, isSuccess) ? 'xx':'xx'} //and()を使う。条件は2つしか指定できないので、3つある場合は and()をネストさせること。 => and(A, and(B,C))
```

####外部JS、CSSの読み込み
静的リソースから読み込み

```html

```

####繰り返し
[aura:iteration](https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/aura_compref_aura_iteration.htm)を使う
ループ内の変数には v を付けないことに注意。
カウンタには indexVar属性を利用。0から始まる

```html:
<aura:iteration items="{!v.metadata}" var="field" indexVar="indx">
  <div class="slds-size--1-of-2">
    <div class="slds-grid">
      <div class="slds-size--1-of-3">{!indx}</div> //0,1,2..
      <div class="slds-size--1-of-3">{!field.Label}</div>
      <div class="slds-size--1-of-3">{!field.ApiName}</div>
    </div>    
  </div>
</aura:iteration>
```
####IDの指定
aura:idを使ってidを指定すると、コントローラでcmp.find()を使ってコンポーネントを取得できるようになる。
コンポーネント以外の通常のタグにも指定可能。

```html 
<lightning:button aura:id="okbtn" variant="brand" 
 onclick="{!c.xx}" />
<button aura:id="cancelBtn" onclick="{!c.xxx}"`
```

```java 
var okbtn = cmp.find('okbtn');
var cancelbtn = cmp.find('cancelBtn').getElement();
```

<font color="red">aura:idの指定にはexpression表記({!v.xxid})は使えないことに注意する。リテラルのみ</font>


####IF文
<aura:if>を使う(aura:renderIfはdeprecated)

```html
<aura:If isTrue="{!(tab.Type=='Summary')}">
  12345
</aura:If>

<aura:If isTrue="{!(v.files.length>0)}">
  12345
<aura:set attribute="else">
  56789
</aura:set>
</aura:If>

<aura:If isTrue="{!(item.DataType=='Picklist')}">
  12345
  <aura:set attribute="else">
    6789 （注：このタグのBody部をnull状態で実行するとエラーになる）
  </aura:set>
</aura:If>

```

####カスタムラベル
cを付けるところがミソ
`{!$Label.c.XXX_XXXX}`

####HTMLタブをunescapeして表示
[ここを参照](http://qiita.com/TaigarAndDragon/items/3f9196e2915904b5b24a#unescape)

####システムエラーのキャッチとコンソールへの表示
```html
<aura:handler event="aura:systemError" action="{!c.logSystemError}"/>
```

```java
/*
 * log system error
 */
logSystemError : function(cmp, event, helper){
    console.log(event.getParams().auraError.message);
    console.log(event.getParams().auraError.stackTrace);
}

```