Salesforce LWCで大量カード一覧を高速化！Dynamic Listの使い方・比較検証・選定基準

2026.08.19

#Salesforce #LWC #Dynamic List

2026年6月リリースのSummer’26で、Salesforceはlightning-dynamic-list-container / lightning-dynamic-list-itemを開発者プレビューとして公開しました。
Lightning Web Components（LWC）で一覧を作るとき、レコードの描画負荷を下げる新しい仕組みです。

数百件から数千件のレコードを、複数項目やボタンを含むカード形式で一度に表示すると、画面外の行までDOMに存在するため、初期表示や検索解除時の再描画が重くなることがあります。
本記事では、2,000件の商談を使い、同じ見た目の従来版とDynamic List版を左右に並べて検証します。

想定読者
SalesforceのLWC開発者、アーキテクト、技術選定を行うプロジェクトリーダー

この記事でわかること

• Dynamic Listがどのように表示対象を仮想化するのか
• 従来のfor:each、ページング、Infinite Loading、自作仮想化との違い
• 2,000件で確認したDOM描画行数と再描画時間の差
• メリット、制約、実務で向いている画面・向いていない画面

2026年8月時点に実機で試すには

2026年8月時点でDynamic Listを実機で試すには、Sandboxの［設定］から［Salesforce リリースマネージャー］を開き、リリースチャネルをStandardからDevへ切り替えます。切り替え後にブラウザを更新すると、Salesforceロゴの横に「DEV」と表示されます。Dynamic Listは開発者プレビューのため、通常のStandardチャネルでは利用できません。

　

　

Devチャネルを選択　　　　　　　　　　　　切り替え後の「DEV」表示

Dynamic Listとは

Salesforce公式のComponent Referenceでは、Dynamic Listは「リストの一部だけを仮想化して描画する」コンポーネントとして説明されています。全データはlist-itemsへ渡しますが、DOMに描画するのは現在の表示領域と小さなバッファに含まれる行だけです。スクロールに応じて行を追加・削除します。

 
Dynamic List版の基本構造

<lightning-dynamic-list-container
    list-items={filteredOpportunities}
    onrenderlistitems={handleRenderListItems}>

    <template
        for:each={visibleOpportunities}
        for:item="opportunity">

        <lightning-dynamic-list-item
            key={opportunity.Id}
            item-id={opportunity.Id}>
            <!-- 1行分の商談カード -->
        </lightning-dynamic-list-item>
    </template>
</lightning-dynamic-list-container>

 
描画対象の部分配列を受け取るJavaScript

handleRenderListItems(event) {
    this.visibleOpportunities =
        event.detail.listItemsToRender;
}

 
listItemsToRenderに入るのは、containerが「今DOMへ置く必要がある」と判断した行だけです。
公式ドキュメントでは、可変行高、行の追加・削除、スクロールアンカー、追加読み込み、フォーカス保持、キーボード操作、スクリーンリーダー対応も説明されています。

従来のfor:eachでは何が起きるか

従来の一覧表示は、次のように表示対象の配列を直接for:eachへ渡します。
通常版の基本構造

<template
    for:each={filteredOpportunities}
    for:item="opportunity">

    <article key={opportunity.Id}>
        <!-- 1行分の商談カード -->
    </article>
</template>

 
LWC Developer Guideのとおり、各行に一意のkeyを付けることで、LWCは変更された項目を識別し、不要な再描画を抑えます。ただし、keyはリストを仮想化する機能ではありません。2,000件の配列を表示対象にすれば、最終的には2,000件分の行がDOMに存在します。

 
今回の商談カードには、商談名、取引先名、フェーズのバッジ、金額、完了予定日、確度が含まれます。1件につき1つのDOMノードではなく、複数のHTML要素とLightningベースコンポーネントが生成されるため、行数が増えるほどブラウザ側の処理量も増えます。

従来も対策はあった、何が新しいのか

