Hello World Aura コンポーネントの作成

メモ

メモ

Lightning Web コンポーネントは Salesforce で推奨される UI 構築方法です。「Aura から Lightning Web コンポーネントへの移行」トレイルを参照し、LWC を使用して現行の Web 標準に準拠する方法を学習してください。Aura について詳しく学習する場合は、このバッジの獲得を続行してください。

学習の目的

このプロジェクトでは、次のことを行います。

  • 簡単な Aura コンポーネントを構築する。
  • Salesforce Lightning Design System (SLDS) を使用してコンポーネントにスタイルを設定する。
  • JavaScript のクライアント側コントローラを使用して機能を追加する。
  • Aura コンポーネントに属性の双方向データバインドを実装する。
  • 検索条件に基づいてデータを取得して表示する。
  • 機能を子コンポーネントとしてカプセル化する。
  • クロスコンポーネント通信にイベントを使用する。

はじめに

このプロジェクトでは、Aura コンポーネントを使用してページを作成およびカスタマイズする方法を習得します。

Aura コンポーネントは、Lightning Experience のビルディングブロックです。モジュール式であるため、1 つのコンポーネントを複数の Lightning ページに取り込むことができます。または、これから行うように、同じコンポーネントをページに複数回表示し、それぞれ異なるタスクを実行することができます。

Aura コンポーネントの構築方法を学ぶには、出発点が必要です。どの開発者に聞いても、出発点は「Hello World」と言うでしょう。正直、今後これほどたわいないコンポーネントを構築することはないと思いますが、Aura コンポーネントの構築の基本を探索するにはよい機会です。

Trailhead Playground を作成し、パッケージをインストールしてデータをインポートする

まず、Trailhead Playground を開き、このプロジェクトを通して使用するアプリケーションとコードが入ったパッケージをインストールしましょう。最初に、このページの一番下までスクロールして、[Launch (起動)] をクリックします。組織に [Install a Package (パッケージのインストール)] というタブが表示されている場合は、以下の手順に従います。 

表示されていない場合は、アプリケーションランチャー (アプリケーションランチャー) で、[Playground Starter] をクリックして手順に従います。Playground Starter アプリケーションが表示されない場合は、こちらのパッケージのインストールリンクをクリックして、Trailhead ヘルプの「Trailhead の Challenge を完了するためのパッケージやアプリケーションのインストール」を参照してください。

  1. [Install a Package (パッケージのインストール)] タブをクリックします。
  2. 項目に「04t6A000000SG0F」を貼り付けます。
  3. [Install (インストール)] をクリックします。
  4. [Install for All Users (すべてのユーザのインストール)] を選択して [Install (インストール)] をクリックします。

アプリケーションのインストールが終了すると、確認ページが表示され、Playground に関連付けられているアドレスにメールが届きます。次に、Trailhead Playground でサンプルデータを初期化します。 

  1. インストールが完了したら、[Done (完了)] をクリックし、ナビゲーションバーにある アプリケーションランチャー をクリックしてアプリケーションランチャーを開きます。
  2. Dreamhouse Lightning アプリケーションを選択します。
  3. [Data Import (データインポート)] をクリックして、[Initialize Sample Data (サンプルデータの初期化)] をクリックします。画面サイズによっては、[Data Import (データインポート)] タブがタブメニューの [More (その他)] の下にある場合もあります。

パート 1: HelloWorld

この一連の手順では、開発者コンソールを使用して、HelloWorld.cmp という名前の Aura コンポーネントのシェルを作成します。

このコンポーネントを作成するとき、作成するコンポーネントの種類として次の 5 つのオプションが提示されます。

  • [Lightning Tab (Lightning タブ)]: コンポーネントを Lightning Experience と Salesforce モバイルアプリケーションの両方でタブとして使用できるようにします。
  • [Lightning Page (Lightning ページ)]: コンポーネントをホームページとレコードページの両方に配置できるようにします。
  • [Lightning Record Page (Lightning レコードページ)]: その名が示すとおり、コンポーネントをオブジェクトレコードページで使用できるようにします。
  • [Lightning Communities Page (Lightning コミュニティページ)]: ご想像どおり、コンポーネントを Lightning コミュニティページで使用できるようにします。
  • [Lightning Quick Action (Lightning クイックアクション)]: コンポーネントを Lightning Experience のクイックアクションとして使用できるようにします。

この演習では、[Lightning Record Page (Lightning レコードページ)] を選択します。

