Aura コンポーネントの使用開始

学習の目的

この単元を完了すると、次のことができるようになります。
  • Lightning コンポーネントフレームワークとは何か、何に使用されるかを説明する。
  • Lightning コンポーネントフレームワークと他の Web アプリケーションフレームワークの 4 つの主な違いを挙げる。
  • Lightning コンポーネントで Salesforce をカスタマイズするために使用できる方法を 5 つ以上挙げる。

Lightning コンポーネントの使用開始

では始めましょう。Lightning コンポーネントのパーティにご参加いただきありがとうございます。これはパーティです。Lightning コンポーネントは私たちが数年かけて構築してきた最もわくわくする強力なアプリケーション開発テクノロジです。大げさな話に聞こえるかも知れませんが、本当なのです。私たちはこれを使って Salesforce アプリケーションと Lightning Experience を構築したからです。Lightning コンポーネントのことを知っていただければ、早く使ってみたいとわくわくされると思います。

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

Lightning コンポーネントフレームワークとは、モバイルデバイス用とデスクトップデバイス用の Web アプリケーションを開発する UI フレームワークです。これは、Lightning Platform アプリケーション用の動的な反応型ユーザインターフェースを使用して単一ページアプリケーションを構築するための最新のフレームワークです。クライアント側では JavaScript、サーバ側 では Apex を使用します。

少し専門用語が多すぎましたね。普通の言葉を使って言い直します。

もう一度、アーキテクチャの概要を見てみましょう。

「Lightning コンポーネントフレームワークは Web アプリケーションを開発するためのフレームワークです」。これなら理解しやすいと思います。アプリケーションフレームワークはコードとサービスのコレクションであり、これを使用して独自のカスタムアプリケーションを容易に作成できます。すべてのコードを自分で記述する必要はありません。世の中には多くのさまざまな Web アプリケーションフレームワークがあります。たとえば、Ruby on Rails、Grails、AngularJS、Django、CakePHP です。Salesforce にも、お客様によく知られ、親しまれている Visualforce という独自のフレームワークがあります。Lightning コンポーネントは特別だと思っています。その理由についてはこのモジュールの最後までに説明するので、楽しみにしていてください。

「モバイルデバイス用およびデスクトップデバイス用の Web アプリケーション」。やはり、これもわかりやすいと思います。ただし、順番が違いますよね? Lightning コンポーネントが誕生し、それを使用してモバイルアプリケーション用の Salesforce プラットフォームが構築されました。モバイルが Lightning コンポーネントフレームワークの核に組み込まれているため、モバイルデバイスとデスクトップデバイスの両方で動作するアプリケーションの開発が他の多くのフレームワークと比べて一段と容易になっています。

「これは、単一ページアプリケーションを構築するための最新のフレームワークです」。さて、ちょっとわからなくなってきましたね。「最新」は売り文句としても、「単一ページアプリケーション」とは何でしょうか。

Salesforce では「最新」を「単なる」売り文句とは考えていません。「Lightning Experience 向けの開発」モジュールでは、デスクトップ上、そして特にモバイルデバイス上で、Web アプリケーションが単純なページ単位の操作から、ネイティブアプリケーションと同じすべての動作と双方向性を持つ応答性の高いアプリケーションに進化した経緯を詳しく説明しています。このインタラクティブなユーザエクスペリエンスを実現するために、最新の Web アプリケーションは、1 つの URL から読み込まれる緊密にバインドされたコードのコレクションとして構築され、不断なく実行されます。この単一ページアプリケーションは、ネイティブアプリケーションとほぼ同じ方法で構築され、配管 (接続) を担うのがフレームワークです。つまり、Lightning コンポーネントフレームワークのようなフレームワークです

「Lightning Platform アプリケーションの動的で反応型ユーザインターフェース」は、Salesforce 上に構築したアプリケーションにまさに前述のアイデアを適用したものです。最後に、「クライアント側では JavaScript、サーバ側では Apex が使用されます」は、文字通りの意味です。「何がどこに行くのか」が明確になっていなくても意味はわかります。これについては、後で説明します。

Aura コンポーネントの例

