Lightningコンポーネント開発

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

Lightningコンポーネントの作成

開発者コンソールを開きます。
　　あなたの名前の下にある [開発者コンソール]、またはクイックアクセスメニュー(設定ギアアイコン) を選択します。
Aura コンポーネントの [New Lightning Bundle (新規 Lightning バンドル)] パネルを開きます。
　　[File (ファイル)] | [New (新規)] | [Lightning Component (Lightning コンポーネント)] を選択します。
コンポーネントに名前を付けます。
　　たとえば、[Name (名前)] 項目に「lc0001」と入力します。
コンポーネントについて説明します。
　　[Description (説明)] 項目を使用してコンポーネントの詳細を追加します。
新しいコンポーネントにコンポーネント設定を追加します。
　　[Component Configuration (コンポーネント設定)] セクションでオプションを好きなだけ選ぶことも、設定を一切選択しないこともできます。
[Submit（送信）] をクリックして、コンポーネントを作成します。
　　コンポーネントの作成をキャンセルする場合は、右上にあるパネルの閉じるボックスをクリックします。
例：
ソースを貼り付け
　　自動的に開いた「lc0001.cmp」タブのエディターエリアに下記のソースを張り付けて、保存する。（保存方法は「【salesforce】Classic基本知識ーVisualforceページ作成」を参照ください）

lc0001.cmp

<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
	Hello, world!
</aura:component>

Lightningアプリケーション作成

　　作成したLightningコンポーネントをプレビューために、Lightningアプリケーション作成が必要です。

Aura コンポーネントの [New Lightning Bundle (新規 Lightning バンドル)] パネルを開きます。
　　[File (ファイル)] | [New (新規)] | [Lightning Application (Lightning アプリケーション)] を選択します。
アプリケーションに名前を付けます。
　　たとえば、[Name (名前)] 項目に「FirstLightningApp」と入力します。
[Submit（送信）] をクリックして、アプリケーションを作成します。
　　アプリケーションの作成をキャンセルする場合は、右上にあるパネルの閉じるボックスをクリックします。
ソースを貼り付け
　　自動的に開いた「FirstLightningApp.app」タブのエディターエリアにソース「FirstLightningApp.app」を張り付けて、作成したコンポーネントをインポートして、保存する。
画面プレビュー
　　開発者コンソール右の「ctrl + shift + 1 APPLICATION」上のPreviewをクリックして、画面をプレビューできます。

FirstLightningApp.app

<aura:application >
    <c:lc0001 />
</aura:application>

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

コンポーネントとクライアントコントローラーの連動

「lc0002.cmp」コンポーネントを作成します。
　　lightningコンポーネントの作成手順で、コードは「lc0002.cmp」を利用して、「lc0002.cmp」コンポーネントを作成します。
コントローラーを作成します。
　　開発者コンソール右側の「ctrl + shift + 2 CONTROLLER」をクリックして、または「ctrl + shift + 2」ホットキーを押して、コントローラー編集画面を開きます。「lc0002Controller.js」のソースで編集画面のソースを入り変えます。
画面動作を確認します。
　　「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 コンポーネント開発者ガイド