順次表示と条件付き表示を使用する

学習の目的

この単元を完了すると、次のことができるようになります。

• 順次表示の利点を説明する。
  
• 条件付き表示について説明する。
  

順次表示を使用してパフォーマンスを最適化する

一般に、すべての使用可能なデータとすべての使用可能なツールを画面上に表示することは、優れた UX 手法とみなされません。アプリケーションのパフォーマンスに大きな影響を及ぼす可能性もあります。ページレイアウトに追加された Lightning コンポーネントはページが読み込まれるときにインスタンス化され、ページの全体的な読み込み時間に影響します。このため、インタラクティブなデザインガイドラインでは順次表示が優先されます。

「順次表示は人間とコンピューターのやり取りで使用されることがよくあるインタラクションデザイン手法であり、乱雑さ、混乱、認知負荷を減らすことによりユーザーの注意力を維持するのに役立ちます。目下の作業に最低限必要なデータのみを提示することにより、ユーザビリティが向上します。」(Wikipedia)

また、Jakob Nielsen によると、「順次表示は、高度な機能やほとんど使用されない機能を遅延して副画面に表示することで、アプリケーションの学習を容易にし、エラーを発生しにくくします」。

Lightning Experience では、簡単に順次表示を実装して、目下の作業に不可欠ではないデータや機能を遅延させることができます。コンポーネントの作成を遅らせる方法はいくつかありますが、そのうちの 2 つ、「遅延インスタンス化」(遅延読み込みともいう) と「条件付き表示」について詳しく見てみましょう。

遅延インスタンス化

遅延インスタンス化 (または遅延読み込み) は、オブジェクトやコンポーネントが初めて使用されるまで作成されないことを意味します。Lightning Experience で実行するか、異なるタブコンポーネントを利用して実行できます。

Lightning Experience での遅延インスタンス化

Lightning アプリケーションビルダーでは、遅延インスタンス化された Lightning Experience の特定領域内にコンポーネントを配置することにより、順次表示を宣言的に実装できます。次のような領域に配置できます。

• 標準タブコンポーネント。情報を非表示にして、ユーザーがタブを選択したときにのみ読み込ませることができます。
  
• Lightning コンポーネントアクションまたはクイックアクション。ユーザーがボタンをクリックしたときにのみ、コンポーネントを読み込ませることができます。
  
• ユーティリティバー。任意のアプリケーションに追加でき、ユーザーがクリックしたときにコンポーネントを読み込むことができるボタンなどが含まれます。
  

独自のコンポーネントでの遅延インスタンス化

デフォルトで遅延インスタンス化をサポートするタブコンポーネントのセット (<lightning-tabset>、<lightning-tab> など) を活用します。

<lightning-tabset>

  <lightning-tab label="Item One"> Content for tab 1 </lightning-tab>

  <template lwc:if={showTabTwo}>

    <lightning-tab label="Item Two"> Content for tab 2 </lightning-tab>

  </template>

</lightning-tabset>

タブセットとアプリケーションビルダーのタブコンポーネントは遅延読み込みされますが、Lightning コンソール内のタブはワークスペースとして読み込まれ、サブタブは遅延読み込みされません。

条件付き表示

条件付き表示は、状態または動作が一致したときにのみオブジェクトやコンポーネントが表示されることを意味します。Lightning Web コンポーネントを条件付き表示する方法は 3 つあります。

• Lightning アプリケーションビルダーの動的コンポーネント表示
  
• lwc:if|elseif|else
  
• CSS
  

Lightning アプリケーションビルダーの動的コンポーネント表示

1 つ目の方法は宣言型で、アプリケーションビルダーに直接組み込まれています。動的コンポーネント表示では、Lightning アプリケーションビルダーで検索条件とロジックをプロパティに追加することにより、コンポーネントが Lightning ページに表示されるタイミングを制御できます。たとえば、商談の金額が 100 万ドル以上の場合に商談ページにリッチテキストコンポーネントを表示させる検索条件を作成できます。

lwc:if|elseif|else

2 つ目の方法は、開発者が lwc:if|elseif|else を使用して UI の部分を遅延インスタンス化し、DOM 要素を条件付き表示することができます。

<template>

  <div lwc:if={something}>Conditional text displayed if something = true</div>

  <div lwc:else>Conditional text displayed if something = false</div>

</template>

この場合、「何か」が true の場合、最初の <div> タグとそのすべての子が作成されますが、2 つ目の <div> タグとそのすべての子は表示されません。この「何か」の式が false に変わると、結果が入れ替わります。この場合、最初の <div> タグが破棄され、2 つ目が表示されます。

CSS

3 つ目は、表示を切り替える CSS スタイルを活用する方法で、次のテンプレートと JavaScript を使用して実装できます。

テンプレート

JavaScript

get className(){

  return isError ? 'slds-show': 'slds-hide';

}

<div> コンポーネントとそのすべての子が前もって作成、表示されますが、JavaScript が実行されるまでユーザーには表示されません。CSS を使用するとコンポーネントが前もって作成されるため、他の 2 つの方法のようにページの読み込みでパフォーマンスは向上しないことに注意してください。ただし、JavaScript が実行されると、初期化や表示を行う必要なくコンポーネントがすぐにユーザーに示されます。

CSS による非表示と if:true/false との間の重要な相違点として、CSS アプローチではコンポーネントがアクティブのままで保持されるため、状態が維持されます。If:true|false を使用するとコンポーネントは破棄されて再作成されるため、状態は失われます (リセットされます)。

上記の方法は提示された順番で使用してください。まず、1 つ目の方法で説明した宣言型オプションを使用します。ただし、この方法は Lightning アプリケーションビルダー用に設定されたコンポーネントでのみ使用できます。次に使用するべき方法は 2 つ目の if:true|false アプローチです。この方法はすべてのコンポーネントで機能します。どちらの方法も、条件が満たされるまでコンポーネントまたは囲まれた要素ツリーの作成と表示を遅延することで、ページの最初の読み込み時間を短縮するのに役立ちます。3 つ目の方法である CSS は、開発者がコンポーネントを事前に読み込み、その後、条件が満たされた場合に UI に表示する必要がある場合に使用します。

主な表示方法について理解を深めたところで、次はパフォーマンスの改善に役立つ他のオプションについて学習しましょう。

リソース

• Salesforce ヘルプ: 動的 Lightning ページ
  
• Lightning Web Components Developer Guide (Lightning Web コンポーネント開発者ガイド): Render DOM Elements Conditionally (条件に応じた DOM 要素の表示)
  
• Lightning Web Components (Lightning Web コンポーネント): Tab (タブ)
  
• Lightning Web Components Dev Guide (Lightning Web コンポーネント開発者ガイド): Render Multiple Templates (複数のテンプレートの表示)