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

Lightningコンポーネント開発

　　本セクションにはLightningコンポーネントの作成とクライアントコントローラーの使い方を紹介いたします。
　　簡単に言えば、下図の赤線中の部分は紹介対象です。

Lightningコンポーネントの作成

1. 開発者コンソールを開きます。
   　　あなたの名前の下にある [開発者コンソール]、またはクイックアクセスメニュー(設定ギアアイコン) を選択します。

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

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

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

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

6. [Submit（送信）] をクリックして、コンポーネントを作成します。
   　　コンポーネントの作成をキャンセルする場合は、右上にあるパネルの閉じるボックスをクリックします。
   例：

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

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をクリックして、画面をプレビューできます。

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」アプリケーションに下記のソースで入り替え、プレビューして、画面上のボタンをクリックして、画面動作を確認します。

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>

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
    }
})

FirstLightningApp.app

<aura:application >
    <c:lc0002 />
</aura:application>

まとめ

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

参照資料

はじめよう、Lightningコンポーネント開発
Lightning Aura コンポーネント開発者ガイド