【salesforce】Lightning基本知識ーLightningクライアントコントローラー

# Lightningコンポーネント開発
　　本セクションにはLightningコンポーネントの作成とクライアントコントローラーの使い方を紹介いたします。
　　簡単に言えば、下図の赤線中の部分は紹介対象です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480807/27095432-e1b5-2cfe-06ab-4ef8687c4ce8.png)
# Lightningコンポーネントの作成
1. 開発者コンソールを開きます。
　　あなたの名前の下にある [開発者コンソール]、またはクイックアクセスメニュー![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480807/b93bb438-68d9-06ad-0045-0659e3baefdc.png)(設定ギアアイコン) を選択します。

2. Aura コンポーネントの [New Lightning Bundle (新規 Lightning バンドル)] パネルを開きます。
　　[File (ファイル)] | [New (新規)] | [Lightning Component (Lightning コンポーネント)] を選択します。

3. コンポーネントに名前を付けます。
　　たとえば、[Name (名前)] 項目に「lc0001」と入力します。

4. コンポーネントについて説明します。
　　[Description (説明)] 項目を使用してコンポーネントの詳細を追加します。

5. 新しいコンポーネントにコンポーネント設定を追加します。
　　[Component Configuration (コンポーネント設定)] セクションでオプションを好きなだけ選ぶことも、設定を一切選択しないこともできます。

6. [Submit（送信）] をクリックして、コンポーネントを作成します。
　　コンポーネントの作成をキャンセルする場合は、右上にあるパネルの閉じるボックスをクリックします。
**例：**![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480807/9b09a0d6-eb2b-bf10-1dbe-47447bbd6601.png)

7. ソースを貼り付け
　　自動的に開いた「lc0001.cmp」タブのエディターエリアに下記のソースを張り付けて、保存する。（保存方法は「[【salesforce】Classic基本知識ーVisualforceページ作成](https://qiita.com/training_zhang/items/ff00617d310cafb3236d)」を参照ください）

```jsp:lc0001.cmp
<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
	Hello, world!
</aura:component>
```
# Lightningアプリケーション作成
　　作成したLightningコンポーネントをプレビューために、Lightningアプリケーション作成が必要です。

1. Aura コンポーネントの [New Lightning Bundle (新規 Lightning バンドル)] パネルを開きます。
　　[File (ファイル)] | [New (新規)] | [Lightning Application (Lightning アプリケーション)] を選択します。

2. アプリケーションに名前を付けます。
　　たとえば、[Name (名前)] 項目に「FirstLightningApp」と入力します。

3. [Submit（送信）] をクリックして、アプリケーションを作成します。
　　アプリケーションの作成をキャンセルする場合は、右上にあるパネルの閉じるボックスをクリックします。

4. ソースを貼り付け
　　自動的に開いた「FirstLightningApp.app」タブのエディターエリアにソース「FirstLightningApp.app」を張り付けて、作成したコンポーネントをインポートして、保存する。

5. 画面プレビュー
　　開発者コンソール右の「ctrl + shift + 1   APPLICATION」上のPreviewをクリックして、画面をプレビューできます。

```jsp:FirstLightningApp.app
<aura:application >
    <c:lc0001 />
</aura:application>
```

　　以上の手順で簡単なLightningコンポーネントを作成できました。なお、どんな動きもないし、次はクライアントコントローラーを利用して、簡単な動かせるLightningコンポーネントを作ります。

# コンポーネントとクライアントコントローラーの連動
1. 「lc0002.cmp」コンポーネントを作成します。
　　lightningコンポーネントの作成手順で、コードは「lc0002.cmp」を利用して、「lc0002.cmp」コンポーネントを作成します。

2. コントローラーを作成します。
　　開発者コンソール右側の「ctrl + shift + 2   CONTROLLER」をクリックして、または「ctrl + shift + 2」ホットキーを押して、コントローラー編集画面を開きます。「lc0002Controller.js」のソースで編集画面のソースを入り変えます。
3. 画面動作を確認します。
　　「FirstLightningApp.app」アプリケーションに下記のソースで入り替え、プレビューして、画面上のボタンをクリックして、画面動作を確認します。

```jsp:lc0002.cmp
<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
    <aura:attribute name="message" type="String"/>
    <p>Message of the day: {!v.message}</p>
    <div>
        <lightning:button label="You look nice today."
          onclick="{!c.handleClick}"/>
        <lightning:button label="Today is going to be a great day!"
          onclick="{!c.handleClick}"/>
    </div>
</aura:component>
```

```js:lc0002Controller.js
({
    handleClick: function(component, event, helper) {
        var btnClicked = event.getSource();         // the button
        var btnMessage = btnClicked.get("v.label"); // the button's label
        component.set("v.message", btnMessage);     // update our message
    }
})
```

```jsp:FirstLightningApp.app
<aura:application >
    <c:lc0002 />
</aura:application>
```

# まとめ
　　上記の手順で、結構シンプルなLightningコンポーネントとクライアントコントローラーを作成しました。
コンポーネントとクライアントコントローラーの作成手順を習熟できましたと思います。

# 参照資料
[はじめよう、Lightningコンポーネント開発](https://trailhead.salesforce.com/en/users/mnakajima/trailmixes/lets-start-developing-lightning-components)
[Lightning Aura コンポーネント開発者ガイド](https://developer.salesforce.com/docs/atlas.ja-jp.lightning.meta/lightning/intro_framework.htm)