ホーム » テックブログ – Tech Blog » Lightning Web Components入門（5）応用編

Lightning Web Components入門（5）応用編

March 20, 2019 Naoki Kitaarashi

こんにちは、アピリオ北嵐です。LWC入門（1）〜（4）でLWCの特長、構成、基本的な開発方法まで解説しました。第5回目の今回は応用編ということで、本格的なLWCの実装時に必要となるテクニックをいくつか紹介したいと思います。

コードの共有化

AuraコンポーネントでJavaScriptコードをコンポーネント間で共有化することは少し面倒であり、静的リソースとしてJavaScriptコードを登録したり、コンポーネントの継承の仕組みを使うといったテクニックが必要でした。LWCでは共有するコードをコンポーネントとして定義し、利用する側で import するだけです。共有コードとして登録するコンポーネントにはhtmlファイルは必要なく、JavaScriptファイルとメタデータファイルのみの構成となります。

  1| /*
  2|  * Chage date value to string format.
  3|  * Date型を文字列に変換する
  4|  *  戻り値の日付フォーマット (yyyy/MM/dd hh:mm:ss)
  5|  *  dt 日付
  6|  */
  7| const toStringFromDate =(dt) => {
  8|     let timeString = dt.toLocaleTimeString('en-US', {'hour12':false}) //24フォーマット
  9|     return [
 10|         dt.getFullYear(),
 11|         dt.getMonth() + 1,
 12|         dt.getDate()
 13|         ].join( '-' ) + ' '
 14|         + timeString;
 15| };
 16|
 17| export { toStringFromDate };

[共有コンポーネント lwc_CommonUtils]

呼び出し側のJavaScriptファイルでは、使用したい関数を import してから使用します。同じSalesforce組織に定義したコンポーネントはネームスペース "c/" を頭 に付けてimportしてください。

  1| import { toStringFromDate } from 'c/lwc_CommonUtils';
  2|  ・・・
  3| let today = new Date();
  4| let strToday = toStringFromDate(today);

[呼出し側のコード]

イベントの利用

コンポーネントがお互いに連携して動作するために、LWCでもイベントの仕組みが提供されています。Auraコンポーネントではイベント・コンポーネントを定義してから使う必要がありましたが、LWCでは標準のカスタムイベントの仕組みを使ってイベントの送受信を行えます。

下記のようにページ内のボタンを押すとPage番号が変更されるコンポーネントの例を下記に示します。子のlwc_pagingコンポーネントは、ボタンが押されるとイベントを親のlwc_eventSampleコンポーネントに送る構造になっています。

イベントの送信

イベントを送信するには、名前を付けてCustomEventを作成してからdispatchします。

  1| <template>
  2|     <lightning-layout>
  3|         <lightning-layout-item>
  4|             <lightning-button label="< 前へ" icon-name="utility:chevronleft" onclick={previousHandler}>
  5|             </lightning-button>
  6|         </lightning-layout-item>
  7|         <lightning-layout-item flexibility="grow"></lightning-layout-item>
  8|         <lightning-layout-item>
  9|             <lightning-button label="> 次へ" icon-name="utility:chevronright" icon-position="right" 
 10|                                           onclick={nextHandler}>
 11|             </lightning-button>
 12|         </lightning-layout-item>
 13|     </lightning-layout>
 14| </template>
 15|

[lwc_pagingコンポーネント：HTML]

  1| /*
  2|  * Lightnig Webコンポーネントサンプル
  3|  *  Paging イベントのみを送る
  4|  */
  5| import { LightningElement } from 'lwc';
  6|
  7| export default class lwc_paging extends LightningElement {
  8|     /*
  9|      * 初期化処理
 10|      */
 11|     connectedCallback() {
 12|     }
 13|
 14|     /*
 15|      * 「前へ」ボタン クリック
 16|      */
 17|     previousHandler() {
 18|         //イベント名 previous を発行する
 19|         this.dispatchEvent(new CustomEvent('previous'));
 20|     }
 21|
 22|     /*
 23|      * 「次へ」ボタン クリック
 24|      */
 25|     nextHandler() {
 26|         //イベント名 next を発行する
 27|         this.dispatchEvent(new CustomEvent('next'));
 28|     }
 29| }

