yujiroのプログラミング

勉強内容をアウトプットし、サボらないようにする為のブログ

<DAY246>Lightning コンポーネントフレームワークとは

\ Follow me!! /

●10/24(木)
●学習日数 246日
●学習時間(本日)3時間
●累計学習時間 1007.0時間
●一日あたりの平均学習時間 4.09時間

f:id:yujiro0320:20190911192439j:plain

Lightning コンポーネントフレームワークとは

Lightning コンポーネントフレームワークとは、モバイルデバイス用およびデスクトップデバイス用の Web アプリケーションを開発する UI フレームワークです。。クライアント側では JavaScript、サーバ側では Apex を使用します。
世の中には様々なWEBフレームワークがある。raisなど。
salesforceではVisualforce が有名。
それと比較しても Lightning コンポーネントは特別。
Lightning コンポーネントはモバイルデバイス上で適切に動作するように特別に最適化されています。

Aura コンポーネントの例

Aura コンポーネントプログラミングモデルを使用した実際の Lightning コンポーネントの例を見ながら、これまで話したことがどのようなものかを説明します。まず、このコンポーネントが画面にどのように表示されるかを次に示します。

f:id:yujiro0320:20191024180819p:plain

<aura:component>
    <aura:attribute name="expense" type="Expense__c"/>
    <aura:registerEvent name="updateExpense" type="c:expensesItemUpdate"/>
    <!-- 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>

静的 HTML タグとカスタムの Aura コンポーネントタグが混合しています.

Lightning Out を使用して Lightning コンポーネントのアプリケーションを他のプラットフォームで実行する
Lightning Out は Lightning アプリケーションを拡張する機能です。これは、任意のリモート Web コンテナに Lightning コンポーネントを表示するためのブリッジとして機能します。つまり、外部サイト (Sharepoint、SAP など) の内部、またはプラットフォーム上の他の場所 (Heroku など) で Lightning コンポーネントを使用できます。

コンポーネントの定義

helloWorld — コンポーネントバンドル
helloWorld.cmp — コンポーネントの定義
helloWorldController.js — コンポーネントのコントローラ (メイン JavaScript ファイル)
helloWorldHelper.js — コンポーネントのヘルパー (セカンダリ JavaScript ファイル)
helloWorld.css — コンポーネントのスタイル

アプリケーションとは?(拡張子がApp)

コンポーネントについて理解できたので、アプリケーションについて説明することは難しくありません。アプリケーションは単に特殊なコンポーネントです。アプリケーションとは、次の 2 点のみが異なるコンポーネントと考えることができます。

アプリケーションは タグの代わりに タグを使用する。
アプリケーションの場合にのみ開発者コンソールに [Preview (プレビュー)] ボタンが表示される。

コンポーネントの作成

開発コンソールから。トリガーなどと同じように作成する
f:id:yujiro0320:20191025154219p:plain

ここで開ける
f:id:yujiro0320:20191025154257p:plain

対象ファイルを開いた状態で。
ここで削除できる
f:id:yujiro0320:20191025154354p:plain