Aura コンポーネントの作成と編集

ついにコードを作成するときがきました。#finally!

Aura コンポーネントコードを作成するには、まずコードを作成するための設定を行います。幸いなことに、これは非常に簡単です。組織で、[あなたの名前] またはクイックアクセスメニュー () から開発者コンソールを開きます。

Lightning Experience	Salesforce Classic

これで、Aura コンポーネントコードを作成する準備ができました。

では、何か作成してみましょう。[File (ファイル)] | [New (新規)] | [Lightning Component (Lightning コンポーネント)] を選択して、Aura コンポーネントを作成します。[New Lightning Bundle (新規 Lightning バンドル)] パネルで、コンポーネント名として helloWorldと入力し、[Submit (実行)] をクリックします。

これにより、新しい helloWorld コンポーネントバンドルが作成されて、2 つのタブが開きます。helloWorld タブを閉じて、helloWorld.cmp タブを開いたままにします。

helloWorld.cmp には、Aura コンポーネント (<aura:component>) の開始タグと終了タグが含まれています。これらのタグの間に、次のマークアップを追加して保存します。

<p>Hello Lightning!</p>

コンポーネントのマークアップは次のようになります。

やりましたね。最初の Aura コンポーネントです。このコンポーネントがどのようなものかを確認するにはどうすればよいでしょうか?

その方法は、一言でいえばトリッキーです。コンポーネントを直接実行して、その動作を確認することはできません。代わりに、コンポーネントをコンテナアプリケーション (略してコンテナ) 内で実行する必要があります。コンテナの例は、Lightning Experience アプリケーション、Salesforce アプリケーション、または Lightning アプリケーションビルダーで作成したアプリケーションです。基本的に、前の単元の最後に出てきたアプリケーションはすべてコンテナです。コンポーネントをこれらのコンテナのいずれかに追加し、そのコンテナ内でコンポーネントにアクセスします。

コンテナについては後で詳しく説明します (他の Lightning コンポーネントモジュールでも説明があります)。ここでは、簡単なアプリケーションを作成しましょう。

[File (ファイル)] | [New (新規)] | [Lightning Application (Lightning アプリケーション)] を選択して、新しい Lightning アプリケーションを作成します。[New Lightning Bundle (新規 Lightning バンドル)] パネルで、アプリケーション名として harnessApp と入力し、[Submit (実行)] をクリックします。

これにより、新しい harnessApp バンドルが作成されて、2 つのタブが開きます。harnessApp タブを閉じて、harnessApp.app タブを開いたままにします。

harnessApp.app には、Lightning アプリケーション (<aura:application>) の開始タグと終了タグが含まれています。これらのタグの間に、次のマークアップを追加して保存します。

<c:helloWorld/>

これにより、前に作成した helloWorld コンポーネントが harnessApp アプリケーションに追加されます。

一見簡単そうに見えるこのアプリケーションについて説明する前に、開発者コンソールで harnessApp.app タブと helloWorld.cmp タブをクリックして何度か切り替えてみましょう。マークアップ以外にどのような違いに気づきましたか?

それは [Preview (プレビュー)] ボタンです。アプリケーションにはありますが、コンポーネントにはありません。このボタンをクリックすると、別のブラウザウィンドウが開き、アプリケーションが表示されます。

うまくいっていますね。これは単なる「hello world」です。マークアップは大したことありませんが、ここにはいくつかの興味深い点があります。

開発者コンソールから開始してみましょう。開発者コンソールを使用して Visualforce または Apex を記述したことがあれば、Lightning バンドルの編集ウィンドウの右側にあるパレットに他のコントロールが表示されていることに気付いたと思います。[Create (作成)] という表示ラベルの付いた各ボタンは、バンドルに追加できる各種リソースを表します。リソースとバンドルについては次のセクションで説明します。現時点では、開発者コンソールで簡単にこれらを作成して切り替えることができるということだけを覚えておいてください。

実際、開発者コンソールには Aura コンポーネントを操作する数多くの機能があります。[File (ファイル)] | [Open (開く)] | [Lightning Resources (Lightning リソース)] で、多くの Lightning リソースを一度にすべて開くこともできます。とても便利な方法です。

開発者コンソールは、Lightning コードを作成するのに適した場所です。このモジュールの残りの部分では開発者コンソールを操作します。ただし、Lightning リソースは Tooling API でアクセスできるため、他の方法で作成・編集することができます。Salesforce DX は、Lightning コンポーネント開発のあらゆる局面で堅牢なサポートを提供します。さらに、Visual Studio Code 向け Salesforce 拡張機能は非常に優れたサードパーティツールです。開発者コンソールしかないとは思わないでくださいね。

コードに取り掛かる前に、もう 1 つ行うことがあります。「プレビュー」の URL は、実際にはアプリケーションの永続的なホームです (ユーザが使用できるようになっている場合)。URL の形式は、https://MyDomainName.lightning.force.com/Namespace/AppName.app です。