[lwc_pagingコンポーネント：JavaScript]

イベントの受信

DOMのツリー階層で子供のコンポーネントから送信されたイベントを親コンポーネントが受信する一番簡単な方法は、下記のようにhtmlの属性としてイベントハンドラを定義することです。on + イベント名 の形式でイベントハンドラを定義します。

  1| <template>
  2|     <lightning-card title="イベント サンプル パラメータなし" icon-name="custom:custom9">
  3|         <div class="slds-m-around_medium">
  4|             <p class="slds-m-vertical_medium content">Page {page}</p>
  5|             <c-lwc_paging onprevious={previousHandler} onnext={nextHandler}>
  6|             </c-lwc_paging>
  7|         </div>
  8|     </lightning-card>
  9| </template>

[lwc_eventSample: html]

JavaScript側ではイベントハンドラのコードを記述します。下記のサンプルでは pageプロパティの値をインクリメント/デクリメントしています。

  1| import { LightningElement, track } from 'lwc';
  2| export default class lwc_eventSample extends LightningElement {
  3|
  4|     @track page = 1;
  5|     previousHandler() {
  6|         if (this.page > 1) {
  7|             this.page = this.page - 1;
  8|         }
  9|     }
 10|
 11|     nextHandler() {
 12|         this.page = this.page + 1;
 13|     }
 14|
 15| }

[lwc_eventSample: JavaScript]

上記の例ではパラメータなしでイベントを送信しています。パラメータを付けてイベント送信したい場合は、下記のように detailパラメータに値をセットしてからCustomEventを生成します。

  1|  //イベント名 selected をデータ付き（contact.Id) で発行する
  2|  const selectedEvent = new CustomEvent('selected', { detail: this.contact.Id });
  3|  this.dispatchEvent(selectedEvent);
  4|

イベントの受信側では 、下記のようにevent.detail 属性から送信したパラメータを取得します。さらに詳しくイベント処理を知りたい方は公式ガイドを参照してみてください。

  1| contactSelected(event) {
  2|     const contactId = event.detail;
  3|     this.selectedContact = this.contacts.data.find(contact => contact.Id === contactId);
  4| }
  5|

 

外部ライブラリーの読込み

OSSとして提供されている外部ライブラリ等をLWCから利用するには、loadStyle (CSS用)および loadScript (js用)関数を使用します。下記の例では静的リソースとして登録したjqueryファイルを loadScript関数を使って読み込んでいます。

JavaScriptコードの読み込みに成功すると then()に登録された関数が実行されます。サンプルでは$変数をクラスのiquery属性にセットしています。

  1| /*外部リソースの読込*/
  2| import { loadStyle, loadScript } from 'lightning/platformResourceLoader';
  3| /*静的リソースの読込*/
  4| import jquery3 from '@salesforce/resourceUrl/jquery3'
  5|
  6| export default class lwc_useJQuery extends LightningElement {
  7|     jquery;
  8|
  9|     /*
 10|      * 初期化処理
 11|      */
 12|     connectedCallback() {
 13|         //リソースの読込
 14|         Promise.all([
 15|             loadScript(this, jquery3)
 16|         ]).then(() => {
 17|             this.jquery = $;
 18|         });
 19|     }
 20| }

 

トーストメッセージの表示

LEX環境でお馴染みのトースト形式でメッセージを表示したい場合は、ShowToastEventを使用します。このイベントの詳細については公式ガイドを参照してください。

  1| //toastメッセージ表示用の標準コンポーネント
  2| import { ShowToastEvent } from 'lightning/platformShowToastEvent'
  3|
  4| ・・・
  5|
  6|    /*
  7|      *toastによるメッセージ表示
  8|      */
  9|     showToast(message) {
 10|         const event = new ShowToastEvent({
 11|             title: '実行時エラー',
 12|             message: message,
 13|             variant: 'error',
 14|             mode: 'pester'
 15|         });
 16|         this.dispatchEvent(event);
 17|     }
 18|