Aura コンポーネントはファイルのバンドルで構成されます。たとえば、コンポーネントファイル (.cmp ファイル) には、コンポーネントの HTML マークアップが含まれます。バンドルの他のファイルには以下が含まれます。

  • Controller (コントローラ): コンポーネントに機能を追加するために使用する JavaScript ファイルです。
  • Helper (ヘルパー): これも JavaScript ファイルで、共有する JavaScript 関数に使用します。
  • Style (スタイル): CSS ファイルで、コンポーネントの独自の CSS を記述できます。
  • Documentation (ドキュメント): コンポーネントのドキュメントを記述できます。ドキュメントは組織のヘルプページに表示されます。
  • Design (設計): アプリケーションビルダーにコンポーネントのパラメータを公開できるようにするもので、開発者にとって一番重要なファイルです。
  • SVG: Scalable Vector Graphic の略で、アプリケーションビルダーのコンポーネントリストに表示されるコンポーネントのアイコンです。

Aura コンポーネントおよびバンドルについての詳細は、こちらを参照してください。

  1. 右上隅の [Setup (設定)] アイコン 設定 をクリックして [Developer Console (開発者コンソール)] を選択します。
  2. 開発者コンソールで、[File (ファイル)] > [New (新規)] > [Lightning Component (Lightning コンポーネント)] を選択します。表示されるダイアログには、コンポーネントではなく、[New Lightning Bundle (新規 Lightning バンドル)] と表示されます。Aura コンポーネントはファイルのバンドルですから、あながち間違いとは言えません。
  3. コンポーネントに「HelloWorld」と名前を付けます。
  4. [Lightning Record Page (Lightning レコードページ)] を選択して、[Submit (送信)] をクリックします。

  5. お疲れ様でした。Aura コンポーネントが作成されました。何の機能もありませんが、たとえば、Lightning Web コンポーネントと区別して <aura:component> というなど、いくつかのポイントを説明するために利用できます。Aura はオープンソースフレームワークで、Salesforce ではその上に Lightning コンポーネントフレームワークを構築しています。


    implements= という属性があります。これは、このコンポーネントが使用するインターフェースのリストです。このコンポーネントの場合は、[Lightning Record Page (Lightning レコードページ)] のボックスをオンにしました。コードでは、flexipage:availableForRecordHome インターフェースで表現します。


    また、コンポーネントがレコードページで使用されるときに、どのレコードが表示されているのかを把握する必要のある場合があります。これは force:hasRecordId で表現され、Lightning レコードページを選択した場合は自動的に追加されます。


  6. <aura:component> ... </aura:component> タグ内部に Hello World と入力します。
  7. ファイルを保存します。

パート 2: コンポーネントをページに追加する

Aura コンポーネントの構築中に、2 通りの方法でコンポーネントをプレビューできます。(a) コンポーネントを Lightning アプリケーションに追加するか、(b) コンポーネントをページに配置するかです。Lightning アプリケーションは、Lightning Experience 内のアプリケーションではなく、スタンドアロンアプリケーションであることに注意してください。次の手順では、HelloWorld コンポーネントを [Property (物件)] ページに追加して、オプション b を実装します。

  1. 組織で [Property (物件)] レコードページが開いていない場合はそのページを開きます。
  2. 設定 をクリックして、[Edit Page (編集ページ)] を選択します。
  3. [Custom (カスタム)] コンポーネントで HelloWorld コンポーネントを見つけ、右側の列の上部にドラッグします。
  4. [Save (保存)] をクリックします。
  5. 標準の [Property (物件)] ページを今回初めて変更したため、更新済みのページを有効にして、変更した内容がユーザに表示されるようにします。[Activate (有効化)] をクリックします。
  6. [App Default (アプリケーションのデフォルト)] をクリックし、[Assign as App Default (アプリケーションのデフォルトとして割り当て)] をクリックします。
  7. [Dreamhouse Lightning] アプリケーションを選択し、[Next (次へ)] [Next (次へ)] をクリックして [Save (保存)] をクリックします。
  8. [Back (戻る)] をクリックすると、[Property (物件)] ページに戻ります。成功です。最初の Aura コンポーネントを作成して、Lightning Experience のページに追加することができました。とはいえ、このコンポーネントでは張り合いがありませんね。そこで、もっと面白味のあるものにしましょう。

パート 3: SLDS を使用してスタイルを設定する