肝心のコードの説明ではなく、前置きがが長くなってしまいました。Aura コンポーネントプログラミングモデルを使用した実際の Lightning コンポーネントの例を見ながら、これまでの話が何だったのかを説明させていただきます。まず、このコンポーネントは画面にはこんな風に表示されます。

Lightning コンポーネント: 見た目に反して、実はかなりのコードが含まれている

見た目はそれほどではないかもしれませんが、実はかなりのコードが含まれています。このコードを次に示します。これは、後で詳細に説明するコンポーネントのコードです。

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

Aura コンポーネントについてまだ何も知らなくても、このサンプルコードを見ていくつか気になるところがあると思います。まず、これは XML マークアップで、静的 HTML タグとカスタムの Aura コンポーネントタグが混合しています。たとえば、このサンプルの先頭にある <aura:component> タグです。Visualforce を使って作業したことがある方なら、このタグの形式 (namespace: tagName) は見慣れていらっしゃるはずです。後で説明しますが、組み込みコンポーネントはさまざまな名前空間 (aura: (この例の場合)、force:lightning:ui: など) から取得できます。

<lightning:input><lightning:formattedNumber> のようなコンポーネントもありますね。これも Visualforce 開発者ならよく知っているパターンです。Visualforce 開発者でなくても、ここでは、ユーザ入力を収集するのに入力コンポーネントを使用し、参照のみの値を表示するのに他のコンポーネントを使用することに納得していただけると思います。スニペットでは他にもいくつかのコンポーネントが強調表示されています。

  • <lightning:card> は、情報のグループに関するコンテナを作成します。
  • <lightning:formattedDateTime> は、書式設定された日時を表示します。
  • <lightning:relativeDateTime> は、現在の時刻と指定された時刻の相対的な時差を表示します。
メモ

メモ

名前 (空間) とは? lightning 名前空間は、Salesforce Lightning Design System (SLDS) を標準で使用する多くの UI コンポーネントを提供します。可能ならば lightning 名前空間のコンポーネントを使用することをお勧めします。たとえば、<ui:inputText><:inputNumber>の代わりに <lightning:input> を使用します。ほとんどの入力データ型 (テキスト、数値、メールなど) を使用できます。

残りのコンポーネントについては後の単元で説明します。ここで、「slds」で始まるいくつかの CSS クラス名が含まれた静的 HTML が使用されていることに注意してください。これから SLDS を使用してコンポーネントのスタイルを設定します。このモジュールでは SLDS について詳細に説明しませんが、どのような動作をするか、例を見ていただきたいと思います。

Aura コンポーネントのマークアップは XML です。ただし、先ほど JavaScript について触れましたよね? 切り替えスイッチの onchange="{!c.clickReimbursed}" 属性は、実際には便利なチェックボックスで、左右にスライドしてオンとオフの値を表します。つまり「この値が変更されたら、コントローラの clickReimbursed 関数をコールする」という意味です。この接続先のコードを見てみましょう。

({
    clickReimbursed: function(component, event, helper) {
        let expense = component.get("v.expense");
        let updateEvent = component.getEvent("updateExpense");
        updateEvent.setParams({ "expense": expense });
        updateEvent.fire();
    }
})

これはコンポーネントのクライアント側のコントローラで、JavaScript で記述されています。コンポーネントのコントローラ内の clickReimbursed 関数は、コンポーネントのマークアップ内のチェックボックスの onchange="{!c.clickReimbursed}" 属性に対応します。

Aura コンポーネントプログラミングモデルでは、コンポーネントはコードのバンドルです。これには前述のサンプルのようなマークアップを「.cmp リソース」に含めることができます。また、関連付けられた複数のリソースに JavaScript コードを含めることもできます。関連リソースは互いに「自動的に結び付け」られてコンポーネントバンドルを構成します。

次の単元では詳細を説明しますが、ここでは、2 種類の最も重要な Aura コンポーネントコードを確認しました。

Visualforce について

お客様からは「Lightning コンポーネントと Visualforce、どちらを使うべき?」と聞かれることが非常に多いのですが、簡単に言うと、答えは「両方!」です。