Dynamic Listが登場するまで、LWCで大量一覧を扱えなかったわけではありません。代表的な対応策は次のとおりです。

 
SalesforceのDatatable Performanceガイドでも、小さなデータセット、ページング、Infinite Loadingなどが従来から推奨されています。新機能の本質は「不可能だったことを可能にした」ことではありません。

比較検証の構成

今回は、同じ商談データを表示する2つのLWCを作成、配置しました。

• 左側はDynamic List版
• 右側は通常のfor:each版

左：今回のDynamic List版、右：従来版

見た目以外の差が結果へ入りにくいよう、次の条件をそろえました。

• 同じApexメソッド、同じSOQL、同じ並び順を使用
• 同じ商談データ、同じ表示項目、同じカードデザインを使用
• 同じ検索ロジック、同じリスト高さ、同じ取得件数を使用
• 表示項目は商談名、取引先、フェーズ、金額、完了予定日、確度
• 比較用に2,000件のサンプル商談を作成

 
画面上には、表示対象件数、取得件数、LWCが描画対象として保持している商談行数を表示しました。記事内の「DOM描画中 26件」は商談行の件数であり、カード内部を含むDOMノード総数が26個という意味ではありません。

再描画時間の計測方法

DOM描画行数だけでなく、検索解除時の応答差もperformance.now()で簡易計測しました。操作手順は次のとおりです。

• 「DL検証用商談 1」～「DL検証用商談 2000」という2000件の商談レコードを作成しておく
• 両LWCで商談件数を2,000件としておく
• 検索欄へ「DL検証用商談 2000」を入力し、表示件数を1件に絞り込む
• 検索文字を削除し、全件表示へ戻す
• DOM更新後にブラウザが画面を描画する機会を一度通過するまでを計測する

計測部分の抜粋

startMeasurement() {
    this.renderStartTime = performance.now();
    this.measurementPending = true;
}

scheduleMeasurementCompletion() {
    window.requestAnimationFrame(() => {
        window.requestAnimationFrame(() => {
            this.renderDuration =
                performance.now() - this.renderStartTime;
            this.measurementPending = false;
        });
    });
}

 
250msの検索デバウンス時間とApexのデータ取得時間は含めていません。
一方、クライアント側の検索、配列生成、LWCの更新、Dynamic Listの再計算、描画フレーム待機は含まれます。純粋なDOM生成時間だけを切り出したベンチマークではなく、同一画面・同一操作での相対比較です。

検証結果

2,000件を表示上限として3回計測した場合

2,000件表示時の比較（3回計測）

2,000件では、3回ともDynamic List版の描画対象行は26件、通常版は2,000件でした。Dynamic List版は70.4〜86.4ms（3回平均76.6ms）、通常版は1,621.3〜1,697.4ms（3回平均1,658.6ms）でした。3回平均の比較では、通常版が約21.7倍の時間を要しました。
 

結果まとめ

図3：2,000件の検索解除後の再描画時間（3回平均）。

結果をどう読むべきか

Dynamic Listはデータ取得量を減らす機能ではない

今回のDynamic List版も、Apexから2,000件を取得し、JavaScript上では2,000件を保持しています。違うのはブラウザが同時にDOMへ置く商談行数です。

 
したがって、データ取得や通信量まで軽くしたい場合は、サーバー側検索、ページング、GraphQLカーソル、loadmoreなどと組み合わせる必要があります。

Dynamic List版の時間が常に一定になるわけではない

2,000件を3回計測した結果、Dynamic List版は70.4〜86.4ms（平均76.6ms）、通常版は1,621.3〜1,697.4ms（平均1,658.6ms）でした。試行数は限定的であり、検索対象の走査、配列生成、reset()、表示範囲や行位置の再計算など、DOM行数以外の処理も残ります。
Dynamic Listの効果は「データ件数にかかわらず処理時間を一定にすること」ではなく、「件数が増えても、重いカードUIを全件分DOMへ作らないこと」と捉えるのが適切です。

数値は相対比較として扱う

