LWC における「非同期性 × キャッシュ × 再取得」の理解まとめ
LWC 開発中に、「最新データが画面に反映されない」 ことがありました。
調べてみると、これは 非同期処理・キャッシュ・再取得 の仕組みを理解していないことが原因でした。
この記事では、「非同期性 × キャッシュ × 再取得」 という LWC の基本的な仕組みを整理して紹介します。
1. ワイヤーサービスの非同期性とは
LWC の @wire は 非同期でデータを取得 します。
- 初回レンダリング直後：まだ undefined
- データ取得後：LWC フレームワークが結果を流し込み → UI が差分レンダリングで更新
👉 最初に「空の UI」が表示され、後から「データあり UI」に差し替わる
2. キャッシュ：取得データの再利用
LWC のワイヤーサービスは内部的に Lightning Data Service (LDS) のキャッシュ を利用します。
- 同じパラメータで再取得する場合、まずキャッシュが返る
- サーバー問い合わせを減らし、パフォーマンスを向上させる
👉 そのため「編集しても UI が更新されない」「古い情報が残って見える」ケースが起きる。
3. 再取得：最新データへの更新
キャッシュのおかげで効率的ですが、常に最新を表示したい場面では工夫が必要です。
3-1. リアクティブパラメータによる再取得
@wire は $ が付いた リアクティブパラメータ を監視します。
変数が変わるたびに wire が再実行され、非同期でデータを再取得します。
// レコードIDを監視して、切り替わるたびに非同期でデータを再取得
@wire(getRecord, { recordId: '$recordId', fields: ['Account.Name'] })
wiredAccount({ data, error }) {
if (data) {
this.name = data.fields.Name.value;
}
}
3-2. refreshApex による明示的な再取得
import { refreshApex } from '@salesforce/apex';
@wire(getAccounts) wiredAccounts;
handleUpdate() {
// 更新処理後に最新化
refreshApex(this.wiredAccounts);
}
3. 非同期性における実装上の考慮点
- データは すぐには取得できない → undefined チェック/条件分岐による表示
- スピナーやローディング状態を表示
- 必要なときだけ refreshApex を呼ぶ（乱用するとパフォーマンス悪化）
4. まとめ
- 非同期性：最初は空 → 後から差し替え
- キャッシュ：パフォーマンス最適化のため過去データを再利用
- 再取得：リアクティブ変数 or refreshApex で最新化