【salesforce】Lightning基本知識ーLightningバックエンドコントローラー

# Lightningコンポーネント開発
　　本セクションにはLightningコンポーネントの作成とクライアントコントローラーの使い方を紹介いたします。
　　簡単に言えば、下図の赤線中の部分は紹介対象です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480807/2b907667-11a9-88aa-d6a1-a031e3315f02.png)

# Lightningコンポーネントとサーバ間の通信流れ
　　Lightningコンポーネントから直接サーバへ通信できない、必ずクライアントコントローラー（JavaScriptのController）を経由して、サーバへ通信しなければならない。

# Lightningバックエンドコントローラー作成
　　記事[【salesforce】Lightning基本知識ーLightningクライアントコントローラー](https://qiita.com/training_zhang/items/a2df87a2b488119720ac)に、簡単なコンポーネントとクライアントコントローラー作成手順を紹介いたしましたので、こちらのコンポーネントとクライアントコントローラー作成手順は割愛します。

- 事前準備
　　下記二つオブジェクトを作成する。

    - Expense
    - Camping Item

　　オブジェクト情報

| No.              |       項目名              |    値             |
|:-----------------|:-------------------------|:------------------|
| 1                |       表示ラベル　        |      Expense      |
| 2                | 表示ラベル(複数形)        |     Expenses      |
| 3                | 母音で始まる場合はチェック |       checked        |
| 4                |   項目１                 |       Amount      |
| 5                |   項目２                 |       Client      |
| 6                |   項目３                 |       Date        |
| 7                |   項目４                 |       Reimbursed  |

　　項目詳細下記の通り

| 項目名           |       データ型         |    サイズ        |   必須  | デフォルト値 |
|:-----------------|:---------------------:|:----------------|:--------|:------------|
| Amount           |Number　  　           |      (16,2)      |   Yes　|  -    |
| Client           |Text    　  　         |     50           |   Yes  |  -    |
| Date             |Date    　  　         |       -          |   Yes  |  -    |
| Reimbursed       |Checkbox　  　         |       -          |   -    |  -    |


| No.              |       項目名              |    値             |
|:-----------------|-------------------------:|:------------------|
| 1                |       表示ラベル　        |      Camping Item |
| 2                | 表示ラベル(複数形)        |     Camping Items |
| 3                | 母音で始まる場合はチェック |       Unchecked   |
| 4                |   項目１                 |       Quantity    |
| 5                |   項目２                 |       Price       |
| 6                |   項目２                 |       Packed      |


| 項目名           |       データ型         |    サイズ        |   必須  | デフォルト値 |
|:-----------------|:---------------------:|:----------------|:--------|:------------|
| Quantity         |Number　  　           |      (18,0)      |   Yes　|  -    |
| Price            |Currency　  　         |     (16,2)       |   Yes  |  -    |
| Packed           |Checkbox　  　         |       -          |   -    |  Unchecked    |

- コンポーネント作成
　　下記のソース張り付けて、「lc0003.cmp」コンポーネントを作成する。

```jsp:lc0003.cmp
<aura:component implements="force:appHostable">
    <aura:attribute name="expense" type="Expense__c"/>
    <!-- Color the item green if the expense is reimbursed -->
    <lightning:card title="{!v.expense.Name}" iconName="standard:scan_card"
                    class="{!v.expense.Reimbursed__c ?
                           'slds-theme--success' : ''}">
        <aura:set attribute="footer">
            <p>Date: <lightning:formattedDateTime value="{!v.formatdate}"/></p>
            <p class="slds-text-title"><lightning:relativeDateTime value="{!v.formatdate}"/></p>
        </aura:set>
        <p class="slds-text-heading--medium slds-p-horizontal--small">
            Amount: <lightning:formattedNumber value="{!v.expense.Amount__c}" style="currency"/>
        </p>
        <p class="slds-p-horizontal--small">
           Client: {!v.expense.Client__c}
        </p>
        <p>
            <lightning:input type="toggle" 
                             label="Reimbursed?"
                             name="reimbursed"
                             class="slds-p-around--small"
                             checked="{!v.expense.Reimbursed__c}"
                             messageToggleActive="Yes"
                             messageToggleInactive="No"
                             onchange="{!c.clickReimbursed}"/>
        </p>
    </lightning:card>
</aura:component>
```

- クライアントコントローラー作成
- バックエンドコンポーネント作成
- 動作確認

# 参考資料
[Aura コンポーネントの基本](https://trailhead.salesforce.com/ja/content/learn/modules/lex_dev_lc_basics)
[Build a Lightning Component to Override a Standard Action](https://trailhead.salesforce.com/ja/content/learn/projects/workshop-override-standard-action)
　　※「Install the Trailhead Package 」の場合、リンク直接クリックしないで、自分のplaygroupの「.com」直後に「/packagingSetupUI/ipLanding.app?apvId=04t6A000000SG0F」を貼り付けて、「Enter」キーをクリックして、インストール画面に遷移できます。
[クイックスタート: Aura コンポーネント](https://trailhead.salesforce.com/ja/content/learn/projects/quickstart-lightning-components)