今回は同一環境・同一操作で明確な差が出ました。ただし、2,000件を3回実行した簡易計測であり、ウォームアップや実行順序のランダム化、十分な試行回数を備えた性能試験ではありません。「本検証環境における参考値」とし、一定倍率の高速化を保証するものではありません。

Dynamic Listのメリット

画面外の行をDOMに抱え続けない

表示領域と小さなバッファだけを描画するため、カード内の要素数が多いほど、DOMサイズ、レイアウト計算、メモリ使用量を抑えやすくなります。公式ドキュメントでも、ブラウザ性能、メモリ使用量、操作応答の改善が目的として挙げられています。

自由なカード型UIを維持できる

lightning-dynamic-list-item自体には見た目がなく、SLDSや独自CSSで行を自由にデザインできます。商談カード、商品検索、タイムライン、マッチング候補、AI推薦理由など、表形式に収まりにくい一覧へ向いています。

可変行高や動的変更を標準で扱える

行ごとに高さが異なる場合や、途中への行追加・削除、コンテナのリサイズにも対応します。自作仮想化で難易度が上がりやすいスクロールアンカーも標準機能に含まれます。

デメリットと実装上の注意点

現時点では本番採用できない

Dynamic Listは2026年8月時点では開発者プレビューです。
Salesforceのアナウンスでは一般提供される保証がなく、仕様変更・非推奨化の可能性があり、本番機能へ実装しないよう明記されています。現状は検証、社内デモ、将来設計の評価用途に限られます。

少数件では実装複雑性が上回る

数十件程度なら通常のfor:eachで十分です。Dynamic Listでは、list-items、renderlistitems、item-id、高さ指定、reset()などの考慮が増えます。

高速スクロール中に一時的な空白が出る場合がある

公式ドキュメントでは、高速スクロール時に最後のイベントを優先するため、一時的に空白が表示され、停止後に内容が現れる場合があると説明されています。常に先読み済みの表示を保証する仕組みではありません。

どの方式を選ぶべきか

 
Dynamic Listはlightning-datatableの後継ではありません。表としての操作性が必要ならdatatable、自由なカード型一覧を仮想化したいならDynamic List、という使い分けが基本です。

まとめ

lightning-dynamic-list-containerとlightning-dynamic-list-itemは、大量リストを表示範囲中心に仮想化する新しいLWCベースコンポーネントです。
従来もページング、Infinite Loading、自作の仮想スクロールといった選択肢はありました。新機能の価値は、自由なカード型リストの仮想化に加え、可変行高、スクロール位置管理、追加読み込み、フォーカス保持、キーボード操作、アクセシビリティまでSalesforce標準へまとめた点にあります。

今回の商談一覧では、同じ2,000件を取得した状態で、Dynamic List版が26件、通常版が2,000件の商談行を描画対象として保持しました。検索解除時の3回平均は76.6ms対1,658.6msとなり、本検証環境では、画面操作上も明確な応答差を確認できました。

一方で、Dynamic Listはデータ取得量を減らす機能ではなく、開発者プレビューで本番実装もできません。現時点では検証対象として捉え、GA後に適用場面とサーバー側のデータ取得設計を含めて判断するのが適切です。

補足：計測ロジックの考え方

本記事で使用した計測結果は最終的な描画完了時刻を厳密に保証するものではありません。記事上では絶対性能のベンチマークではなく、同じ条件での再描画応答を比較するための簡易計測として扱っています。

＜Salesforce＞
弊社ではSalesforceをはじめとするさまざまな無料オンラインセミナーを実施しています！
＞＞セミナー一覧はこちら

また、弊社ではSalesforceの導入支援のサポートも行っています。ぜひお気軽にお問い合わせください。
＞＞Salesforceについての詳細はこちら
＞＞Salesforceの導入支援実績はこちらからご覧いただけます！

医療業界に特化した営業支援、顧客管理(SFA/CRM)のコンサルティングも提供しております。こちらもぜひお気軽にお問い合わせください。
＞＞顧客管理(SFA/CRM)のコンサルティングの詳細はこちら