Visualforce と Lightning コンポーネントにはそれぞれ強みがあります。その詳細は、「Lightning Experience 向けの開発」モジュールで説明します。このモジュールでは、それぞれの適切な使用法について詳しく説明します。ここででは、長くも短くもない、中間の説明をさせていただきます。

まず、Visualforce が姿を消すことはない、と思ってください。Visualforce のコードはこれからもずっと Salesforce で使用されます。既存の Visualforce アプリケーションを変換する必要はありませんし、Visualforce を使用したアプリケーションの作成をやめる必要もありません。

ただし、場合によっては、そうする必要性が生じる可能性があります。たとえば、Visualforce が誕生したのは、携帯電話のモバイルアプリーションが今のようになるよりずっと以前です。Visualforce でモバイルアプリケーションを開発することは可能ですが、組み込みコンポーネントはモバイル向きではありません。つまり、追加のコードを書かなければなりません。一方、Lightning コンポーネントはモバイルデバイス上で適切に動作するように特別に最適化されています。

前述のように、これについての詳細は「Lightning Experience 向けの開発」モジュールで説明します。Visualforce と Lightning コンポーネントについて質問がある場合は、このモジュールを参照してください。

AngularJS、React、その他の JavaScript フレームワークについて

もう 1 つ、「Lightning コンポーネントフレームワークは「お気に入りの Xx」フレームワークと比べてみてどうですか?」という質問もよくあります。この「お気に入りの XX フレームワーク」には、AngularJS、React、Ember などの他の最新の JavaScript Web アプリケーションフレームワークが入ります。

確かにこれらはすばらしいフレームワークです。幅広く知られていますし、学ぶための資料も豊富にあります。意外に思われるかもしれませんが、実際、Salesforce では Lightning Platform アプリケーションの構築にこれらのフレームワークを使うのはすばらしい方法だと考えています。

これらのフレームワークと Visualforce を使用するなら、いわゆる コンテナページを使って、選んだフレームワークとアプリケーションコードを静的リソースにパッケージ化することをお勧めします。空のコンテナページを使用すると Visualforce が除かれ、選択したフレームワークの全機能を使用できるようになります。

サードパーティの JavaScript フレームワークも Lightning コンポーネントと共に使用できますが、少し手間がかかります。Lightning コンポーネントフレームワークには空ページの概念がなく、データアクセスの実行方法などに関する特別なオプションがあります。また、特定のセキュリティ要件もいくつかあります。

率直に言うと、Lightning コンポーネントフレームワークと最新の多くのフレームワークでは、共通な機能がかなり多いのです。スタイル仕様は異なっても、提供される機能は概念的に似ており、実質的に重複コードを実行していることになります。これは効率的でもなければ、やりやすいこともありません。

AngularJS などの汎用フレームワークを検討することも 1 つの方法です。特にデータサービスでは、実行基盤となるプラットフォームに依存しないよう設計されています。一方、Lightning コンポーネントフレームワークは、Salesforce および Lightning プラットフォームが提供するサービスにネイティブに接続するよう設計されています。アプリケーションをもっと短期間で構築するには、どちらが効率的だと思いますか?

メモ

メモ

ここではアプリケーションフレームワークのみを取り上げてきました。お気に入りの JavaScript グラフライブラリやマップライブラリ、または他の特殊用途のツールキット (特定のセキュリティ要件による) がある場合、最新の JavaScript ライブラリを使って問題ありません。

説明ばかりが続いてしまいましたが、ここからは、Lightning コンポーネントのアプリケーションをリリースできるさまざまな場所を図で確認し、面白いもの、つまりコードを詳しく見ていきましょう。

Lightning コンポーネントを使用できる場所

Lightning コンポーネントを使用して、さまざまな方法で Salesforce 組織をカスタマイズできます。それだけではありません。Lightning コンポーネントを使用して、Salesforce でホストされるスタンドアロンアプリケーションを作成できます。他のプラットフォームでホストされるアプリケーションも作成できます。たとえば、そのプラットフォームのアプリケーションに、作成したアプリケーションを埋め込みます。

Lightning Experience のアプリケーションランチャーにアプリケーションを追加する

Lightning コンポーネントのアプリケーションやカスタムタブはアプリケーションランチャーから使用できます。アプリケーションランチャーにはナビゲーションバーにある アプリケーションランチャーアイコン をクリックしてアクセスし、[すべて表示] を選択するとフルビューが表示されます。

