著者データのない書籍を取得する

メモ

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

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

Trail Together の動画

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

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

はじめに

Books4Everyone では最近、書籍リストで多くの書籍に著者名が示されていないことに気が付きました。Books4Everyone は、ホームページの右下隅に、これらの書籍の著者名を簡単に検索して取得できるようにするためのコンポーネントが欲しいと言っています。今回も SQL クエリが提供されています。

right anti 結合を記述する

提供された SQL クエリは次のとおりです。

SELECT Name, Description
  FROM Book
  WHERE Author IS NULL

もうわかっているとは思いますが、SOQL クエリは次のように記述します。

SELECT Name, Description__c
  FROM Book__c
  WHERE Author__c = null

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

では、SOQL クエリを Apex コントローラークラスに追加しましょう。 

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

     @AuraEnabled
     public static List<Book__c> getBooksWithoutAuthors(){
       return [SELECT Name
         FROM Book__c
         WHERE Author__c = null];
     }

今回も、ホームページ用に新しい Lightning コンポーネントを作成します。 

1. 開発者コンソールで開いているタブがあれば閉じて、[File (ファイル)] > [New (新規)] > [Lightning Component (Lightning コンポーネント)] を選択します。
2. 新しい Lightning コンポーネントに Books4EveryoneMissingAuthors という名前を付けます。
3. コンポーネント設定セクションで、[Lightning Page (Lightning ページ)] を選択して [Submit (送信)] をクリックします。
4. .cmp ファイルのコードを次のコードに置き換えます。

   <aura:component implements="flexipage:availableForAllPageTypes" access="global" controller="Books4EveryoneHomeController">
     <aura:attribute name="Books" type="Book__c" />
     <aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
     <lightning:card title="Books4Everyone Missing Author List">
       <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>
             </tr>
           </thead>
           <tbody>
             <aura:iteration items="{!v.Books}" var="books">
               <tr scope="row">
                 <td> {!books.Name}</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.getBooksWithoutAuthors");
       action.setCallback(this, function(data) {
         component.set("v.Books", data.getReturnValue());
         console.log(data.getReturnValue());
       });
       $A.enqueueAction(action);
     }
   })

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

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

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

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