進行状況の追跡を始めよう
Trailhead のホーム
Trailhead のホーム

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 です。私たちにも独自のものがあります。それは、お客様によく知られ親しまれている Visualforce です。それでも Lightning コンポーネントは特別です。その理由についてはこのモジュールの最後までに説明するので、楽しみにしていてください。

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

「これは、単一ページアプリケーションを構築するための最新のフレームワークです」。頭が少しくらくらします。「最新」は単なるマーケティングですよね。では、「単一ページアプリケーション」とは何でしょうか。

私たちは、最新は「単なる」マーケティングとは考えません。「Lightning Experience 向けの開発」モジュールでは、Web アプリケーションの進化について長々と説明しています。それは、デスクトップ上および特にモバイルデバイス上で、Web アプリケーションが単純なページ単位の操作から、ネイティブアプリケーションと同じすべての動作および双方向性を持つ応答性の高いアプリケーションに進化した話です。このインタラクティブなユーザエクスペリエンスを実現するために、最新の Web アプリケーションは、単一の 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 コンポーネントフレームワークは お気に入りのフレームワーク と比較してどうですか?」というものです。このお気に入りのフレームワークに当てはまるものとして、別の最新の JavaScript Web アプリケーションフレームワーク、たとえば、AngularJS、React、または Ember があります。

これらはすばらしいフレームワークです。これらのフレームワークは多くの人に知られており、学習資料もたくさんあります。私たちは、Lightning Platform アプリケーションを構築するのにこれらのフレームワークはすばらしいものであると考えています。驚きですか?

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

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

さらに、率直に言うと、Lightning コンポーネントフレームワークと最新の多くのフレームワークの機能はかなり重複しています。スタイル仕様は異なる場合がありますが、提供される機能は概念的に似ており、重複コードを効果的に実行することもできます。ただし、効率的ではなく作業も容易ではありません。

AngularJS などの汎用フレームワークを検討することもできます。これは、特にデータサービスにおいて、実行基盤となるプラットフォームに依存しないよう設計されています。一方、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 コンポーネントを表示するフロー画面