次のステップでは、スタイルをコンポーネントに適用します。Salesforce Lightning Design System (SLDS) で提供されるスタイル設定メカニズムを使用すると、Lightning Experience のデザインと一貫性のあるアプリケーションを簡単に構築でき、UI をカスタム CSS としてリバースエンジニアリングする必要がありません。

SLDS についての詳細は、こちらを参照してください。

  1. 開発者コンソールで、HelloWorld コンポーネントマークアップをクリックして表示します。
  2. 「Hello World」<div> タグでラップします。コードは次のようになります。
  3. <div>Hello World</div>

  4. SLDS サイトに切り替え、次のドキュメントを確認します。
    1. [Component Blueprints (コンポーネントブループリント)] タブをクリックします。
    2. 左側の列にある [Cards (カード)] に移動します。
    3. [Base Card Structure (カードの基本構造)] に移動します。これは何を行うのでしょうか?
  5. 開発者コンソールに戻り、class="slds-card"<div> タグに追加します。[Save (保存)] をクリックします。
  6. [Property Detail (物件詳細)] ページを再読み込みし、コンポーネントに適用された新しいスタイルを確認します。
  7. SLDS サイトで他のスタイルオプションを確認します。
    1. 再び SLDS サイトに切り替えます。
    2. 最初のコードセクションで、[Show Code (コードを表示)] ボタンをクリックします。
    3. 最後の <div> に適用された class="slds-card__body slds-card__body_inner" を見つけます。
    4. 左側のナビゲーションにある [Utilities (ユーティリティ)] セクションを開きます。[Padding (パディング)] をクリックします。パディングオプションの例を確認します。特に、ここでは slds-p-top_medium を使用します。
  8. 他のスタイルオプションをコンポーネントに追加します。
    1. 開発者コンソールで、「Hello World」<div class="slds-card__body slds-card__body_inner"> でラップします。
    2. slds-p-top_medium を 2 つ目の <div> に追加して、コードを <div class="slds-card__body slds-card__body_inner slds-p-top_medium"> のようにします。
  9. ファイルを保存して、[Property Detail (物件詳細)] ページを更新します。

Lightning Experience で作業していると、変更が更新されないことに気が付きます。これは、ブラウザの安全なデータキャッシュによるものです。次の手順に従い、Trailhead Playground でこのバッジ獲得のために作業を行う間はこの機能を一時的に無効にします。

  1. [Setup (設定)] から、[Quick Find (クイック検索)] ボックスに「Session」(セッション) と入力し、[Session Settings (セッションの設定)] を選択します。
  2. [Enable secure and persistent browser caching to improve performance (パフォーマンスを向上させるためにブラウザの安全で永続的なキャッシュを有効にする)] をオフにします。
  3. [Save (保存)] をクリックします。

このバッジを獲得した後は、パフォーマンス向上のために、この設定を再びオンにしてください。

パート 4: データバインドを使用する

次は、属性と式を使用してデータバインドを実装します。

Lightning Experience ページはクライアント上に表示されます。つまり、コンポーネントと Salesforce のデータが別々のパッケージとしてブラウザに到達するため、Lightning フレームワークによって結合される必要があるということです。

<aura:attribute> は、データを保存してコンポーネントが使用できるようにする場所です。<aura:attribute> ごとに名前が付けられ、JavaScript でデータを取得するときにこの名前を使用します。さらに、これらの <aura:attributes> は強く型付けされています。

Aura コンポーネントでは、{! } という表記で式を表します。Aura コンポーネントでは v も使用します。これは値プロバイダというもので、式をビューで評価する必要があることを示します。ビューとはコンポーネントマークアップ (.cmp ファイル) のしゃれた言い方です。

属性と式についての詳細は、こちらを参照してください。

  1. 開発者コンソールで、「Hello World」というテキストを Hello, {!v.greeting}! に置換します。
  2. 2 行目に、String 型の属性を追加し、デフォルト値「World」を割り当てます。2 行目は、<aura:attribute name="greeting" type="String" default="World" /> のようになります。
  3. コンポーネントを保存して、[Property Detail (物件詳細)] ページを再読み込みします。

パート 5: フォーム要素を追加する

次の手順では、スタイルを追加して <input> フォーム要素に適用し、アプリケーションのユーザが名前を送信できるようにします。