<yourAppName> は、アプリケーションバンドルの名前 (この場合は harnessApp) を表します。Trailhead 組織では、名前空間を設定せずに、URL の名前空間の部分が「c」と表示されるようにしてください。「c」はデフォルトの名前空間を表します。これは後でもう一度出てきます。URL の形式の残りの部分については、見ればすぐにわかりますよね。

それでは、コードに取り掛かりましょう。

hello world で実存的な疑問が生じることはほとんどありませんが、ここでは掘り下げていきます。helloWorld の例に照らしてコンポーネントがどのようなものなのかについて説明しましょう。実際、コンポーネントは、マークアップで記述された定義リソースやその他の省略可能なリソース (コントローラやスタイルシートなど) が含まれるバンドルです。リソースはファイルのようなものですが、ファイルシステムではなく Salesforce に保存されます。

helloWorld.cmp のコンポーネント定義リソースは簡単に理解できます。

<aura:component>
    <p>Hello Lightning!</p>
</aura:component>

<aura:component> の開始タグと終了タグがあり、その間に静的 HTML があります。これ以上ないくらい単純なので「ページ」だと思いたくなりますがやめておきましょう。これについては後ほど説明します。

すでにコンポーネントバンドルについて言及しましたが、実際どのようなものなのでしょうか? バンドルはフォルダのようなものです。1 つのコンポーネントの関連リソースをグループ化します。バンドル内のリソースは、各リソース種別のリソース命名方式で自動的に結び付けられます。自動的に結び付けられるということは、コンポーネント定義でそのコントローラやヘルパーなどを参照でき、それらのリソースでコンポーネント定義を参照できるということです。これらは相互に (ほぼ) 自動的に結び付けられます。

では、このしくみを見てみましょう。helloWorld.cmp が有効になっている状態で、右側のコンポーネントパレットの [STYLE] ボタンをクリックします。これにより、helloWorld バンドルに追加されたスタイルリソースの新規タブが開きます。これは、1 つの空のセレクタ .THIS で始まっています。この動作を確認するには、次のように簡単なスタイルをスタイルシートに追加します。

.THIS {
}
p.THIS {
    font-size: 24px;
}

次に、harnessApp.app のプレビューウィンドウを再読み込みします。成功です。テキストが大きくなりましたね。ただし、.THIS はどのように機能したのでしょうか? これが自動的な結び付きの魔法です。.THIS は実行時にコンポーネントに由来するスタイル範囲文字列に置き換わります。これにより、スタイルルールがこのコンポーネントのみに制限されるため、他のコンポーネントへの影響を心配することなくコンポーネントに固有のスタイルを作成できます。

これで helloWorld バンドルには、コンポーネント定義 helloWorld.cmp とスタイルシート helloWorld.css の 2 つのリソースが含まれるようになりました。これはフォルダのように考えることができます。次に略図を示します。

• helloWorld — コンポーネントバンドル
  • helloWorld.cmp — コンポーネントの定義
  • helloWorld.css — コンポーネントのスタイル

開発者コンソールには、コンポーネントバンドルに追加できる他のリソース種別がいくつか表示されています。[CONTROLLER] 項目と [HELPER] 項目をクリックして、それらのリソースをバンドルに追加します。これにより、バンドルは次のようになります。命名方式が見え始めてきましたね。

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

このモジュールでは、これらの 4 つのリソース種別のみを操作します。コントローラとヘルパーリソースについては、これらのコードの作成を実際に開始するときにさらに詳しく説明します。ここでは、デフォルトの実装のままで問題ありません。結局のところ、これは単なる hello world です。

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

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

これで終わりです。

簡単だと思われますが、アプリケーションとコンポーネントの実用的な使用方法についていくつか具体的に説明します。主な項目は次のとおりです。

• マークアップを作成するときに、コンポーネントをアプリケーションに追加することはできますが、アプリケーションを別のアプリケーションに追加したり、アプリケーションをコンポーネントに追加したりすることはできません。
• アプリケーションには、テスト中にアクセスしたり、ユーザに公開したりできるスタンドアロン URL があります。通常、これらのスタンドアロンアプリケーションは「my.app」と呼ばれます。
• アプリケーションを Lightning Experience や Salesforce アプリケーションに追加することはできません。追加できるのはコンポーネントのみです。最後の単元の後にこんなことを聞くのはおかしいかもしれませんが、アプリケーション以外に一体何をアプリケーションランチャーに追加するのでしょうか? アプリケーションランチャーに追加するのは、Aura コンポーネント (<aura:component> で定義された要素) をラップする Salesforce アプリケーションです。Aura コンポーネントアプリケーション (<aura:application> で定義された要素) を使用して Salesforce アプリケーションを作成することはできません。奇妙に思えますが、そのようになっているのです。

では、アプリケーションは何の役に立つのでしょうか? なぜアプリケーションを使用するのでしょうか? この質問にはすでに答えています。Lightning コンポーネントで作成された機能はコンテナに公開します。Lightning コンポーネントアプリケーションは、Lightning コンポーネントのコンテナの一種です。

