Mark Hammer's Blog

SalesforceやTrailheadに関する情報を投稿しているブログです。

Trailhead モジュール：Lightning コンポーネントの基本

Trailhead日本語要約

※この内容は2018/5時点のものです。

始める前に

https://trailhead.salesforce.com/ja/modules/lex_dev_lc_basics/units/lex_dev_lc_basics_prereqs

  • 説明：日本語
  • Challenge：英語ハンズオン

Challenge要約

  • [私のドメイン] にてカスタムドメインを組織へ追加してください。
    • ※筆者注：Trailhead Playground 組織を利用する場合は、既に追加済みのため対応する必要はありません。
  • カスタムオブジェクト「Expense」を（英語側の）ユニット本文に従い、以下内容で作成してください。
    • 表示ラベル：Expense
    • 表示ラベル（複数形）：Expenses
    • 母音で始まる場合はチェック：チェックを入れる
    • API 参照名：Expense__c

※筆者注：設定項目に「表示ラベル(複数形)」が表示されない場合は、組織情報にて言語のデフォルト値を「英語」に設定してください。

  • カスタムオブジェクト「Expense」に、（英語側の）ユニット本文に従い、以下のカスタム項目を作成してください。
    • データ型：通貨、項目の表示ラベル：Amount、API参照名：Amount__c、文字数：16、小数点の位置：2
    • データ型：テキスト、項目の表示ラベル：Client、API参照名：Client__c、文字数：50
    • データ型：日付、項目の表示ラベル：Date、API参照名：Date__c
    • データ型：チェックボックス、項目の表示ラベル：Reimbursed、API参照名：Reimbursed__c
  • カスタムオブジェクト「Camping Item」を作成し、以下項目を設定してください。
    • Name：カスタムオブジェクト作成時に設定するレコード名
    • データ型：数値、項目の表示ラベル：Quantity、API参照名：Quantity__c、文字数：18、小数点の位置：0、必須項目：チェックを入れる
    • データ型：通貨、項目の表示ラベル：Price、API参照名：Price__c、文字数：16、小数点の位置：2、必須項目：チェックを入れる
    • データ型：チェックボックス、項目の表示ラベル：Packed、API参照名：Packed__c、デフォルト値：チェックなし

Lightning コンポーネントの使用開始

https://trailhead.salesforce.com/ja/modules/lex_dev_lc_basics/units/lex_dev_lc_basics_intro

  • 説明：日本語
  • Challenge：日本語選択問題

Lightning コンポーネントの作成および編集

https://trailhead.salesforce.com/ja/modules/lex_dev_lc_basics/units/lex_dev_lc_basics_create

  • 説明：日本語
  • Challenge：英語ハンズオン

Challenge要約

  • 「Bug Spray」、「Bear Repellant」、「Goat Food」を含めた順序付きリストを持つLightningコンポーネント「campingList」を作成してください。
  • 「Camping List」という文字列をH1タグを使い、フォントサイズ：18で表示するLightningコンポーネント「campingHeader」を作成してください。
  • 上記「campingList」、「campingHeader」コンポーネントを含むLightningコンポーネント「camping」を作成してください。

属性と式

https://trailhead.salesforce.com/ja/modules/lex_dev_lc_basics/units/lex_dev_lc_basics_attributes_expressions

  • 説明：日本語
  • Challenge：英語ハンズオン

Challenge要約

  • Lightningコンポーネント「campingListItem」を作成してください。
  • 「campingListItem」コンポーネントに以下属性を追加してください。
    • name属性：item
    • type属性：Camping_Item__c
    • この属性は必須としてください。
  • 「Name」、 「Price」、 「Quantity」、 「Packed」の各項目を式を用いて表示してください。
  • 「Price」、 「Quantity」の各項目を表示する際は、適切な書式を設定してください。
  • 「Packed」項目を表示する際は、切り替え形式のチェックボックス(toggle)の書式を設定してください。

コントローラを使用したアクションの処理

https://trailhead.salesforce.com/ja/modules/lex_dev_lc_basics/units/lex_dev_lc_basics_controllers

  • 説明：日本語
  • Challenge：英語ハンズオン