[Toastメッセージの表示例]

ページ遷移

特定のレコードページを表示するといったページ遷移を行いたい場合は、NavigationMixinクラスをimportしてから継承します。下記の例では、レコードIDを指定して商談の詳細ページに遷移しています。

LWCでは、このNavigationMixinの仕組みを使って様々な要素へのナビゲーションが提供されています。詳細については公式ガイドを参照して下さい。

  1| import { LightningElement, api, track, wire } from 'lwc';
  2| import { NavigationMixin } from 'lightning/navigation';
  3|
  4| // Apex method
  5| import retrieveOpps from '@salesforce/apex/LWC_OpportunityListController.retrieveOpps';
  6|
  7| export default class lWC_OppList extends NavigationMixin(LightningElement) {
  8|
  9| ・・・
 10|     /*
 11|      * 行の右側のドロップダウンリストをクリック
 12|      */
 13|     rowAction(evt) {
 14|         evt.preventDefault();
 15|         evt.stopPropagation();
 16|
 17|         let action = evt.detail.action;
 18|         let row = evt.detail.row;
 19|         //商談レコードに遷移する
 20|         if (action.name === 'show_details') {
 21|             this[NavigationMixin.Navigate]({
 22|                 type: "standard__recordPage",
 23|                 attributes: {
 24|                     recordId: row.Id,
 25|                     objectApiName: "Opportunity",
 26|                     actionName: "view"
 27|                 }
 28|             });
 29|         }
 30|     }
 31|
 32| ・・・
 33| }

 

レコードIDの取得

LWCコンポーネントをレコードページに配置した場合は、publc属性としてrecordIdプロパティ定義すると、起動時に自動的に親レコードのIDがセットされます。

  1| export default class LWC_OppList {
  2|     @api recordId;
  3|
  4| /*

 

ログインユーザーIDの取得

下記のimport文を定義することで、現在ログイン中のSalesforceアカウントのIDを取得することが可能です。

  1| //ログインユーザーIDの取得
  2| import userid from '@salesforce/user/Id';
  3|

 

おわりに

いかがでしたでしょうか。LWCでもAuraコンポーネントと同様な機能を実現できるように、やり方は少し異なりますが一通りの機能を実装できるようになっています。今回紹介したテクニックの詳細を知りたい方は、少しボリュームはありますが公式ガイドを参照してみてください。

それでは皆さんも、この新しいWeb Componentsの世界を是非ご自身で体験してみてください！！ 本ブログが少しでもお役に立てれば幸いです。


■ Lightning Web Components 入門（全5回）シリーズは下記のリンクからご覧いただけます。
・ Lightning Web Components入門（1）Aura Components からLightning Web Componentsへ
・ Lightning Web Components入門（2）LWCの基本的な構成
・ Lightning Web Components入門（3）コンポーネントの実装方法
・ Lightning Web Components入門（4）Salesforce CLI
・ Lightning Web Components入門（5）応用編

 

 

著者について

某大手SIベンダーを退職し2015年からアピリオの一員としてクラウドの世界に身を投じているシニアエンジニアです。プロジェクトでの立場に応じて、アーキテクト、リーダー、デベロッパーと様々なロールの仕事に携わっています。1人のエンジニアとして技術の最先端に居続けることが技術者としてのこだわりです (^o^) やはりクラウドの世界は面白い！

Naoki Kitaarashi のコンテンツをもっと見る
戻る
Lightning Web Components入門（4）Salesforce CLI
Lightning Web Components入門（4）Salesforce CLI

Lightning Web Componentsの開発はSalesforce CLIを使って行います。今回はこのCLI（コマンドライン・インターフェース）にスポットを当ててみたいと思います。Salesforce C...

次へ
Salesforce CLIによるリリース作業
Salesforce CLIによるリリース作業

本ブログで紹介するのは、WInter'18から提供されている Salesforce CLI を使ったリリース方式です。Salesforce CLIはメタデータAPI（mdapi）を包含しているため、コマンドを使って...

アピリオまでお気軽にお問合せください

ご質問はこちら
ホームに戻る