最初の SOQL クエリを記述する

メモ

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

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

Trail Together の動画

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

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

はじめに

このステップではシンプルな Lightning コンポーネントと Apex コントローラーを作成します。そして、データを表示するようにコンポーネントを更新して、基本 SQL を SOQL に変換します。 

Lightning コンポーネントバンドルを作成する

組織を作成し、パッケージをインストールして、データをインポートしたところで、次は変換した SQL クエリから簡単なデータを表示する Lightning コンポーネントを作成しましょう。

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

   <aura:component implements="flexipage:availableForAllPageTypes" access="global">
     <aura:attribute name="Books" type="Book__c" />
     <lightning:card title="Books4Everyone Books">
       <aura:set attribute="body">
         TODO: Update this to display data!
       </aura:set>
     </lightning:card>
   </aura:component>

   現時点ではコンポーネントの内容はシンプルです。書籍に関する情報を格納するための属性が 1 つと、Lightning カードにデータを表示するためのコードがあります。このバンドルはすぐ後で編集しますが、まずはコンポーネントにデータを入力するための Apex を記述する必要があります。

Apex クラスを作成する

次のステップは、要求されたデータを Books4Everyone から取得する Apex コントローラーを作成することです。

1. 開発者コンソールで、[File (ファイル)] > [New (新規)] > [Apex Class (Apex クラス)] をクリックします。
2. 新しい Apex クラスに Books4EveryoneHomeController という名前を付けます。
3. Apex クラスの内容を次のコードに置き換えます。

   public with sharing class Books4EveryoneHomeController {
     @AuraEnabled
     public static List<Book__c> getBooks() {
       return; //Your query here
     }
   }

4. 今記述したコードの内容をざっと見てみましょう。先頭行は @AuraEnabled で、先ほど作成した Lightning コンポーネントからこの関数を呼び出せるようにします。次は関数の定義です。Book__c オブジェクトのリストを返すように指定しています。SOQL のクエリは常に sObject のリストを返しますので、これは重要です。SOQL クエリも記述しますので、まだコードは保存しません。Books4Everyone は、すべての書籍のタイトルと説明を表示します。そのための SQL クエリは次のとおりです。 

   SELECT b.ID, b.Name, b.Description
     FROM Book b

   作成中のコンポーネントにこのクエリを追加しても機能しません。ここまでの内容を整理しましょう。Book (書籍) は、インストールした未管理パッケージに含まれていた Salesforce のカスタムオブジェクトで、API 参照名は Book__c です。Id (ID) と Name (名前) は標準項目であるため、API 参照名はそれぞれ Id と Name です。Description (説明) はカスタム項目であるため、API 参照名は Description__c です。
5. これで、新しい SOQL クエリで Apex クラスを更新するための情報が揃いました。return; //Your query here を次のコードで置き換えます。

   return [SELECT Id,Name,Description__c
     FROM Book__c];

6. ファイルを保存します。これで最初の SOQL クエリが完成しました。

SQL は SOQL ではない

最初のクエリを変換したところで、よく質問される SQL と SOQL の違いをまとめた表を確認しましょう。

データを表示するように Lightning コンポーネントを更新する

データを取得するためのクエリを作成しましたので、次はそのデータが表示されるようにしましょう。コンポーネントをそのように更新します。

1. 開発者コンソールで Books4EveryoneHome Lightning コンポーネントに戻ります。
2. コンポーネントを次のように更新します。

   <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 Books">
       <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 Titles</th>
               <th scope="col">Book Descriptions</th>
             </tr>
           </thead>
           <tbody>
             <aura:iteration items="{!v.Books}" var="books">
               <tr scope="row">
                 <td> {!books.Name}</td>
                 <td> {!books.Description__c}</td>
               </tr>
             </aura:iteration>
           </tbody>
         </table>
       </aura:set>
     </lightning:card>
   </aura:component>

   前よりもかなり複雑になりました。最初の大きな変更は、controller=”Books4EveryoneHomeController” でコントローラーをコンポーネントに追加したことです。これによってコンポーネントを Apex クラスに接続します。次の変更は、データを表示するためのテーブルを追加したことです。Book Titles (書籍のタイトル) と Book Descriptions (書籍の説明) という 2 つの列を追加し、aura:iteration コンポーネントを使用して、Books から取得したデータを表示します。現時点ではこの aura 属性は空であるため、JavaScript コントローラーを更新して、Apex クラスから取得したデータを属性に格納する必要があります。
3. ページの右側にある [Controller (コントローラー)] をクリックして、Lightning コンポーネント用のコントローラーを作成します。
4. コントローラーの JavaScript を次のように更新します。

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

   これで aura 属性にデータが格納されました。このアクションは Apex 関数の getBooks を呼び出して Books4EveryoneHome コンポーネントの Books 属性にデータを格納します。
5. 開いているタブをすべて保存します。

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

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

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