フォーム要素についての詳細は、こちらを参照してください。

  1. 次の入力項目を Hello {!v.greeting} の下の新しい行に追加します。
  2. <input aura:id="myInput" type="text" />
    <button name="Update" type="submit">Update</button>

  3. ファイルを保存して、[Property Detail (物件詳細)] ページを再読み込みします。
  4. SLDS サイトに切り替え、次のドキュメントを確認します。
    1. [Component Blueprints (コンポーネントブループリント)] セクションで、[Input (入力)] を見つけます。slds-input クラスが <input> タグに適用されています。
    2. [Component Blueprints (コンポーネントブループリント)] のリストで [Buttons (ボタン)] を見つけます。ドキュメントに目を通し、slds-button_brand で符号化されている機能を判別します。
    3. [Utilities (ユーティリティ)] セクションで [Margin (余白)] を見つけます。ドキュメントに目を通し、slds-m-top_small で符号化されている機能を判別します。
  5. 開発者コンソールに戻り、class="slds-input"<input> タグに追加します。
  6. コードサンプルから class="slds-button slds-button_brand" をコピーし、<button> タグに追加します。
  7. slds-m-top_small をボタンのクラスのリストに追加します。
  8. ファイルを保存して、[Property Detail (物件詳細)] ページを再読み込みします。

パート 6: JavaScript コントローラを使用する

コントローラとは、コードのコレクションであり、「何かが発生した」ときのアプリケーションの動作を定義します。「何か」とは、ユーザ入力、タイマーなどのイベント、データ更新などです。次の一連の手順では、クライアント側 JavaScript コントローラを使用して、更新ボタンが、クリックされたらアクションを実行するようにします。

クライアント側コントローラについての詳細は、こちらを参照してください。

  1. 開発者コンソールで onclick="{!c.updateValue}"<button> タグに追加します。
  2. ファイルを保存します。
  3. 開発者コンソールの右側にある [Controller (コントローラ)] ボタンをクリックします。
  4. 関数の名前を myAction から updateValue に変更します。
  5. 次のコードを updateValue 関数に追加します。
  6. var val = component.find("myInput").getElement().value;
    component.set("v.greeting", val);

  7. ファイルを保存して、[Property Detail (物件詳細)] ページを再読み込みします。
  8. 自分の名前を入力項目に入力し、[Update (更新)] ボタンをクリックします。

パート 7: 双方向データバインドを理解する

双方向データバインドを使用すると、コンポーネントモデルのデータへの変更は、即時かつ自動的にコンポーネントビューに反映されます (またはその逆)。

この場合、ユーザが自分の名前を送信すると、アプリケーションはその名前でパーソナライズされた挨拶を表示する必要があります。最初に HelloWorld コンポーネントが表示されるとき、式 {!v.greeting} で決定される入力項目の値は、デフォルト値 (「World」) に設定されます。名前を入力項目に入力すると、入力項目の値が {!v.greeting} 式に設定され、ビューに反映されて、名前が挨拶メッセージに表示されます。

  1. [Component (コンポーネント)] タブに戻ります。
  2. <input> タグから class="slds-input" を削除します。
  3. <input> タグで、タグの先頭の input の前に lightning: を追加します。次に、タグの最後に value="{!v.greeting}" を追加します。次のようになります。
  4. <lightning:input aura:id="myInput" type="text" value="{!v.greeting}" />

  5. コンポーネントから <button> を削除します。
  6. ファイルを保存して、[Property Detail (物件詳細)] ページを再読み込みします。
  7. 自分の名前を入力項目に入力し、どうなるか見てみましょう!

問題がある場合は、次の最終的な HelloWorld コンポーネントと比較して確認してください。

HelloWorld.cmp

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global">
    <aura:attribute name="greeting" type="String" default="World"/>
    <div class="slds-card">
        <div class="slds-card__body slds-card__body_inner slds-p-top_medium">
            Hello, {!v.greeting}
            <lightning:input aura:id="myInput" type="text" value="{!v.greeting}"/>
        </div>
    </div>
</aura:component>

HelloWorldController.js

({
    updateValue : function(component, event, helper) {
        var val = component.find("myInput").getElement().value;
        component.set("v.greeting", val);
    }
})
無料で学習を続けましょう!
続けるにはアカウントにサインアップしてください。
サインアップすると次のような機能が利用できるようになります。
  • 各自のキャリア目標に合わせてパーソナライズされたおすすめが表示される
  • ハンズオン Challenge やテストでスキルを練習できる
  • 進捗状況を追跡して上司と共有できる
  • メンターやキャリアチャンスと繋がることができる