アプリケーションランチャーにコンポーネントを追加する

カスタムアプリケーション (1) をクリックして有効にします。アプリケーション内の項目がナビゲーションバーに表示されます。たとえば、アプリケーションに追加した Lightning コンポーネントのタブが表示されます。アプリケーションランチャーでコンポーネントを使用できるようにするには、タブにコンポーネントを追加する必要があります。Lightning コンポーネントのタブがアプリケーションにない場合、そのタブは [すべての項目] (2) に表示されます。

Lightning Experience と Salesforce アプリケーションナビゲーションにアプリケーションを追加する

前述の例で説明したように、Lightning コンポーネントのタブをアプリケーションに追加すると、そのタブはアプリケーションのナビゲーションバーに項目として表示されます。

メインナビゲーションに組み込みコンポーネントを追加する

Lightning アプリケーションビルダーとエクスペリエンスビルダー用のドラッグアンドドロップコンポーネントを作成する

独自の Lightning コンポーネントまたは AppExchange からインストールした Lightning コンポーネントを使用して、デスクトップ用とモバイルデバイス用のカスタムユーザインターフェースを構築します。

Lightning アプリケーションビルダーとエクスペリエンスビルダー用のドラッグアンドドロップコンポーネントを作成する

Lightning ページに Lightning コンポーネントを追加する

Lightning ページは、Salesforce モバイルアプリケーションまたは Lightning Experience で使用するページを設計できるカスタムレイアウトです。Lightning ページを使用して、アプリケーションのホームページを作成し、お気に入りの Lightning コンポーネント (このモジュールで作成する Expenses (経費) アプリケーションなど) をホームページに追加できます。

Lightning Experience レコードページに Lightning コンポーネントを追加する

このタイトルが示すように、Lightning コンポーネントを追加することで、Lightning Experience レコードページをカスタマイズできます。

タイトルが示すように、Lightning コンポーネントを追加することで、Lightning Experience レコードページをカスタマイズする

Lightning コンポーネントをクイックアクションとして起動する

Lightning コンポーネントを使用してアクションを作成し、そのアクションをオブジェクトのページレイアウトに追加します。これで、レコードページから Lightning コンポーネントにすぐにアクセスできます。

レコードページ上の Lightning コンポーネントのクイックアクション

Lightning コンポーネントでの標準アクションの上書き

Lightning コンポーネントでのアクションの上書きは、Visualforce ページでのアクションの上書きとよく似ています。

Lightning コンポーネントでのアクションの上書き

スタンドアロンアプリケーションを作成する

スタンドアロンアプリケーションは、Salesforce データを使用するコンポーネントで構成され、スタンドアロンの Salesforce 環境とは関係なく使用できます。

スタンドアロンアプリケーションは、Salesforce データを使用するコンポーネントであり、Salesforce アプリケーションとは関係なく使用できる

Visualforce ページ内で Lightning コンポーネントのアプリケーションを実行する

Lightning コンポーネントを Visualforce ページに追加して、両方のソリューションを使用して作成した機能を組み合わせることができます。Lightning コンポーネントを使用して新機能を実装し、それを既存の Visualforce ページで使用できます。

Lightning Out を使用して Lightning コンポーネントのアプリケーションを他のプラットフォームで実行する

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

Heroku の Lightning Out ダイアログ

フロー画面のカスタマイズ

ビジネスプロセスをガイドするフローを作成します。デフォルトでは、入力やラジオボタンなどの単純な項目をフロー画面に追加できます。一方、カスタム Lightning コンポーネントを使用すれば、画面のデザインと機能を完全にカスタマイズできます。カスタム Lightning コンポーネントを表示するフロー画面

無料で学習を続けましょう!
続けるにはアカウントにサインアップしてください。
サインアップすると次のような機能が利用できるようになります。
  • 各自のキャリア目標に合わせてパーソナライズされたおすすめが表示される
  • ハンズオン Challenge やテストでスキルを練習できる
  • 進捗状況を追跡して上司と共有できる
  • メンターやキャリアチャンスと繋がることができる