書評を取得する

メモ

日本語で受講されている方へ
Challenge は日本語の Trailhead Playground で開始し、かっこ内の翻訳を参照しながら進めていってください。Challenge での評価は英語データを対象に行われるため、英語の値のみをコピーして貼り付けるようにしてください。日本語の組織で Challenge が不合格だった場合は、(1) この手順に従って [Locale (地域)] を [United States (米国)] に切り替え、(2) [Language (言語)] を [English (英語)] に切り替えてから、(3) [Check Challenge (Challenge を確認)] ボタンをクリックしてみることをお勧めします。

翻訳版 Trailhead を活用する方法の詳細は、自分の言語の Trailhead バッジを参照してください。

Trail Together の動画

エキスパートの説明を見ながらこのステップを進めて行きたい場合は、Trail Together シリーズの一部である、こちらの動画をご覧ください。

(巻き戻して最初から見直したい場合、このクリップは 08:41 分から開始されます。)

はじめに

Books4Everyone は、これまでの作業内容を気に入っており、ホームページをさらに便利にするために書評を表示したいと考えています。Books4Everyone は、この情報を広告チームに認識させるための新しいコンポーネントをホームページに追加することを要求してきました。前回と同じように、クライアントから提供された SQL クエリを SOQL クエリに変換する必要があります。

inner 結合を記述する

Apex でクエリを記述する前に、SQL クエリを見てみましょう。

SELECT r.Name, r.Review, r.Grade, b.Name
  FROM recommendation r, book b
  WHERE b.Id != null

Book (書籍) が Recommendation (おすすめ) と主従関係にあることは分かっていますので、クエリを次のように記述します。

SELECT Name, Review__c, Rating__c, Book__r.Name
  FROM Recommendation__c
  WHERE Book__c != null

Apex と新しいコンポーネントを記述する

まず、新しい SOQL クエリを Apex コントローラークラスに追加します。

1. 開発者コンソールを開いて、Books4EveryoneHomeController Apex クラスを開きます。
2. 最初の 2 つのメソッドの後に次のコードブロックを追加します。

     @AuraEnabled
     public static List<Recommendation__c> getBookRecommendations() {
       return [SELECT Name, Review__c, Rating__c, Book__r.Name
         FROM Recommendation__c
         WHERE Book__c != null];
     }

次に、新しい Lightning コンポーネントと JavaScript コントローラーを作成します。

1. 新しいコンポーネントを作成するには、[File (ファイル)] > [New (新規)] > [Lightning Component (Lightning コンポーネント)] をクリックします。
2. 新しい Lightning コンポーネントに Books4EveryoneRecommendations という名前を付けます。
3. コンポーネント設定セクションで、[Lightning Page (Lightning ページ)] を選択して [Submit (送信)] をクリックします。
4. .cmp ファイルのコードを次のコードに置き換えます。

   <aura:component implements="flexipage:availableForAllPageTypes" access="global" controller="Books4EveryoneHomeController">
     <aura:attribute name="Recommendations" type="Recommendation__c" />
     <aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
     <lightning:card title="Books4Everyone Recommendations">
       <aura:set attribute="body">
         <table class="slds-table slds-table_bordered slds-table_cell-buffer">
           <thead>
             <tr class="slds-text-title_caps">
               <th scope="col">Book Title</th>
               <th scope="col">Rating</th>
               <th scope="col">Review</th>
             </tr>
           </thead>
           <tbody>
             <aura:iteration items="{!v.Recommendations}" var="recommendations">
               <tr scope="row">
                 <td> {!recommendations.Book__r.Name}</td>
                 <td> {!recommendations.Rating__c}</td>
                 <td> {!recommendations.Review__c}</td>
               </tr>
             </aura:iteration>
           </tbody>
         </table>
       </aura:set>
     </lightning:card>
   </aura:component>

5. ページの右側にある [Controller (コントローラー)] をクリックして、コンポーネント用のコントローラーを作成します。
6. コントローラーの JavaScript の内容を次のコードに置き換えます。

   ({
     doInit: function(component, event, helper) {
       var action = component.get("c.getBookRecommendations");
       action.setCallback(this, function(data) {
         component.set("v.Recommendations", data.getReturnValue());
         console.log(data.getReturnValue()); });
       $A.enqueueAction(action);
     }
   })

7. 開いているタブをすべて保存します。

コンポーネントの動作を確認する

クエリが想定どおりに機能するようにするための最後のステップは、作成したコンポーネントをホームページに追加することです。

1. 組織で Books4Everyone アプリケーションに移動します。
2. [Home (ホーム)] をクリックします。
3. 右上隅にある をクリックして [Edit Page (ページを編集)] をクリックします。
4. Lightning アプリケーションビルダーの左側にあるカスタムコンポーネントのリストで Books4EveryoneRecommendations を探します。
5. コンポーネントをページにドラッグします。
6. [Save (保存)] をクリックしてから をクリックしてホームページに戻ります。
7. 最後のステップとして、ホームページでデータを確認します。次のように表示されます。