Challenge要約

  • 前のChallengeで作成した「campingListItem」コンポーネントに、以下のボタンを作成してください。
    • ラベル(label): Packed!
    • 呼び出すコントローラ関数: packItem
  • コントローラ関数に、以下を実行するよう実装してください。
    • item属性のPacked項目に対し、Trueを設定する。
    • ボタンを無効にするため、disabled属性に対し、Trueを設定する。

フォームを使用したデータの入力

https://trailhead.salesforce.com/ja/modules/lex_dev_lc_basics/units/lex_dev_lc_basics_forms

  • 説明：日本語
  • Challenge：英語ハンズオン

Challenge要約

  • 「campingHeader」コンポーネントをlightning:layoutやSLDSを用いて、以下のように変更してください。
    • このユニットのソースコードを参考に、「slds-page-header」の中にH1タグにある「Camping List」を入れてください。
    • lightning:iconを用いて「action:goal」SLDSアイコンを追加してください。
  • 「campingList」コンポーネントを、新規アイテム追加フォームの表示、及び追加したアイテムを表示するために「campingListItem」コンポーネントを繰り返し実行するよう変更してください。 　変更内容の詳細は以下の通りです。
    • Camping Itemカスタムオブジェクトの配列を型(type)とする「items」属性を追加してください。
    • Camping_Item__cを型(type)とする「newItem」属性を追加してください。Quanitity、Price のデフォルト値は0としてください。
    • 「campingList」コンポーネントには、「newItem」属性より適切な入力コンポーネントタイプ、値を用いてName、Quanitity、Price、およびPackedの各項目のフォームを表示してください。 Quantity項目に入力可能な値は1以上としてください。
    • フォームを登録した場合に、JavaScriptコントローラにある「clickCreateItem」アクションを実行するようにしてください。
    • フォームが有効な場合、JavaScriptコントローラーは newItem を既存のitemの配列に挿入し、items value providerが変更されたことの通知をトリガーし、空の Camping_Item__c 型(type)の sObjectType で newItem をリセットしてください。 このコードは、ヘルパーではなくコンポーネントのコントローラに記述してください。

サーバ側コントローラを使用した Salesforce への接続

https://trailhead.salesforce.com/ja/modules/lex_dev_lc_basics/units/lex_dev_lc_basics_server

  • 説明：日本語
  • Challenge：英語ハンズオン

Challenge要約

  • 「CampingListController」Apexクラスを作成し、getItems, saveItemメソッドを実装してください。
  • コンポーネントの起動時にデータベースから既存レコードの読み込みを行う、「doInit」初期化ハンドラを追加してください。
  • 有効なフォーム送信内容からデータベースにレコードを保存するため、ヘルパーに記述したcreateItemメソッドを使用するようにJavaScript コントローラを変更してください。新しいitemは、コントローラのitems value provider に追加されます。

コンポーネントとイベントの接続

https://trailhead.salesforce.com/ja/modules/lex_dev_lc_basics/units/lex_dev_lc_basics_events

  • 説明：日本語
  • Challenge：英語ハンズオン

Challenge要約

  • 「campingList」コンポーネントにあるHTMLフォーム部分のコードを、新しく作成した「campingListForm」コンポーネントに移動してください。また、ボタンをクリックした際に「clickCreateItem」JavaScript コントローラアクションを呼び出すようにしてください。
  • 「campingList」コンポーネントは、c:addItemEvent イベントをリスン(listen)し、JavaScriptコントローラにある handleAddItem アクションを実行するようにしてください。 handleAdditemメソッドはレコードをデータベースに保存し、レコードを items value provider に追加するようにしてください。
  • addItemEvent イベントの type は component とし、 Camping_Item__c 型(type)の item という名前の属性を持つようにしてください。
  • 「campingListForm」コンポーネントには、c:addItemEvent 型(type)の addItem イベントを登録してください。
  • フォームが有効な場合、campingListFormController JavaScriptコントローラは、ヘルパーにある createItem メソッドを呼び出すようにしてください。
  • campingListFormHelper JavaScriptヘルパーは、追加する item を持つ addItem イベントを作成し、イベントを発生させるようにしてください。その後、newItem value provider を、空の Camping_Item__c 型(type) の sObjectType でリセットしてください。

次のステップの確認

https://trailhead.salesforce.com/ja/modules/lex_dev_lc_basics/units/lex_dev_lc_basics_next_steps

  • 説明：日本語
  • Challenge：日本語選択問題