LWC開発者必見！コードの効率化とパフォーマンス向上のベストプラクティス

2024/12/19

T.T

Rewa Tech

技術コラム

システム開発

Lightning Web コンポーネント（LWC）は、Web標準を使用したSalesforce開発を行えるプログラミングモデルです。Salesforceに軽量でパフォーマンスの高いカスタムユーザインターフェースを構築することができます。しかし、効率的でパフォーマンスに優れたコードを書くためには、単なる「書き方」を超えた工夫が必要です。

この記事では、LWC開発の効率化とパフォーマンス向上のためのベストプラクティスを紹介します。これを実践することで、より最適化されたアプリケーションを構築できるようになるでしょう。

1. JavaScriptの効率的な利用

LWCはJavaScriptベースで動作しているため、適切なJavaScriptの記述が不可欠です。

不要な再計算を避ける
- デコレータ@trackや@apiの使用範囲を絞り、不要なレンダリングを防ぐ。
非同期処理の適切な利用
- Promiseやasync/awaitを利用して非同期処理を効率化。特に、fetchやApex呼び出し時に注意する。

実例）

// 非効率的な例
this.data = await fetchData(); 
this.calculateSummary(this.data); 

// 効率的な例
fetchData().then(data => {
this.data = data;
this.calculateSummary(data);
});

2. HTMLとCSSの最適化

HTMLの軽量化
- 必要最小限のDOM構造を維持し、深いネストを避ける。
SLDS（Salesforce Lightning Design System）の活用
- カスタムCSSを最小限にし、標準のクラスを利用することで、スタイルの一貫性を確保する。

実例）

<!-- 悪い例 -->
<div class="custom-container">
    <div class="nested-div">
        <p class="text-class">Content</p>
    </div>
</div>

<!-- 良い例 -->
    <div class="slds-card">
        <p class="slds-text-body_regular">Content</p>
    </div>

3. Apexとの連携での注意点

LWCとApexを連携させる際、APIコールの最適化が重要です。

SOQLの効率化
- 必要な項目だけを取得し、無駄なデータ転送を減らす。
バッチ処理の検討
- 大量のデータ処理が必要な場合、バッチ処理を使用する。

実例）

// 悪い例: 不要な項目を取得
SELECT Id, Name, CreatedDate, Owner.Name FROM Account

// 良い例: 必要な項目のみ取得
SELECT Id, Name FROM Account

4. イベントの適切な管理

LWCは親子コンポーネント間のデータ通信にイベントを使用しますが、過度なイベント発行はパフォーマンスを低下させます。

カスタムイベントの使用
- 必要なデータのみをペイロードとして渡す。
イベントリスナーの最小化
- コンポーネントのアンマウント時に不要なリスナーを削除する。

5. ツールを活用した効率化

VSCodeプラグイン
- Salesforce Extension Packを利用して、コードの補完やヒント機能を活用する。
テスト
- javascriptのテストフレームワークJestを使用して、コンポーネント単位のテストを実行する。
デバッグ
- console.logを使う。
- Chromeの開発者ツールで、ブレイクポイントを設定する。
- 開発者ツールのwatch欄でwatcherを追加する。