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

Aura コンポーネントの開発プロセスについて

学習の目的

この単元を完了すると、次のことができるようになります。
  • 開発中の Lightning コンポーネントを表示およびテストするためのハーネスアプリケーションを作成する。
  • Lightning Experience でコンポーネントをホストするための開発アプリケーションを作成する。

Trailhead Playground で [私のドメイン] はすでにオン

Trailhead Playground で [私のドメイン] をオンにしたり、設定を変更しようとしないでください。どの Trailhead Playground でも [私のドメイン] はデフォルトですでに有効です。

Trailhead Playground URL で強調表示された [私のドメイン] の名前

本番組織では、[私のドメイン] で組織に固有のサブドメインを作成できます。[私のドメイン] で、Salesforce から割り当てられたインスタンス URL (https://na17.lightning.force.com など) を、各自が選択したサブドメイン (https://mydomainname.lightning.force.com など) に置換します。

組織でカスタム Lightning コンポーネントを作成する場合やシングルサインオン (SSO) を設定する場合は、[私のドメイン] が必要です。[私のドメイン] についての詳細は、こちらのナレッジ記事を参照してください。本番組織で有効にする方法については、「ユーザ認証」モジュールを参照してください。

Aura コンポーネントの表示

開発中に Aura コンポーネントをプレビューするための簡単な方法はありません。ボタンをクリックしたり、URL に移動したりしても、個々のコンポーネントを表示することはできません。Visualforce では、新しいページの作成や、ページに変更を加えたときのページの再読み込みがとても容易であるため、Visualforce 開発者にとっては、この違いに多少の慣れが必要になる可能性があります。

Aura コンポーネントプログラミングモデルはまったく異なるものです。そのしくみと理由については、「Aura コンポーネントの基本概念」モジュールで説明します。ここでは、開発中にコンポーネントをすばやく読み込んで表示する方法に焦点を当てましょう。

開発中のコンポーネントの「プレビュー」環境を設定できる 2 つの方法について説明します。この 2 つの方法は、目的が異なります。1 つ目の「ハーネスアプリケーションを使用する方法」は容易に設定できるため、Aura コンポーネントの基本を学習するのに適しています。また、Salesforce の「外部」で稼働するコンポーネントを作成する場合、この方法は長期にわたって役立ちます(これが何を意味するかについては、「リソース」を参照してください)。

2 つ目の「Lightning Experience の内部で開発コンテキストを作成する方法」は設定により深く関与するため、コンポーネントの再読み込み時間が長くなります。ただし、Lightning Experience 統合するコンポーネントを開発しながら、Lightning Experience の外部でテストを行うことはできません。長期的には、これを最も頻繁に使用する可能性があります。

開発者コンソールと VS Code

この単元では、開発者コンソールでプレビュー環境を設定し、VS Code で開発環境を設定します。この設定を行うには、前の単元の説明に従って VS Code、Salesforce CLI、Salesforce 拡張機能パックをインストールする必要があります。

メモ

メモ

この単元の後半で、組織にファイルをリリースする VS Code を認証します。組織のユーザ名とパスワードを認識している必要があります。Trailhead Playground のユーザ名とパスワードを取得するには、「Trailhead Playground の管理」モジュールを参照してください。

「ハーネス」アプリケーションの作成

梯子!シンプルに始めましょう。最も軽量の方法を使用して、Aura コンポーネントの開発とプレビューを「ハーネス」アプリケーション (自分のコンポーネントのみを含むスタンドアロンの「my.app」アプリケーション) の内部で実行します。開発中のコンポーネントをラップしているハーネスアプリケーション

ハーネスアプリケーション (1) は、直接アクセス可能な URL を持つシェルとしてのみ存在するスタンドアロンの Lightning アプリケーションです。これには、作業対象の最上位コンポーネントのみが含まれます。図では、新しい経費を作成する My Expenses (私の経費) コンポーネント (2) がこれに該当します(このコンポーネントについては、「Aura コンポーネントの基本」モジュールで確認できます。このモージュールでこのコンポーネントを最初から作成しています)。

ハーネスアプリケーションを作成する手順は、次のとおりです。

  1. 開発者コンソールを開き、[File (ファイル)] | [New (新規)] | [Lightning Application (Lightning アプリケーション)] を選択します。
  2. [New Lightning Bundle (新規 Lightning バンドル)] パネルで、アプリケーション名として 「harnessApp」と入力し、[Submit (実行)] をクリックします。

開発には VS Code を使用する必要があると説明しました。それはそのとおりです。ただし、ここでは、[プレビュー] ボタンのためにのみ開発者コンソールを使用します。梯子! このボタンをクリックすると、新しい (現在は空白の) ウィンドウが開きます。このウィンドウで、コンポーネントを再読み込みし、開発中の変更を確認できます。

ちょっと待ってください。先ほど私は、開発中のコンポーネントを確認するためにクリックできるボタンはないと言いませんでしたか? これは正確には、[プレビュー] ボタンです!

この [プレビュー] ボタンでは、コンポーネントではなく Lightning アプリケーションを確認できます。この 2 つはいくつかの理由で異なります。コンポーネントはアプリケーションに配置されます。次のセクションを参照してください。

最上位コンポーネントの作成

梯子! Salesforce では、「アプリケーション」および「コンポーネント」という用語が頻繁に使用されます。これらの用語がここで作業していることにどのように適用されるかについて説明します。開発者コンソールでスタンドアロンの Lightning アプリケーションを作成しましたが、私たちはこれをハーネスアプリケーションと呼びました。この「アプリケーション」は、コードをほとんど含めない単なるシェルであり、これから作成するコンポーネントへの単なる参照です。

これに配置するコンポーネントが実際の「アプリケーション」であり、これは、Lightning Experience、Salesforce アプリケーションなど、あらゆる場所に追加できる最上位のものです。機能を実現するためのすべての実際のコードがこのコンポーネントまたはその子コンポーネントに入れられます。これをウィジェットと呼んだり、最上位コンポーネントと呼んだり、さまざまな名前で呼ぶことができます。ただし、これをアプリケーションと呼ばないほうがよいでしょう。Lightning コンポーネントと Lightning Experience の「アプリケーション」にはいくつかの特定の意味が含まれているためです。

途方に暮れていますか? 具体的に何かやってみましょう。VS Code でコンポーネントを構築して組織にリリースしていきます。

  1. VS Code を開始します。
  2. Visual Studio Code で、Cmd + Shift + P キー (Mac) または Ctrl + Shift + P キー (Windows または Linux) を押してコマンドパレットを開きます。
  3. SFDX:Create Project と入力し、Enter キーを押します。
  4. Standard project template (default) を選択します。
  5. プロジェクトに MyComponent という名前を付けて、Enter キーを押します。
  6. 任意のフォルダに移動し、[Create Project (プロジェクトを作成)] をクリックしてプロジェクトを保存します。
  7. コマンドパレットをもう一度開き、SFDX:Create Aura Component と入力します。
  8. 新しいコンポーネントに myFirstComponent という名前を付けて、Enter キーを押します。
  9. もう一度 Enter キーを押して、force-app/main/default/aura という保存場所を受け入れます。

    この時点で、force-app/main/default/aura ディレクトリの中に、いくつかのファイルを含む myFirstComponent ディレクトリが表示されるはずです。

    また、force-app/main/default/lwc ディレクトリも表示されます。Lightning Web コンポーネントのファイルは lwc ディレクトリに保存できます。Lightning コンポーネントの作成には、Aura プログラミングモデルと Lightning Web コンポーネントプログラミングモデル の 2 つのプログラミングモデルがあります。このモジュールでは、Aura コンポーネントを中心に説明します。

  10. myFirstComponent ディレクトリに、拡張子が「.cmp」のファイルが 1 つあります。この myFirstComponent.cmp ファイルの内容を次のマークアップに置き換えて、ファイルを保存します。
    <aura:component implements="force:appHostable">
        <p>I solemnly swear I am proficient in JavaScript.</p>
    </aura:component>

次の手順に従って、VS Code を使用して組織を認証し、Aura コンポーネントをリリースします。

  1. コマンドパレットを開いて、SFDX:Authorize an Org と入力し、Enter キーを押します。

    ユーザ名とパスワードの取得については、「Trailhead Playground の管理」モジュールを参照してください。

  2. もう一度 Enter キーを押して、デフォルトのログインオプションを受け入れます。
  3. もう一度 Enter キーを押して、この接続のデフォルトのエイリアスを受け入れます。
  4. ブラウザを開いて組織にログインし、プロンプトが表示されたらアクセスを許可します。正常にログインしたら、VS Code に戻ります。
  5. default ディレクトリを右クリックして、SFDX: Deploy Source to Org を選択します。

    VS Code に、リリースが正常に実行されたことが示されます。SFDX: Deploy Source to Org コマンドが表示されない場合は、VS Code で組織が認証されていません。もう一度試してください。

ここで組織の開発者コンソールに戻ります。ハーネスアプリケーションがまだ開いていない場合は、[File (ファイル)] [Open Lightning Resources (Lightning リソースを開く)] をクリックし、c:harnessApp フォルダを開いて [APPLICATION] を選択し、[Open Selected (選択した項目を開く)] をクリックします。

  1. コンポーネントをハーネスアプリケーションに追加します。harnessApp.app の内容を次のコードに置き換えます。
    <aura:application>
        <c:myFirstComponent/>
    </aura:application>
  2. ファイルを保存します ([File (ファイル)] > [Save (保存)])。
  3. [Preview (プレビュー)] ([Preview (プレビュー)] ボタンを最近使用した場合は [Update Preview (プレビューを更新)]) を選択します。

これは、スタンドアロンモードで Aura コンポーネントを使用するための開発プロセスです。プレビューウィンドウ用のハーネスアプリケーションを作成します。次に、機能またはウィジェットをコンポーネントの内部で作成し、コンポーネントをハーネスアプリケーションに追加します。変更を確認するには、ハーネスアプリケーションのプレビューを再読み込みします。変更のたびにすべての Lightning Experience を再読み込みするよりもはるかに短い時間で済みます。

次の 2 つの点に留意してください。

このプロセスは、Visualforce の場合のように簡単または自動的ではありません。コンポーネントを自分で作成する必要があります。スタブバージョンを自動で作成するための「クイック修正」リンクはありません。また、ハーネスアプリケーションを手動で再読み込みする必要があります。これは自動で再読み込みされません。

もう 1 つ、さらに重要なことは、スタンドアロンアプリケーション (多くの場合、「my.app」と呼ばれる) は、コンポーネントフレームワークとあなたのコンポーネントのみを実行するということです。これは Lightning Experience を読み込まないため、再読み込みの時間が短縮されます。ただし、コンポーネントが Lightning Experience サービスに依存している場合、たとえば、現在のレコード ID を提供したり、ナビゲーションイベントを処理したりしている場合、そのコンポーネントは Lightning Experience の外部で動作しません(その理由については、「Aura コンポーネントの基本概念」モジュールで説明します)。

これは、ほとんどの Lightning コンポーネント開発者にとって非常に大きな欠点です。開発者は大半の時間を、Lightning Experience (または Salesforce アプリケーション) の内部で動作し、それらと統合する何かを構築することにつぎ込んでいます。ですから、似たような軽量のテスト環境を Lightning Experience で作成してみましょう。この環境では、該当の (はるかに大きくなった)「ハーネス」アプリケーションで提供されるすべてのサービスにアクセスできます。

Lightning Experience 開発アプリケーションの作成

梯子! 次の手順では、「In Development」 という Lightning アプリケーションを作成します。このアプリケーションを使用して、開発中の Lightning コンポーネント (および Lightning ページや Visualforce ページなどの他のもの) に Lightning Experience 内からアクセスできます。

In Development アプリケーションの作成

この手順では、開発中のコンポーネントを保持するための Lightning アプリケーションを作成します。

  1. [設定] から、[クイック検索] ボックスにアプリケーションと入力し、[アプリケーションマネージャ] を選択します。

    Lightning Experience アプリケーションマネージャが表示されます。

  2. [新規 Lightning アプリケーション] をクリックし、開発中のコンポーネントのカスタムアプリケーションを作成します。
    • アプリケーション名: In Development (開発中)
    • [API 参照名] は自動的に割り当てられる
    • 説明: Components and pages under development (開発中のコンポーネントとページ)
      新しい Lightning アプリケーションの作成
  3. [次へ] をクリックします。
  4. もう一度 [次へ] をクリックして、アプリケーションオプションのデフォルトを受け入れます。
  5. [次へ] をクリックして、ユーティリティ項目のデフォルトを受け入れます。
  6. [次へ] をクリックして、ナビゲーション項目のデフォルトを受け入れます。
  7. ユーザプロファイルについては、アプリケーションへのアクセスをシステム管理者または組織の開発者向けに作成したプロファイルに制限することを検討します。ユーザインターフェースの最終的な位置にページが配置されるまで、ユーザにページを表示する必要はありません。
  8. [保存して完了] をクリックしてアプリケーションを作成します。

アプリケーションメニューへの In Development アプリケーションの追加

この手順では、アプリケーションをナビゲーションメニューに追加します。これにより、アプリケーションに容易にアクセスできます。

  1. [設定] から、[クイック検索] ボックスに「アプリケーションメニュー」と入力し、[アプリケーションメニュー] を選択します。

    [アプリケーションメニュー] ページが表示されます。

  2. In Development アプリケーションが [アプリケーションランチャーで表示] に設定されていることを確認します。アプリケーションランチャーにアプリケーションを表示するための設定 この作業を行っている間に、項目の配置を変えたい、あるいは使用しないアプリケーションを非表示にしたいなどと思うことがあります。

Lightning コンポーネントタブの作成

この手順では、Lightning コンポーネントを表示する新しいタブを作成し、そのタブを In Development アプリケーションに追加します。

  1. [設定] から、[クイック検索] ボックスにタブと入力し、[タブ] を選択します。

    [カスタムタブ] ページが表示されます。

  2. [Lightning コンポーネントタブ] セクションで [新規] をクリックし、現在開発中のページのカスタムタブを作成します。
    • Lightning コンポーネント: c:myFirstComponent
    • タブの表示ラベル: My First Component (私の最初のコンポーネント)
    • [タブ名] は自動的に割り当てられます。
    • 好きなタブのスタイルを選択します。
    • 説明: A simple component (簡単なコンポーネント)
      カスタムの Lightning コンポーネントタブの作成
  3. システム管理者プロファイルのみにタブが表示されるようにします。カスタムタブの表示の設定
  4. [設定] から、[クイック検索] ボックスにアプリケーションと入力し、[アプリケーションマネージャ] を選択します。
  5. In Development アプリケーションの右側にあるドロップダウンメニューから [編集] を選択します。
  6. [ナビゲーション項目] パネルで、[My First Component (私の最初のコンポーネント)] タブを [選択済みの項目] リストに追加します。
  7. [保存] をクリックします。
  8. ページ右上の [戻る] をクリックして、[設定] に戻ります。

アプリケーションにさらにタブを追加するには、この最後のプロセスを繰り返すのみで済みます。

Lightning Experience でコンポーネントを表示できるようになりました。アプリケーションランチャーから [In Development] アプリケーションを見つけて選択します。アプリケーションが利用可能になると、[My First Component (私の最初のコンポーネント)] タブがアプリケーションのタブバーの最初の項目になります。 In Development アプリケーションの myFirstComponent タブ コンポーネントを変更するたびに、ブラウザの再読み込みコマンドを使用して Lightning Experience を再読み込みします。

タブへのコンポーネントの追加は、Lightning コンポーネントを Lightning Experience に統合できる 1 つの方法です。これが役立つのは、機能のコンテキストが一般的な場合です。たとえば、機能が取引先などの特定のオブジェクト種別に関連付けられていない場合や、機能を個々のレコードで使用することを目的としていない場合です。

これらを実際に行うコンポーネントも作成できますが、別のプロセスに従ってコンポーネントを Lightning Experience の適切な場所に追加する必要があります。たとえば、コンポーネントで特定の取引先レコードを使用する必要がある場合、コンポーネントを取引先ページレイアウトに追加するか、コンポーネントを取引先オブジェクトのクイックアクションとして追加できます。

Lightning Experience 内の他の場所でコンポーネントにアクセスする必要がある場合は、「リソース」を参照し、コンポーネントに追加する必要があるコードを含め、コンポーネントをユーザインターフェースに追加するための適切な手順を確認してください。

留意すべき原則

「Aura コンポーネントの基本概念」モジュールでは、Aura コンポーネントプログラミングモデルの詳細について説明し、Visualforce の概念を Aura コンポーネントの同様の機能に対応付けています。このモジュールに進む前に、次の点に留意してください。

Aura コンポーネントは Visualforce よりも新しい

Visualforce は、Aura コンポーネントプログラミングモデルよりも古くからあります。つまり、まだ開発の途上にあるということです。過剰な期待を抱かずに、随時追加される機能を楽しみにお待ちください。

オーバースペックの「ソリューション」にしない

シュート!最初に Aura コンポーネントを開発するときは小さいものから始めましょう。たとえ Visualforce のエキスパート開発者であったとしても、Aura コンポーネントの専門知識をはるかに超えた場合、何らかの作業のやり直しが必要になる可能性があります。

Visualforce コードを Aura コンポーネント形式で記述しない

シュート!Lightning コンポーネントの優れたコードの設計とアーキテクチャは、Visualforce の優れたコードとは別物です。Visualforce の設計を Aura コンポーネントに当てはめることはできますが、それは丸い穴に無理やり四角い杭を打ち込むようなものです。これは困難な作業であり、最終的に作業を投げ出すことになるでしょう。Aura コンポーネントの方法を習得することに努力を注ぐほうが得策です。

アラモを忘れるな

ここで言うこの言葉の意味は、テキサス人にとっての意味とは少し異なります。勝ち目のない戦いからは、撤退するのが身のためです。Aura コンポーネントの壁に阻まれていることに気づいたなら、その場から引いて、部隊を再編成したほうがよいでしょう。

梯子! 1 日かけて「Aura コンポーネントの基本」モジュールまたは「Lightning Web コンポーネントの基本」に取り組んでください。Visualforce とは結局のところ大きく異なるフレームワークの中味について、基本を学びましょう。準備を万全にしたうえで戦場に戻るように計画された戦略的な撤退は決して敗北ではありません。むしろ勝利への道筋です。