もう一度実用的に考えると、一般的にすべての「アプリケーション」の機能は最上位コンポーネント内に作成するということです。その後、最後にその 1 つのコンポーネントをコンテナ (Lightning アプリケーションや Salesforce アプリケーションなど) に配置します。my.app を使用すると、コンテナでメインコンポーネントのサービスを設定できますが、それ以外はコンポーネントをホストすることしかできません。

作成したアプリケーションをもう一度見てみましょう。再度 harnessApp.app 定義リソースを示します。

<aura:application>
    <c:helloWorld/>
</aura:application>

helloWorld「アプリケーション」にどれほど多くの機能を追加するとしても、それはすべて helloWorld コンポーネント内になります。hello メッセージを変更するために Quip スタイルエディタを組み込むことはできますが、harnessApp.app 定義のこの単純な構造はほぼ変わりません。

ここからは、実際の Lightning アプリケーションバンドルを、作成するコンポーネントの単なるコンテナ (harness) として使用することを前提とします。harnessApp.app をそのまま使用しても問題ありません。ただし、アプリケーションの作成について説明する場合、アプリケーションバンドルではなくコンポーネントバンドル内に機能を作成するという意味になります。なぜなら、これが実際に「アプリケーション」を作成する方法だからです。

静的 HTML の代わりに helloWorld コンポーネントがあるため、harnessApp.app 定義も関心を引きます。harnessApp には helloWorld コンポーネントが含まれています。これについて少し掘り下げ、helloWorld をもう少し複雑にしてみましょう。

開発者コンソールで、helloHeading という名前の Aura コンポーネントを作成します。このマークアップについては、次のコードを貼り付けてください。

<aura:component>
    <h1>W E L C O M E</h1>
</aura:component>

次に、クリックして helloWorld.cmp に戻り、「Hello Lightning」の行の上に <c:helloHeading/> を追加します。helloWorld コンポーネント定義は次のようになります。

<aura:component>
    <c:helloHeading/>
    <p>Hello Lightning!</p>
</aura:component>

アプリケーションを再読み込みして、変更内容を確認します。コンポーネントのネスト構造は、次のようになります。

• harnessApp.app
  • helloWorld.cmp
    • helloHeading.cmp
    • (静的 HTML)

helloWorld に helloHeading が含まれていることを表す言い方はいくらでもありますが、helloHeading は helloWorld の子コンポーネントである、または helloHeading は helloWorld 内部でネストされていると言えます。また、コンポーネントはほぼ任意のレベルまで他のコンポーネント内でネストできます。Lightning コンポーネントの制限はありますが、その制限に達するずっと前にフラフラになってしまうでしょう。

相互の内部にコンポーネントを配置するこのプロセスは、Lightning コンポーネントアプリケーションの作成の基本です。まず、「細分化された」単純なコンポーネント (各コンポーネントでは、定義された一連の自己完結型機能が提供されます) を作成します。次に、上位レベルの機能を備えた新しいコンポーネントにそれらのコンポーネントを組み込みます。その後、それらのコンポーネントを使用して、再度「レベルアップ」します。

ソフトウェアのコンテキストではなく、馴染み深いたとえを使用してこの説明をしましょう。家を想像してください。いっそのこと、家をお見せしましょう。

この家を見てどう思いますか? 「家」として考えるのを止めて、「家」コンポーネントとして考えると、そのコンポーネントを構成する要素やパターンが見えてきます。

最も大きな規模では、この家は 3 つの同じような構造で構成されています。それらの 3 つのコンポーネントのデザインは似ていますが同一ではありません。各コンポーネントは、窓などのさらに小さなコンポーネントに分解でき、窓は個々の窓枠に分解できます。これらの小さなコンポーネントの配置 (構成) によって 3 つの大きな構造に違いが生まれます。

3 つの構造は、2 つの小さく狭い構造/コンポーネントで結合されており、この 2 つの構造は小さな再利用可能なパターンに分解できます。これらの接続コンポーネントにより、3 つの個別の構造が一緒になって大きな全体 (家) が構成されます。

アーキテクチャができたので、Web アプリケーションもできます。このモジュールの後で、細分化された入力コンポーネントを使用して、フォームコンポーネントを作成します。次に、そのフォームコンポーネントを別のコンポーネントに配置して、アプリケーションレベルの機能を作り上げます。

家のように外観はきれいではありませんが、構成プロセスの背後にある原理は非常に似ています。コンポーネントや構成について考えることは、このモジュールや Lightning コンポーネントでアプリケーションを作成するときに培われる基本的なスキルです。

ここでは少しだけ触れましたが、何らかの機能を提供するコンポーネントを実際に作成するには、属性、型、値、式について学習する必要があります。ただし、その前に最初のコードにチャレンジしてみましょう。

• Salesforce ヘルプの「開発者コンソール」
• 開発者コンソールの使用
• コンポーネントのマークアップ
• コンポーネントのバンドル
• コンポーネント内の HTML